HTML重点总结

HTML基础

1. 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

2.段落

HTML 段落是通过标签<p>来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

3.折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 < br > 标签：

<p>这个<br>段落<br>演示了分行的效果</p>

4.水平线

<hr> 标签在 HTML 页面中创建水平线。

5.注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

6.列表

6.1无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用<ul>标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

属性	值	描述
	square	实心方块
type	circle	空心圆
	disc	实心圆

6.2有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于<ol>标签。每个列表项始于<li>标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

属性	值	描述
	1	数字序号
	a	小写字母
type	A	大写字母
	i	小写罗马字母
	I	大写罗马字母

7.div和span标签

7.1div 标签

<div>是一个块级元素，通常与CSS配合使用，用于页面布局

<div>标签可以把文档分割为独立的，不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div>是一个块级元素。这意味着它的内容自动地开始新的一行。实际上，换行是<div>固有的唯一格式表现。可以通过<div>的class或id应用和外的样式

<div>content</div>

常用属性：

属性	值	描述
align	left、right、center	规定div元素中内容的对齐方式，以后可以用样式取代它

7.2span 标签

<span>被用来组合文档中的行内元素，审判没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<span>content</span>

8 格式化标签

8.1font

规定文本的字体颜色、字体尺寸、字体样式

常见属性：color（颜色名、十六进制，rgb）

​ size（字体大小）

​ face（字体风格）

8.2pre

定义预格式化的文本。被包围在pre的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

8.3文本标签

<b>加粗文本</b> 或者<strong>加粗文本</strong>
<i>斜体文本</i>
<u>下划线<u/>
<del>删除线<del/>
<code>电脑自动输出</code>
<sub> 下标</sub> 和 <sup> 上标</sup>

9.超链接a标签

HTML 链接是通过标签<a>来定义的。

HTML 链接由<a>标签定义。链接的地址在 href 属性中指定

使用 target 属性，

常用属性

​ href： 必须属性，链接的地址在 href 属性中指定

target ：你可以定义被链接的文档在何处显示。

​ _self 表示当前页面（默认）

​ _blank 表示打开新页面进行跳转

9.1a标签实现锚点

​ 利用a标签的name属性：

<a name="top"></a>

​ 利用一般标签的id属性：div id="", a id=""等；

<div id="top"> </div>、<a id="top"><a/>

​ 锚点定位，#别忘记了

<a href="#top">返回首部<a/>

10. 图像标签 img

在 HTML 中，图像由<img> 标签定义。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

img标签，是一个行内标签，不会自动换行

<img src="" alt="" />

必须属性

属性	值	描述
alt	text	规定图像的替代文本，一般在图片无法正常显示占位的文字。
src	URL	规定显示图像的URL

常用属性

属性	值	描述
align	top、bottom、middle、left、right	规定如何根据周围的文本来排列图像
border	pixels	定义图像周围的边框
height	pixels、%	定义图像的高度
width	pixels、%	定义图像的宽度
title	文本	当鼠标在图片上时显示的文字

11.表格

<tab></tab>标签定义HTML表格
<tr></tr>标签定义表格的行，tr元素包含一个或者多个td\th
<td></td>标签定义HTML表格中的标准单元格
<th></th>标签定义表格内的表头单元格。th元素内部的文本通常会呈现为剧中的粗体文本，而td元素内的文本通常是左对齐的普通文本

简单的HTML表格table元素以及一个或多个tr、hd或td元素组成。

理解：table相当于表格的外框，tr相当于行，td为一个单元格，th为有标题作用的单元格，同时th中的内容有加粗效果。

table标签常用属性

属性	值	描述
align	right、left、center	表格对齐方式
border	px	规定表格边框的宽度
width	px、%	规定表格的宽度

table标签中，width:px、%

​ % ：参考的是上一级元素的宽度，如果上一级元素未设置，则参考屏幕宽度

height：表格的高度

tr标签常用属性

属性	值	描述
align	right、left、center	定义表格行的内容对齐方式
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	定义表格的背景颜色，以后用样式取代
valign	top、middle、bottom	规定表格中内容的垂直对齐方式，以后用样式取代

css样式：

​ border-collapse：collapse; 合并表格边框

​ 合并单元格

​ 的colspan和rowspan分别规定单元格横跨的列数和行数

​ 纵向合并：rowspan

​ 横向合并：colspan

12.表单

12.1form标签

表单是一个包含表单元素的区域。

表单使用表单标签 <form> 来设置:

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

注：

• 表单用于向服务器传输数据，form元素是块级元素，其前后会产生折行。
• 表单提交时，必须设置表单元素的name属性值，否则无法获取数据
• 表单需要结合表单元素去使用

常用属性：

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
method	get、post	规定用于发送form-data的HTTP方法
name	Form_name	规定表单的名称
target	_ bank(空白窗口)、_ self(当前窗口) 、_parent_top framename	规定在何处打开action URL（提交数据时打开窗口的方式）

method：表单提交方式：get、post

​ get：默认，主动的获取方式，数据放在url上(浏览器中地址栏的后面)，数据的容量有限，安全性差，有缓存(会将数据保存在浏览器中)

​ post：数据放在请求时体中，数据量理论上没有限制，相对安全，没有缓存。post请求需要服务器的支持

所有标签都有的属性：

• id属性：用来标识元素的唯一性
• name属性：提交数据时的参数名
• stytle属性：设置元素的行内样式（具体样式）
• class属性：设置元素的样式名

12.2input标签

<input>标签用于收集用户信息。

常用属性：

