html
- 1. HTML5
1. HTML5
1.1. Understand HTML structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
最简单的html页面
</body>
</html>
html page:
<!DOCTYPE>It is not an HTML tag, it is a document type declaration tag. This code means: The current page uses the HTML5 version to display the web page
- Declarations are placed at the very front of the document, before tags.
- Not an HTML tag, it's a doctype declaration tag.
langLanguage type, used to define the language displayed in the current document.
- en defines the language as English
- zh-CN defines the language as Chinese
<meta charset=" UTF-8" />Character set (Character set) is a collection of multiple characters. So that the computer can recognize and store various characters.
The above syntax is the code that must be written, otherwise it may cause garbled characters. In general, use "UTF-8" encoding uniformly, and try to
write as standard "UTF-8" uniformly instead of "utf8" or "UTF8".
1.2, h1 - h6 (heading tags)
Used as a title, in descending order of importance.
Features:
- The text with the title will become bold, and the font size will increase in turn.
- A title occupies a single line.
Code example:
1.3, p (paragraph and newline tags)
<p>Tags are used to define paragraphs, which can divide the entire web page into several paragraphs.
Features:
- Text within a paragraph is automatically wrapped according to the size of the browser window.
- There is space between paragraphs and paragraphs.
Code example:
1.4, br newline label
<br />Force a line break.
Features:
<br />is a single label.<br />Tabs simply start a new line, unlike paragraphs, where some vertical spacing is inserted between them.
Code example: two newlines
1.5, text formatting
In a web page, it is sometimes necessary to set bold , italic , or underlined effects for the text. At this time, it is necessary to use the text formatting tags in HTML to display the text in a special way.
Label semantics: highlight the importance, more important than ordinary text.
| Semantics | Label |
|---|---|
| bold | <strong><strong/> |
| tilt | <em><em/> |
| strikethrough | <del><del/> |
| underline | <ins><ins/> |
1.6, div and span tags
<div>and <span>have no semantics, they are just a box for content.
Features:
<div>Labels are used for layout, but now only one<div>big box can be placed in a line<span>Labels are used for layout, and there can be multiple<span>small boxes on a line
1.7, img image tag
<img>Tags are used to define images in HTML pages.
<img src="图像URL" />
Attributes:
| Attributes | attribute value | illustrate |
|---|---|---|
| str | image path | required attributes |
| alt | text | Replacement text. Image cannot display text |
| title | text | Prompt text. When the mouse is placed on the image, the displayed text |
| width | pixel | set the width of the image |
| height | pixel | set the height of the image |
| border | pixel | Set the border thickness of the image |
Code example:
relative path vs absolute path
相对路径: The directory path established based on the location of the referenced file.
绝对路径: Refers to the absolute location under the directory, directly to the target location, usually the path starting from the drive letter.
For example, "D:\web\img\logo.gif" or the full web address "http://www.itcast.cn/images/logo.gif".
1.8, a hyperlink label
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
| Attributes | effect |
|---|---|
| href | The url address used to specify the link target, (required attribute) When the href attribute is applied to the tag, it has the function of a hyperlink |
| target | It is used to specify how to open the link page, where _self is the default value, and _blank is the way to open in a new window. |
Link Category:
- The opening methods of the a label target are as follows:
_blank: open a new window.
_parent: Open the link in the parent window.
_self: default, the current page jumps.
_top: Open the link in the current form and replace the entire current form (frame page). - External link: such as < a href="http://www.baidu.com "> Baidu.
- Internal links: Interlinks between internal pages of the website. Direct links to internal page names are sufficient, for example < a href="index.html"> home page.
- Empty link: < a href="#"> homepage if no link target is determined at that time.
- Download link: If the address in the href is a file or compressed package, the file will be downloaded.
- Links to webpage elements: Hyperlinks can be added to various webpage elements in webpages, such as text, images, tables, audio, video, etc.
- Anchor link: Click on the link to quickly navigate to a certain position on the page.
- In the href attribute of the link text, set the attribute value in the form of #name, such as
<a href="#two"> 第2集 </a> - Find the target location tag, and add an id attribute = the name just now, such as:
<h3 id="two">第2集介绍</h3>
- In the href attribute of the link text, set the attribute value in the form of #name, such as
Code example:
1.9, table table label
1.9.1, form label
<table align="center" border="1">
<!-- 表头-->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<!-- 数据-->
<tr>
<td>何某某</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>某某何</td>
<td>23</td>
<td>女</td>
</tr>
</table>
<table> </table>is the label used to define the table.<tr> </tr>Labels are used to define rows in a table and must be nested within<table> </table>labels.<td> </td>Used to define the cells in the table, must be nested in<tr></tr>the label.- The letters td refer to table data, that is, the contents of a data cell.
<th>The tag indicates the header part of the HTML table (abbreviation for table head). Generally, the header cell is located in the first row or column of the table, and the text content in the header cell is displayed in bold and centered.
Table attributes:
The attributes of table tags are not commonly used in our actual development, and we will set them later through CSS.
1.9.2, table structure label
Because the table may be very long, in order to better express the semantics of the table, the table can be divided into two parts: the table header and the table body.
In the table tag, use: <thead>标签 表格的头部区域、<tbody>标签 表格的主体区域. This can better distinguish the table structure
Code example:
<table align="center" border="1">
<!-- 表头-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<!-- 数据-->
<tbody>
<tr>
<td>何某某</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>某某何</td>
<td>23</td>
<td>女</td>
</tr>
</tbody>
<thead></thead>: Used to define the header of the table. Inside must have a label. Usually it is on the first row.<tbody></tbody>: It is used to define the body of the table, mainly used to put the data ontology.- The above tags are all placed
<table></table>in tags.
1.9.3. Merge cells
How to merge cells:
- Merge across rows: rowspan="number of merged cells", the uppermost cell is the target cell, write the merge code
- Merge across columns: colspan="number of merged cells", the leftmost cell is the target cell, write the merge code
Code example:<td rowspan="2">何某某</td>
1.10, list
1.10.1, ul unordered list
<ul>Tags represent an unordered list of items in an HTML page. Generally, list items are presented with bullets, and list items use <li>tags to define an unordered list. The basic syntax format is as follows:
- There is no order level between the various list items of the unordered list, and they are parallel.
<ul></ul>can only be nested<li></li>, and it is not allowed to directly<ul></ul>enter other tags or text in the tag.<li> 与 </li>Between is equivalent to a container that can accommodate all elements.- Unordered lists will have their own style properties, but in practice, we will use CSS to set them.
1.10.2, ol ordered list
An ordered list is a list with a sorting order, and each list item will be defined in a certain order.
In HTML tags, <ol> tags are used to define ordered lists, the ordering of lists is indicated by numbers, and <li>tags are used to define list items.
The basic syntax format of an ordered list is as follows:
<ol></ol>can only be nested<li></li>, and it is not allowed to directly<ol></ol>enter other labels or text in the label.<li>Between and</li>is equivalent to a container that can accommodate all elements.- The ordered list will have its own style attribute, but in actual use, we will use CSS to set it.
1.10.3, custom list
Custom lists are often used to explain and describe terms or nouns, and there are no bullets before the list items of the definition list.
The usage scenario is as follows
code example:
<dl></dl>Can only contain<dt>and<dd>.<dt>There is no limit to the number of sums, and<dd>often one<dt>corresponds to multiple<dd>.
1.11. Form label
1.11.1, form form field
A form field is an area that contains form elements.
In HTML tags, <form>tags are used to define form fields to collect and transmit user information.
<form>Will submit the form element information within its range to the server
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
Common properties:
| Attributes | attribute value | effect |
|---|---|---|
| action | url address | Used to specify the url address of the server program that receives and processes form data |
| method | get / post | It is used to set the submission method of the form data, and its value is get or post |
| name | name | Used to specify the name of the form to distinguish multiple form fields on the same page |
1.11.2, input form element
In <input>the tag, a type attribute is included. According to different type attribute values, the input field has many forms (it can be a text field, a check box, a masked text control, a radio button, a button, etc.).
<input type="属性值" />
The attribute values of the type attribute and their descriptions are as follows:
| attribute value | describe |
|---|---|
| button | Define a clickable button |
| checkbox | Define checkboxes |
| file | Define input fields and "Browse" button for file upload |
| hidden | Define hidden input fields |
| image | Defines a button in the form of an image |
| password | Defines a password field in which characters are masked |
| radio | Define radio buttons |
| reset | Defines the reset button. The reset button clears all data in the form |
| submit | Define the submit button. The submit button sends the form data to the server |
| text | Defines a single-line input field where the user can enter text. The default width is 20 characters |
| color | Pick a color from the color picker |
| date | Define the date date control, you can choose the year, month and day |
| datetime-local | 定义 datetime 日期控件，可选择年月日时分秒 |
| time | 定义用于输入时间的控件，可选时分秒 |
| 定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证） | |
| number | 定义用于输入数字的字段（您可以设置可接受数字的限制） |
| range | 定义用于精确值不重要的输入数字的控件（比如 slider 控件） |
除 type 属性外，标签还有其他很多属性，其常用属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
- name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
代码示例：
1.11.3、label 标签
<label> 标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同
代码示例：
1.11.4、select表单元素
使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
代码示例：
- 中至少包含一对 。
- 在 中定义 selected =“ selected " 时，当前项即为默认选中项。
1.11.5、textarea 表单元素
Usage scenario: When the user enters a lot of content, we can't use the text box form, and we can use <textarea>the label at this time.
In form elements, <textarea>labels are controls used to define multiline text inputs.
You can enter more text by using a multi-line text input control, which is commonly used in message boards and comments.
<textarea rows="3" cols="20">
文本内容
</textarea>
- Labels make it easy to create multi-line text input fields.
- cols = "the number of characters in each line", rows = "the number of displayed lines", we will not use it in actual development, and use CSS to change the size.
1.12, comments and special characters
Comments in html: <!--”开头，以“ -->end with .
<!-- 注释语句 --> Shortcut key: ctrl + /
Special characters:
