Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/Curry_On/article/details/102732808

html study notes

本文章根据B站pink老师的视频内容进行整理，供复习参考

本文内容：
一、Web标准
	1、为什么需要Web标准
	2、Web标准的构成
二、HTML标签
	1、语法规范
	2、HTML基本结构标签
	3、HTML常用标签
		3.1 标签语义
		3.2 标题标签
		3.3 段落和换行标签
		3.4 文本格式化标签
		3.5 div和span标签
		3.6 图像标签img和路径
		3.7 超链接标签
		3.8 表格标签
		3.9 列表标签
			3.9.1 无序列表
			3.9.2 有序列表
			3.9.3 自定义列表
		3.10 表单标签
			input 表单标签
			label 标签
			select 下拉列表标签
			textarea表单元素
	三、HTML中的注释和特殊字符
	四、查阅文档

A, Web standards

1. Why Web standards?

Different browsers, they will display the page layout, or slightly different, so they need a set of standards to regulate.

2, Web standards constitute

Including structure (Structure), performance (Presentation) and behavior (Behavior) three.

standard	Explanation
structure	Structure for page elements to sort and classify the main stage is to learn HTML
which performed	Typography, color, size and other exterior style performance to set page elements, mainly referring to CSS
behavior	Write a definition refers to behavior and interactive web model at this stage is mainly to learn JavaScript

Web standards presented best experience program: Structure, Style, phase separation behavior.

Two, HTML tags

1, syntax specification

1.1 Basic syntax overview

HTML tags are keywords surrounded by angle brackets, such as:<html>
HTML is usually in pairs, such as: <html></html>referred to as ditag
Some special is a single label, such as:<br />

2, HTML tags basic structure

Label name	definition	Explanation
`<html></html>`	HTML tags	Root tag
`<head></head>`	The head of the document	Note label in the head, we have to set up a title tag
`<title></title>`	The title of the document	Make the page have their own page title
`<body></body>`	The main body of the document	All the contents of the document that contains the page content are basically placed inside the body

<!DOCTYPE html>   //文档类型声明标签，当前页面是HTML5版本，必须位于第一行，它不是THML标签
<html lang="en">  //lang语言种类，zh-CN为中文文档
<head>
    <meta charset="UTF-8">  //字符集 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3, HTML tags used

3.1 semantic tags

Simply understood as meaning the label, the label is used to do? In the right place with the appropriate label, you can make the page structure more clearly.

3.2 Title Tag

HTML provides six levels of heading tags, that is, <h1> ~ <h6>

<h1>这是一级标题</h1>

Paragraph 3.3 and wrap labels

Tag <p>is used to define segments

<p>我是一个段落标签</p>

<br /> 用于强制换行

3.4 text formatting tags

Semantic	label	Explanation
Bold	`<strong></strong>`or`<b></b>`	Recommended `<strong>`, semantic stronger
tilt	`<em></em>`or`<i></i>`	Recommended `<em>`, semantic stronger
Strikethrough	`<del></del>`or`<s></s>`	Recommended `<del>`, semantic stronger
Underline	`<ins></ins>`or`<u></u>`	Recommended `<ins>`, semantic stronger

3.5 div and span tags

divAnd spanlabel is no semantic, which is a box, for containing content.

<div>这是头部</div>

<span>今天天气真好</span>

div is a division of an abbreviation representing the partition, division. It means span span span.

Feature

div tags for layout, but now his party can only put a div, can be understood as it is on a separate line in the big box.
span is also used to layout, but there may be a plurality of line span. It can be understood as a small box.

3.6 img tag and path

1, it is a single label, image abbreviations.

<img src = "图像的URL" />

label image src attribute is required for the path and file name of the image file.

Other attribute of the img tag:

Attributes	Property Value	Explanation
`src`	Picture Path	Required attributes
`alt`	text	Replace text, text image can not be displayed
`title`	text	Prompt text, mouse over the picture display text
`width`	Pixels	Image width setting
`height`	Pixels	Set the height of the image
`border`	Pixels	Set the image border thickness

Precautions image tag attributes:

