All HTML elements reference table
1. Elements
1. Element basis
Element Element = start tag (attribute Attribute: 属性名="属性值") + content + end tag
The tag is not case-sensitive
Empty element: element without content, such as img element
2. Block-level elements and inline elements
- A block-level element is displayed as a block on the page - it will appear on a new line relative to the content before it, and the content after it will also be squeezed to the next line. Block-level elements are usually used to display structured content on the page, such as paragraphs, lists, navigation menus, footers, and so on. A block-level element displayed in the form of a block will not be nested in an inline element, but can be nested in other block-level elements.
- Inline elements usually appear within block-level elements and surround a small portion of document content, rather than an entire paragraph or set of content. An inline element does not cause text to wrap: it usually occurs between a bunch of text such as a hyperlink element or an emphasized element .
3. Properties
Boolean attributes can have no value, such as<input disabled>
4. Special characters
In HTML, the characters <, >,",' and & are special characters, and if they must be represented, they need to be replaced with special equivalent characters
5. Notes
<!-- 需要被注释的内容 -->
6. <head>Medium attributes
1) CSS file
This element is often located at the head of the document (guess what?). stylesheet table This is the style sheet of the document, href contains the file path. It
<link rel="stylesheet" href="my-css-file.css">
can also be placed in the tag <head>under the tag <style>, and the format is exactly the same as in .css.
The style style can also be used as a tag attribute:<h1 style="color:blue; text-align:center">
2) JavaScript files
It is not necessary to put it at the head of the document, it is better to put it at the end (before) of the document. put the script in
3）<title>
Describe html web page attributes
3) Metadata<meta>
Metadata: data describing data
character encoding/author/page description
4) Page icon<link>
7. Labels without special semantics
1) <span>and<div>
It can be used to group elements to achieve a certain style intent (by using the class or Id attribute), or these elements have a common attribute, such as lang. It should only be used when there are no other suitable semantic elements. The difference is that spanit is an inline element and diva block element
8. Text label
1) hyperlink<a>
Attributes:
- href: Absolute URL and relative URL can be placed, and the use of relative URL and relative path is actually the same
- mailto:…@…com: send mail
- title: Prompt when hovering over the hyperlink
2) superscript <sup>subscript<sub>
3) Header<header>
If it is <body>a child element, it is the header. If it is a child element of <article>or <section>, then it is a header specific to these parts
4) Navigation bar<nav>
5) main content<main>
Examples include <article>and <aside>
<main>store content unique to each page. It can only be used once per page <main>and is located directly in .
6) Sidebar<aside>
7) Footer<foooter>
8) Newline<br>
Empty elements, no closing tags are required, placed at the end of a line
8) Horizontal dividing line<hr>
empty element
9) Form
All content is <table>surrounded by tags
<caption>: placed under the table tag, it is a description of the table. There is no need
<td>: table data describes the data of a cell
<tr>: table row contains all the data of a row
<th>: table header title, which can be <td>used instead
Tags for styles:
colgroup: Contains col tags
<col>: Define the style attributes of each column in each tag: span="3": Add the same style for 3 columns
<table>
<colgroup>
<col>
<col style="background-color: yellow">
</colgroup>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
</table>
<thead>: instead <tr>of the title row, put it in the head, if there is, put it below
<tfoot>: instead <tr>of the footer row, it can be placed at the bottom of the table or under the element
<tbody>: instead of <tr>the content row, it can be placed below or below below
Attributes:
- colspan="2": occupy multiple columns
- rowspan="2": occupy multiple lines
Table nesting: just place the complete <table>one where it should be
10) Form
Also includes the use of <input>, <select>etc.
<!-- form 表单主体 | method 表单的 HTTP 请求方法 GET/POST | action 接收请求路径 -->
<form method="post" action="index.php" >
<!-- 表单控件 -->
<input type="text" /> <!-- 文本框 -->
<input type="password" /> <!-- 密码框 -->
<input type="hidden" /> <!-- 隐藏框 -->
<input type="number" /> <!-- 数字框 -->
<input type="date" /> <!-- 日期控件 -->
<!-- 多选框 | 相同 name 为一组 -->
牛奶 <input type="checkbox" name="food" /> 面包<input type="checkbox" name="food" />
<!-- 单选框 | 相同 name 为一组 -->
男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" />
<!-- 多行文本框 | cols 宽 rows 高 -->
<textarea rows="2" cols="20"></textarea>
<!-- 选择框 -->
<select name="num">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<!-- 上传文件 | accept 文件类型限制 -->
<input type="file" accept="image/gif, image/jpeg, image/png" >
<!-- 范围控件 | min max 范围值 -->
<input type="range" min="1" max="100" />
<!-- 颜色控件 -->
<input type="color" />
<!-- 表单提交 -->
<input type="submit" value="提交" />
<!-- 表单重置 -->
<input type="reset" value="重置" />
<!-- 普通按钮 -->
<button type="button">按钮</button>
</form>
11) Progress bar
<progress>:: <progress value="30" max="100"></progress>
<meter>More customizable than progress. The value of value is measured according to the 4 scale levels of min low high max, and optimum is used to mark the display color corresponding to each level.<meter value="100" min="0" low="100" high="200" max="300" optimum="200"></meter>
9. Multimedia tab
1) picture<img>
Empty element,
attributes:
- src
- alt: When the picture cannot be displayed, display the text description of the picture
- title: Hover tip
- width
- height