属性	值	描述
alt	text	定义图像输入的替代文本
checked	checked	规定此input元素首次加载时禁用此元素
disabled	diaabled	当input元素加载时禁用此元素
readonly	readonly	规定输入字段为只读
maxlength	number	规定输入的字符串最大长度
value	value	规定input元素的值
type	text password radio checkbox file hidden ibutton submit reset date	规定input元素的类型。文本框、密码框、单选框、复选框、文件域、隐藏域、普通按钮、提交按钮、重置按钮、日期框

注：

1. 单选框需要通过name属性设置为一组，复选框也是一样的
2. 如果是上传文件的表单，则表单需要设置一个属性 enctype="multipart/form-data",提交方式为post请求
3. 没有name属性是无法提交数据的！！！

---

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

浏览器显示如下：

First name:

Last name:

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

---

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

浏览器显示效果如下:

Password:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

---

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

浏览器显示效果如下:

Male

Female

---

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

浏览器显示效果如下:

I have a bike

I have a car

---

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

浏览器显示效果如下:

Username:

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

12.3textarea标签

该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过cols和rows属性来规定text area的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea>content<textarea/>

12.4lable标签

<lable>标签为input元素定义标注（标记）

lable元素不会呈现任何的特殊效果。

lable标签的for属性应当与相关元素的id属性相同，此时点击lable标签会自动为元素聚焦

12.5button标签

input按钮：

​ type="button" 普通按钮

​ type="submit" 提交按钮

​ type="reset" 重置按钮

button按钮：

​ type="button" 普通按钮

​ type="submit"（默认） 提交按钮

​ type="reset" 重置按钮

注：button按钮为双标签，标签之间可以添加内容（文本或标签等）

不给type的话 ：<button>按钮</button>————这个是"submit"（默认提交按钮，而不是普通按钮

12.6select标签

<select>用于定义下拉列表。

<select name="student" >				//下拉框
	<option value ="">小学生</option>	  //下拉框的选项标签
	<option value="">中学生</option>
	<option value="">大学生</option>
</select>

select常用属性

属性	值	描述
disabled	disabled	禁用该下拉框
multiple	multiple	规定可选多个选项
name	name	规定下拉列表的名称
size	number	规定下拉列表中可见选项的数目

option常见属性

属性	值	描述
disabled	disabled	禁用该下拉选项
selected	selected	规定选项（首次显示在列表中）表现为选中状态
value	text	定义送往服务器的选项值

13.HTML常见字符实体

	实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'

虽然 html 不区分大小写，但实体字符对大小写敏感。

13.1标签的分类

​ HTML中标签元素三种不同的类型：块元素，行内元素，行内块元素

块级元素

​ 元素都从新的一行开始，并且其后的元素也另起一行;元素的高度、宽度、行高以及顶和底边距都可以设置；元素宽度在不设置情况下，是它本身父容器的100%（和父元素宽度一致），除非设定一个宽度。

html中常见的块级元素：`

标签	描述
<caption>	定义表格标题。
<div>	定义文档中的节。
<dl>	定义定义列表。
<dt>	定义定义列表中的项目。
<form>	定义供用户输入的 HTML 表单。
<h1> to <h6>	定义 HTML 标题。
<header>	定义 section 或 page 的页眉。
<hr>	定义水平线。
<li>	定义列表的项目。
<ol>	定义有序列表。
<p>	定义段落。
<pre>	定义预格式文本。
<section>	定义 section。
<table>	定义表格。
<td>	定义表格中的单元。
<th>	定义表格中的表头单元格。
<thead>	定义表格中的表头内容。
<time>	定义日期/时间。
<tr>	定义表格中的行。
<ul>	定义无序列表。

行内元素

​ 和其他元素都在一行上；元素的高度、宽度及顶部和底部的边距不可设置；元素的宽度就是它包含的文字或者图片的宽度，不可改变。

html中常见的行内元素：

标签	描述
<a>	定义锚。
<b>	定义粗体字
<br>	定义简单的折行。
<button>	定义按钮 (push button)。
<del>	定义被删除文本。
<i>	定义斜体字。
<img>	定义图像。
<input>	定义输入控件。
<label>	定义 input 元素的标注。
<q>	定义短的引用。
<select>	定义选择列表（下拉列表）。
<span>	定义文档中的节。
<strong>	定义强调文本。
<sub>	定义下标文本。
<sup>	定义上标文本。
<textarea>	定义多行的文本输入控件。

行内块元素

和其他元素都在一行上；元素的高度、宽度、行高以及顶部和底部的边距都可以设置。

img：用于标记网页中的图像 ，有属性src:图片资源路径 ，alt:提示信息 当图片加载失败 ，以指定文本形式代替图片显示

button：按钮

input：输入框，有属性type输入框类型，有属性值（text表示文本输入框，file文件选择器，password密码输入框，email邮箱输入框，number数字输入框，button按钮）。placeholder占位字符，用于提示输入框应该输入的内容。value表示输入框中的内容。name和后台服务器交互时，必须携带name属性，发送请求时的参数名。

单选 type=“radio” 表示一个单选选项处于同一组单选框只能选中一个值，将多个radio的name属性值设置为相同的值

type="checkbox"复选框

label:和input标签绑定到一块使用，有属性for，属性值就是input输入框的id值。checked属性为标签选中状态

select:下拉列表

option:下拉选项

总结：

注:

以上是HTML重点知识的总结，如果文章有任何错误和建议，请各位大佬尽情评论留言！如果这篇文章对你有些许帮助，希望可爱亲切的您点个赞推荐一手，非常感谢啦！最后，感谢各位大佬们看到了这里！愿你韶华不负，青春无悔！