HTML learning summary
1. Concept:
Hyper Text Markup Language Hypertext Markup Language
1. Hypertext: Not only text, but combining labels and other information. Hypertext is a web-like text that uses hyperlinks to organize text information in various spaces.
2. Markup Language: It
is a computer text encoding that combines text and other information related to the text to show the details of the document structure and data processing. Other information related to the text (including the structure and presentation information of the text, etc.) is combined with the original text, but is marked with a mark.
2. Getting started:
Syntax:
1. The suffix of the html document is .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. Attributes are composed of key-value pairs. Values need to be quoted (both single and double).
5. HTML tags are not case sensitive, but lowercase is recommended.
* 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
3. Label:
-
File tag: the most basic tag that constitutes html
* html: the root tag of the html document
* head: the head tag. Used to specify some attributes of the html document. Introduce external resources
* title: title tag.
* body: body tag
*: the document is defined in html5 as an html document
2. Text tag: tag related to text
* Note:
* <h1> to <h6>: title tag
* h1~h6: font size gradually decreases
* < p>: Paragraph tag
* <br>: Line break tag
* <hr>: Display a horizontal line
* Attributes:
* color: color
* width: width
* size: height
* align: alignment
* center: centered
* left: left aligned
* right: right alignment
* <b>: font bold
* <i>: font italic
* <font>: font tag
* <center>: text centered
* attributes:
* color: color
* size: size
* face: font
* Attribute definition:
* color:
1. English words: red, green, blue
2. rgb (value 1, value 2, value 3): value range: 0~255 such as rgb(0,0,255)
3. # value1 value2 value3 : value range: between 00~FF. Such as: #FF00FF
* width:
1. Value: width='20', the unit of the value, the default is px (pixel)
2. Value %: the ratio of the proportion to the parent element
3. Image tag:
* img: display image
* Attribute:
* src: Specify the location of the picture- Code:
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/> <!-- 相对路径 * 以.开头的路径 * ./：代表当前目录 ./image/1.jpg * ../:代表上一级目录 --> <img src="./image/jiangwai_1.jpg"> <img src="../image/jiangwai_1.jpg"> -
List tags:
* Ordered list:
* ol:
* li:
* Unordered list:
* ul:
* li: -
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-
Code:
\<!--超链接 a--> <a href="http://www.itcast.cn">点我</a> <br> <a href="http://www.itcast.cn" target="_self">点我</a> <br> <a href="http://www.itcast.cn" target="_blank">点我</a> <br> <a href="./5_列表标签.html">列表标签</a><br> <a href="mailto:[email protected]">联系我们</a> <br> <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>
-
-
div and span:
div: each div occupies a whole line. Block-level tag
span: text information is displayed on one line, inline tags are inline tags -
Semantic tags: In order to improve the readability of the program, html5 provides some tags.
1. <header>: header
2. <footer>: footer -
Table tags:
* table: define the table
* width: width
* border: border
* cellpadding: define the distance between content and cells
* cellspacing: define the distance between cells. If it is specified as 0, the cell lines will merge into one,
* bgcolor: background color
* align: alignment
* tr: define row
* bgcolor: background color
* align: alignment
* td: define cell
* colspan: merge column
* rowspan: merge rows
* th: define table header cell
* <caption>: table title
* <thead>: indicate the head part of the table
*<tbody>: indicate the body part of the table
* <tfoot>: indicate the foot part of the table