Property must be written on the back label name.
Regardless of the order between the properties, tag names and attributes, to be separated by a space between the property and the property.
Take the form of attribute value pairs: attribute name = "attribute value."

2, path

Relative path: the path to the directory where the file reference position as a reference base established.

Simply put, the picture relative to the HTML page.
Absolute path

It refers to the absolute path to the directory, directly to the target location, usually the path from the letter began.

E.g:"D:\***\123.jpg"

Relative path classification	symbol	Explanation
With a path		The image files are located in the same level as the HTML file
Under a Path	`/`	The image files are located in an HTML file
On a path	`../`	The image file is located on an HTML file

3.7 Hyperlink label

<a>Tag defines a hyperlink, the role is a link from one page to another.

Syntax

<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>

Attributes	effect
`href`(Required attributes)	URL address of the link destination
`target`	For pop specify the target page, _self to open in a new window to the default value _blank

Link Categories
1. External link: address must http://begin with.
2. Internal links: reciprocal links between internal pages of the site, a direct link to an internal page name.
3. Without determining the link target: Empty Links
```
<a href = "#">还没想好链接到哪儿</a>
```
4. Download Link: href If the address is inside a file or archive, click on the file will download.
5. Page elements link: various page elements such as text, images, tables, audio and so can add hyperlinks.
```
<a href = "http://www.baidu.com"><img src = "img.jpg"></a>
```
6. Anchor Links: Click the link to quickly navigate to a location on the page.
  - Settings link href attribute text to # Name form, such as:
```
<a href ="#job"> 任职经历 </a>
```
  - Find the target location tag, and add an id attribute name = named above, such as:
```
<h3 id = "job">
    任职经历简介
</h3>
```

Table 3.8 Label

The main role of the table

For display, data display, improved readability of the data.
The basic syntax table
```
<table>
    <tr>
        <td>这是一个单元格</td>
        ...
    </tr>
    ...
</table>
```
1. table is used to define a table.
2. tr for defining row in the table, the table must be nested.
3. td a cell definition table, you must be nested in the tr.
4. td refers to a table data table data, i.e., data content in the cell.
Tag header cell

Usually the first row or the first column of the table is located, inside the text will be centered bold.

th tag indicates the header portion of the HTML form (table head)
```
<table>
    <tr>
        <th>姓名</th>
        ...
    </tr>
    ...
</table>
```
Table Properties

Are not often used in actual development, later set by CSS.

Property name	Property Value	description
`align`	left 、center 、right	Table predetermined alignment relative to the surrounding elements
`border`	1 or ""	Whether the provisions of table cells have a border, the default value is "" no border
`cellpadding`	Pixel values	A predetermined gap distance between the cell content and the frame, the default pixel
`cellspacing`	Pixel values	A predetermined gap between the cells, the default pixel 2
`width`	Pixels or percentage	The width of the prescribed form

Table structure tags

When the table is very long, in order to better represent the semantics of the cell, the table may be divided into a table body and the head forms two parts. Head region represented by thead, tbody represents the body region.

Merge Cells

In special cases, the plurality of cells are combined into a cell
1. Merged cell way
  - Interbank combined: rowspan = "number of the merged cell."
  - Cross merged column: colspan = "number of the merged cell."
2. Target cell
  - Interbank: uppermost side for the target cell
  - Across columns: the left-most for the target cell
3. Step merged cell
  1. Determine the interbank or across columns
  2. Find the target cell, write: merger = number of merged cells, such as:
```
<td colspan = "3"></td>
```
  1. Remove the extra cell

3.9 List tab

Form is used to display data lists are used to the layout, because it is the biggest feature is neat and orderly. Divided unordered lists, ordered lists, and custom lists.

3.9.1 unordered list

（做导航栏什么的一般用无序列表）

<ul></ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，列表项用<li>标签定义。
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

注意：

无序列表各个表项之间没有顺序级别之分。
<ul></ul> 中只能嵌套 <li></li>，但是 <li></li>中可以容纳所有元素。
无序列表会带有自己的样式属性，但在实际使用时，通过CSS来设置。

3.9.2 有序列表

<ol>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    ...
</ol>

注意事项和无序列表基本一致，在实际开发中使用并不多。

3.9.3 自定义列表

