javaweb-HTML-026

Article Directory

HTML-text writing

Static resources:
* HTML: used to build a basic web page and display the content of the page
* CSS: used to beautify the page and layout the page
* JavaScript: control the elements of the page to give the page some dynamic effects

Concept: It is the most basic web development language
* Hyper Text Markup Language Hypertext Markup Language
* Hypertext:
* Hypertext is a web text that uses hyperlinks to organize text information in various spaces.
* Markup Language:
* Language composed of tags. <tag name> such as html, xml
* markup language is not a programming language
1. Quick start:
  - grammar:
    1. html document suffix .html or .htm
    2. Tags are divided into
      1. Containment tags: There are start tags and end tags. Such as
      2. Self-closing and labeling: start label and end label together. Such as
    3. Tags can be nested: they
      need to be nested correctly, you cannot have me in you, and you in me
      Error:
      correct:
    4. Attributes can be defined in the start tag. The attribute is composed of key-value pairs, and the value needs to be enclosed in quotation marks (both single and double)
    5. HTML tags are not case sensitive, but lowercase is recommended.
2. Label learning:
  1. File tags: the most basic tags that make up html
    - html: the root tag of the html document
    - head: head tag. Used to specify some attributes of the html document. Bring in external resources
    - title: Title tag.
    - body: body tag
    - : The document is defined in html5 as an html document
  2. Text tags: The
    html grammar of the tags related to the text is not strict, and it can still be recognized even if some parts are missing
    - Notes:
      - h1~h6: font size gradually decreases
    - : Paragraph tag paragraph wraps directly br format is not beautiful
    - : If the newline tag directly wraps, the result is a null character
    - : Show a horizontal line
    - h5 has not recommended the use of these attributes, but backward compatibility is still available.
      - Attributes:
        
        color: color
        
        width: width
        
        size: height
        
        align: alignment method
        
        center: centered
        
        left: left aligned
        
        right: Right aligned
    - : Bold font
    - : Italic font
    - The following two methods have been eliminated but can still be used
    - : Font label
    - : Text in the center * attributes: * color: color * size: size * face: font
    - Property definition:
      - color：
        
        English Words: red,green,blue
        
        rgb (value 1, value 2, value 3): Value range: 0~255 such as rgb(0,0,255)
        
        #Value1value2value3: Value range: between 00~FF. Such as: #FF00FF can use the color picker to view the code
      - width：
        
        Value: width='20', the unit of the value, the default is px (pixel)
        
        Numerical value %: the proportion of the proportion relative to the parent element

Picture label

Picture tag:
* img: display picture
* attributes:
* src: specify the location of the picture

 	        相对路径
 	            * 以.开头的路径
 	                * ./：代表当前目录  ./image/1.jpg
 	                * ../:代表上一级目录

List label

List tags:
* Ordered list:
* ol:
* li:
* Unordered list:
* ul:
* li:

Link label

Link label:
* a: Define a hyperlink
* Attributes:
* href: specify the URL (Uniform Resource Locator) to access the resource
* target: specify the way to open the resource
* _self: default value, open on the current page
* _blank: blank Page opens

div and span

div and span: used
with CSS
* div: each div occupies a whole line. Block-level tags
* span: text information is displayed in one line, inline tags are inline tags

Semantic label

In order to improve the readability of the program, html5 provides some tags.
header header
footer footer

Form label

table: define the table
* width: width
* border: border
* cellpadding: define the distance
between the content and the cell * cellspacing: define the distance between the cells. If it is specified as 0, the cell lines will merge into one,
* bgcolor: background color
* align: alignment
* tr: definition row
* bgcolor: background color
* align: alignment
* td: definition cell
* control station position A cell, horizontal or column
* colspan: merge column
* rowspan: merge row
* th: define header cell
* The following function is to make html more readable. It has a control effect on the writing and display position of the table
*: table title
*: indicates the head part of the
table*: indicates the body part of the
table*: indicates the foot part of the table

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>天道</title>
</head>
<body>
<header>
<!--注释-->
<!--文本-->
<h1>第一章</h1>
<!--width控制长度，size控制大小-->
<p><font color="red" size="5" face="宋体">得道多助失道寡助</font><br/>
<center>天地之道&reg;毫末未逃</center>
</p>
</header>
<br>
&reg;
<hr color="#181818" width="50%" size="70  align="left" />
<!--
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
有一些特殊字符需要注意,显示
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-->
<!--图片-->
<img src="./底稿.jpg" align="right" alt="底稿" width="30" hight="30"/>
<!--列表-->
<ol type="I" start="I">
    <li>1</li>
    <li>2</li>
</ol>
<!--square--><!--circle-->
<ul type="disc">
    <li>1</li>
    <li>2</li>
</ul>
<!--超链接-->
<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com" target="_self">百度-本页</a>
<a href="https://www.baidu.com" target="_blank">百度-另一页</a>
<!--邮箱-->
<a href="mailto:[email protected]">邮箱</a>
<!--center已经失效了，年久-->
<a href="https://www.baidu.com"><img src="./底稿.jpg" align="center" alt="底稿" width="30" hight="30"/></a>
<!--使用表格,css不再使用-->
<table width="20" border="10" cellpadding="10" cellspacing="0" bgcolor="#8a2be2" align="left">
    <thead>
    <caption>表格</caption>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <!--表格脚即使放在这里也是最后一个显示。-->
    <tfoot>
    <tr>
        <td colspan="2">5</td>
        <td>5</td>
        <td>5</td>
    </tr>
    </tfoot>
    <tbody>
        <tr bgcolor="blue" align="left">
            <td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
        <tr>
            <td colspan="1">4</td>
            <td>4</td>
            <td>4</td>
        </tr>
    </tbody>

</table>
<footer>
<!--块标签-->
<div>div</div>
<span>span</span>
</footer>
</body>
</html>

Article Directory

HTML-text writing

Picture label

List label

Link label

div and span

Semantic label

Form label

Guess you like