使用场景：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>
    <dt>联系方式</dt>
    <dd>微信</dd>
    <dd>QQ</dd>
</dl>

注意：

<dl></dl>里面只能包含 <dt></dt> 和 <dd></dd>
dt 和 dd 没有个数限制

3.10 表单标签

表单的目的是为了收集用户信息。

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

表单域
包含表单元素的区域，在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会把它范围内的表单元素提交给服务器。

<form action = "url地址" method = "提交方式" name = "表单名称">
    各种表单元素控件
</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域。

表单控件（表单元素）

`<input>`表单元素

type属性值：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	复选框
file	定义输入字段和"浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	图像形式的提交按钮
password	密码字段，该字段中的字符被掩码
radio	单选按钮
reset	重置按钮，会清除表单中的所有数据
submit	提交按钮，会把表单数据发送到服务器
text	单行的输入字段，可在其中输入文本，默认宽度为20个字符

除 type 属性外，<input>标签还有其他很多属性，常用属性如下：

属性	属性值	描述
name	自定义	定义input元素的名称
value	自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

注意：

name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。
name 表单元素的名字，要求 单选按钮和复选框都要有想同的 name 值

`<label>`标签

为 input 元素定义标签，用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到或者选择到对应的表单元素上，用来增加用户体验。

<label for = "sex">男</label>
<input type = "radio" name = "sex" id = "sex" />

核心：<label>标签的 for 属性要与相关元素的 id 属性相同。

`<select>`下拉表单元素

**使用场景：**有多个选择项并且想要节约页面空间。

<form>
籍贯：
<select name = "jiguan">
    <option>广东</option>
    <option selected = "selected">湖南</option>
    <option>浙江</option>
    ...
</select>
</form>

注意：

<select>中至少包含一对<option>
在<option>中定义 selected = “selected” 时，选项变为默认选项

`<textarea>`表单元素

**使用场景：**当输入内容较多的情况下，可以使用<textarea>标签，常见于留言板、评论。

<textarea rows = "3" cols = "20" name = "pinglun">
    文本内容
</textarea>

通过<textarea>标签可以轻松地创建多行文本输入框
cols = “每行中的字符数” ，rows = “显示的行数”，但在实际开发中不会使用，都是用CSS来改变大小

三、HTML中的注释和特殊字符

注释

<!--注释语句-->

特殊字符

记住三个，其余的自行查阅：

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`

四、查阅文档

www.w3school.com.cn
https://developer.mozilla.org/zh-CN

HTML study notes | using common labels and notes (after publishing)

html study notes

A, Web standards

1. Why Web standards?

2, Web standards constitute

Two, HTML tags

1, syntax specification

1.1 Basic syntax overview

2, HTML tags basic structure

3, HTML tags used

3.1 semantic tags

3.2 Title Tag

Paragraph 3.3 and wrap labels

3.4 text formatting tags

3.5 div and span tags

3.6 img tag and path

3.7 Hyperlink label

Table 3.8 Label

3.9 List tab

3.9.1 unordered list

3.9.2 有序列表

3.9.3 自定义列表

3.10 表单标签

`<input>`表单元素

`<label>`标签

`<select>`下拉表单元素

`<textarea>`表单元素

三、HTML中的注释和特殊字符

四、查阅文档

Guess you like

HTML study notes | using common labels and notes (after publishing)

html study notes

A, Web standards

1. Why Web standards?

2, Web standards constitute

Two, HTML tags

1, syntax specification

1.1 Basic syntax overview

2, HTML tags basic structure

3, HTML tags used

3.1 semantic tags

3.2 Title Tag

Paragraph 3.3 and wrap labels

3.4 text formatting tags

3.5 div and span tags

3.6 img tag and path

3.7 Hyperlink label

Table 3.8 Label

3.9 List tab

3.9.1 unordered list

3.9.2 有序列表

3.9.3 自定义列表

3.10 表单标签

<input>表单元素

<label>标签

<select>下拉表单元素

<textarea>表单元素

三、HTML中的注释和特殊字符

四、查阅文档

Guess you like

`<input>`表单元素

`<label>`标签

`<select>`下拉表单元素

`<textarea>`表单元素