HTML知识点总结

HTML又叫超文本标记语言，是用于在Internet上显示Web页面的主要标记语言。我们平常所看到的网页由HTML组成，然后通过浏览器显示。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。所有的HTML都是纯文本，也就是说HTML语言是不需要编译的，直接通过浏览器解释执行。

超文本的意思是HTML可以通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

我们可以这样理解HTML，其本身就是一个文本文件，只是程序员在文件中添加标记符来告诉浏览器如何显示其中的内容。浏览器按顺序阅读文本文件，然后根据标记符解释和现实其标记的内容。浏览器不会指出书写错误的标记，并且不会停止其解释执行过程，我们只能通过显示效果来分析出错的原因。另外，不同的浏览器对相同的标签可能会有不同的解释。

基本框架

 <!DOCTYPE html>                         <!--指明文档类型为html-->
 <html lang="en">                        <!--根标签，lang="en"说明文字的显示形式是英文-->
 <head>                                  <!--网页的头部-->
     <meta charset="UTF-8">              <!--使用的字符集，也就是编码方式-->
     <title>网页标题</title>               <!--网页的标题,在浏览器上方显示-->
 </head>
 <body>                                   <!--网页的主体，在这里显示元素-->
 </body>
 </html>

HTML字符实体

符号	字符实体
空格
小于号<	<
大于号>	>
和&	&
引号‘’	"
版权©	©
乘号×	×
除号÷	÷

HTML的元素属性

通用属性

属性名称	作用
class	规定元素的类名，元素的类名可以重复
id	规定元素id，元素的id是唯一的，不可以重复
style	设置元素的样式
title	规定元素的额外信息，鼠标悬停在元素上方时会显示

常用属性

属性名称	作用
border	设置元素的边框，包括边框的宽度、类型和颜色
text-align	文本的对齐方式
margin	外边距
padding	内边距
display	显示方式，有black(块)，inline(行)，inline-block(行内块)
font-size	字体大小
overflow	超处元素边界为内容的处理方式
color	文本颜色
background-color	背景颜色

常用的标签

HTML标签是HTML语言中最基本的单位，是HTML最重要的组成部分。HTML标签由尖括号包裹单词构成，与大小写无关的，例如“主体”body跟BODY表示的意思是一样的，但是推荐使用小写。此外标签可以嵌套，但不能交叉嵌套

块级标签

块级标签在排列时不会并排排列，而是独占一行。我们可以设置这种标签的宽高，在不设置宽高的时候其宽度默认占满父元素整行，其高度则由子元素撑开。

块标签：div

块元素是组合HTML元素的主要容器，可以通过设置style来管理它里面的元素。运行下面的代码就可以看出两部分内容的不同了。

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <h3>床前明月光</h3>
 <p>床前明月光，
     疑是地上霜。
     举头望明月，
     低头思故乡。</p>
 
 <div style="color:#00FF00" align="justify">
   <h3>床前明月光</h3>
   <p>床前明月光，
     疑是地上霜。
     举头望明月，
     低头思故乡。</p>
 </div>
 </html>

分段标签：section

与div标签类似，都是容器标签，把页面划分为多个块。

标题标签：h1~h6

标题标签一共有六级，h1到h6标题的字体大小逐渐变小，不过这是可以通过CSS来调整的。标题的前后都会有空行，并且会自动换行。

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

段落标签：p

段落标签用于定义一个段落，浏览器会自动地在段落的前后添加空行，对于不在标签内部的文字将会另起一段显示。段落的行数依赖于浏览器窗口的大小，如果调节浏览器的大小，将会改变段落中的行数。

<p>段落1</p>
 段落2

水平线标签：hr

 <hr />    <!--显示一个水平线-->

换行标签：br

换行标签与段落标签的不同之处在于段落标签会在段落的前后添加空行，而使用换行标签不会有多余的空行，所以不能用段落标签代替换行标签。此外当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格。

 <!--换行标签-->
 床前明月光，<br />
 疑是地上霜。<br />
 举头望明月，<br />
 低头思故乡。<br />

图片标签：img

通过图像标签将一张图片显示在网页中，图像路径可以是本地路径（可以用绝对路径和相对路径），也可以是网络路径（网络上的图像可以右键复制图像地址）。<img>标签的常用属性如下。

属性名称	作用
src	路径属性
alt	图像不显示时的替代文本
title	鼠标悬停时的提示文本
width	图像的宽度
height	图像的高度
border	图像边框的宽度

注意，图像的宽高只设置一个即可，浏览器会进行自动缩放。当我们没有设置宽高时则显示原图像大小。

行标签

行标签多是一些文本标签，不能设置宽高，不独占一行。默认是横向排列，排不下了才开始换行。

span标签

span是文本的容器，用于对文档中的行内元素进行组合。我们可以通过span标签对文本进行精准修改。比如将“html中span标签的详细介绍”中的“span标签”以红色字体显示。

 <body>
 <h3>span标签演示</h3>
 <p>html中<span style="color: red">span标签</span>的详细介绍</p>
 </body>

文本格式化标签

描述	标签
粗体	<b></b>、<strong></strong>
斜体	<i></i>、<em></em>
删除线	<s></s>、<del></del>
下划线	<u></u>、<ins></ins>
上标字	<sup></sup>
下标字	<sub></sub>
预格式文本	<pre></pre>

超链接标签：a

超链接是指从一个网页指向一个目标的连接关系，这个目标可以是网页、图片、文件、应用程序、本页上的某个部分等等。

 <a>对外的显示内容，可以是文字、图片等</a>

文本链接

<a href="https://www.baidu.com/">百度一下</a>

图片链接

 <a href="https://www.baidu.com/"><img src="图片路径" alt="图片不显示" width="200"  border="20" title=“鼠标悬停” /></a>

下载链接

当点击下载链接时会进行下载或者弹出下载请求。

<!-- 方法一： -->
<a href="×××.exe或×××.zip">下载链接</a>
<!-- 以href中的名称为下载文件的名称 -->
<!-- 方法二： -->
<a href="./6.5.20-Release.6139101.exe" download="钉钉">钉钉下载</a>
<!-- 如果href是一个文件则会下载该文件。默认以href中的名称为下载文件的名称，如果downlaod不为空则会在download后加上后缀名，然后以其为下载文件的名称 -->

空链接

<a href="#">空链接</a>

本页面跳转链接

给目标元素一个id，然后创建一个链接，在href中写上“#id名”。这样就创建了一个跳转到目标元素的链接。

<a href="#div">返回底部</a>
<div>这是div</div>
<div>这是div</div>
<div id="div">这是div4234</div>

常用属性

属性名称	作用
href	目标对象的地址
target	目标窗口的弹出方式
download	指定下载文件的名称
rel	指定当前文档与目标url的关系，只有href属性存在时才使用

base标签

base标签是一个与超链接有关的标签，我们可以通过<base>标签设置<a>标签的默认链接地址和新页面的弹出方式。

<head>
	<base href="https://www.baidu.com/" target="_blank" />
</head>
<body>
	<a href="">百度一下</a>
	<p>因为在base中已经给定了百度的网址，所以点击“百度一下”会跳转到百度</p>	
	<p>又因为在base中设置了target="_blank"，所以这里的链接都会以新窗口打开</p>
</body>

多媒体标签

多媒体标签的作用是在网页中添加音频和视频。

音频标签：audio

<!-- 方式一： -->
<audio src="音乐路径" controls></audio>
<!-- 方式二： -->
<audio controls autoplay>
    <source src="音乐路径">
    <source src="音乐路径">
    您的浏览器不支持html音频播放功能
</audio>

常用属性

属性名称	作用
src	播放音频的URL
autoplay	自动播放
controls	显示播放控件
loop	无限循环播放
muted	播放默认为静音

列表标签

列表项标签：li

li标签用于在列表中标记一个列表项。

    <ul>
        <!-- 列表标签-->
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>

无序列表标签：ul

无序列表显示列表项时其前方不会出现数字，而是出现一些符号来显示。默认是实心圆点。<ul>标签里只能放<li>，不能写其他标签。但是我们可以在<li>标签里面可以使用其他标签。例如列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ul type="disc"> 
    <li>实心圆圈</li>
</ul>
<ul type="circle">
    <li>空心圆圈</li>
</ul>
<ul type="square">
    <li>实心方块</li>
</ul>

有序列表标签：ol

有序列表标签默认使用数字进行排列显示。当然，我们可以通过css设置大小写字母列表、大小写罗马字母列表显示，也可以设置其起始序列号。与<ul>标签类似，<li>标签中也是只能放<li>标签，然后在<li>标签里面使用其他标签。

<ol type="A">
    <li>字母列表A.B.C.D...</li>
</ol>
<ol type="a">
    <li>小写字母列表a.b.c.d....</li>
</ol>
<ol type="I">
    <li>罗马字母列表I.II.III.IV....</li>
</ol>
<ol type="i">
    <li>小写罗马字母列表i.ii.iii.iv....</li>
</ol>
<ol start="10">
    <li>列表项的序列号从10开始</li>
</ol>

自定义列表

自定义列表以 <dl> 标签开始，自定义列表项以 <dt> 开始，每个自定义列表项的内容以 <dd> 开始。列表项中的内容科一时段落、换行符、图片、链接以及其他列表等等。

<!--自定义列表-->
<dl>
    <dt>列表项1</dt>
    <dd>列表项1的内容1</dd>
    <dd>列表项1的内容2</dd>
    <dt>列表项2</dt>
    <dd>列表项2的内容1</dd>
    <dd>列表项2的内容2</dd>
</dl>

表格标签：table

定义

表格标签常用来显示表格式数据，其单元格中的数据可以包含文本、图片、列表、段落、表单、水平线、表格等等。<caption></caption>代表表格的标题，其可以随着表格进行移动，并且位于表格上方居中的位置。<th></th>(table head)代表表格中的表头，浏览器会把表头显示为粗体居中的文本。<tr></tr>（table row）代表表格中的行，<td></td>（table data）代表表格一行中数据单元格中的内容，而表格的列数则有<td>标签的数量决定。此外，<tr>标签中只能嵌套<td>标签，<td>标签中则可以容纳所有元素，包含文本、图片、列表、段落、表单、水平线、表格等等。空单元格可以用<td></td> 也可以用<td> </td>。下面就是一个三行两列的表格。

<table border="1" width="100" height="90" align="center">
    <caption>信息表2</caption>  <!--表格标题-->
    <tr>
        <th>姓名</th> <!--表头标签-->
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td> <!--空单元格-->
    </tr>
</table>

常用属性

属性名称	作用
width	表格外边框的宽
height	表格外边框的高
border	边框属性，如果不定义边框属性，表格将不显示边框。
align	对齐方式
cellspacing	单元格间距，单元格边框之间的距离以及单元格边框与表格外边框的距离
cellpadding	单元格边距，单元格文字内容与其边框之间的距离
bgcolor	表格背景颜色
background	表格背景图像

美化表格

以下标签常用于对 HTML 表格中的内容进行分组，方便使用 CSS 使这些元素改变表格的外观。

标签名称	作用
thead	页眉，其内部必须有<tr>标签
tbody	主体
tfoot	页脚

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美化表格</title>
    <style type="text/css">
		thead {color:green}		<!--设置页眉的字体颜色为绿色-->
		tbody {color:blue;height:50px}	<!--设置主体内的字体颜色为蓝色，表格高度为50px-->
		tfoot {color:red}	<!--设置最后一行的字体颜色为红色-->
	</style>
</head>
<body>
    <table border="1">
		<thead>   <!--页眉-->
    		<tr>
     			 <th>商品</th>  <!--表头标签-->
      			<th>价格</th>
    		</tr>
  		</thead>

  		<tbody>  <!--主体-->
   			 <tr>
      			<td>手机</td>
      			<td>$100</td>
    		</tr>
    		<tr>
      			<td>书</td>
      			<td>$80</td>
    		</tr>
  		</tbody>

  		<tfoot> <!--页脚-->
    		<tr>
     		 <td>总计</td>
      		<td>$180</td>
    		</tr>
  		</tfoot>
	</table>
</body>
</html>

合并单元格

合并单元格分为跨行合并和跨列合并。跨行合并的属性名为rowspan，保留上面的单元格，删除下面的；跨列合并的属性名为colspan，保留左边的单元格，删除右边的。

<table border="1">
    <caption>个人信息表</caption> <!--表格标题-->
    <tr align="center">  <!--内容居中对齐-->
        <th>姓名</th> <!--表头标签-->
        <th>性别</th>
        <th colspan="2">电话</th> <!--跨列合并2个单元格-->
    </tr>
    <tr align="center">
        <td>张三</td>
        <td rowspan="2">男</td> <!--跨行合并2个单元格-->
        <td>123</td>
        <td>456</td>
    </tr>
    <tr align="center">
        <td>李四</td>
        <td colspan="2">789</td> <!--跨列合并2个单元格-->
    </tr>
</table>

表单标签

表单主要包括表单控件、提示信息和表单域三个部分。

表单控件：input

<input />标签代表表单控件，其中type属性决定了控件的类型。

标签属性

属性名称	作用
type	决定了控件的类型
checked	值为checked的话表示默认选择
value	表示input控件中默认文本值
maxlength	表示控件允许输入的最多字符数

type属性值

属性名称	属性值
文本框	text
密码框	password
单选框	radio（通过name属性使得同一组控件，只能选择一个）
复选框	checkbox（通过name属性关联一组控件，可进行多选）

按钮类型

类型	作用
button	普通按钮，通过属性value=" "来设置按钮控件中的显示名称
submit	提交按钮，具有默认名称为提交，可以通过value进行修改
reset	重置按钮，具有默认名称为重置
image	图像按钮，用一个图像作为按钮
file	文件域，按钮名称为选择文件，不能通过value进行修改

示例

用户名：<input type="text" value="请输入用户名" /> <br />
密　码：<input type="password" /><br />
性　别：<input type="radio" name="sex" checked="checked" />女
<input type="radio" name="sex" />男 <br />
爱　好：<input type="checkbox" name="hobby" checked="checked" />唱歌
<input type="checkbox" name="hobby" checked="checked" />跳舞
<input type="checkbox" name="hobby" />RAP
<input type="checkbox" name="hobby" />敲代码 <br />
上传头像：<input type="file" /> <br />
<hr />
<input type="image" src="图片路径" width="88" /> <br />
<input type="submit" value="提交表单" />
<input type="reset" value="重置表单" />

label标签

label标签与<input />标签搭配，可以实现点击提示信息，自动定位焦点到input控件。当只有一个表单控件的时候，直接用<label></label>包裹<input />控件。当有多个表单控件时，则需要定位到特定某个控件，通过<label>标签属性for=“id名”和<input>标签属性id=“id名”的方式进行定位。

示例

<label>用户名2：<input type="text" /> <br /></label>
<label for="3">
文本框1：<input type="text" id="1" /> <br />
文本框2：<input type="text" id="2" /> <br />
文本框3：<input type="text" id="3" /> <br />
文本框4：<input type="text" id="4" /> <br />
</label>

在此例中，点击“用户名2”后，鼠标光标会自动定位焦点到后面的文本框。点击''文本框1"～"文本框4"后，鼠标光标都会定位焦点到‘文本框3‘的文本框。

textarea标签

textarea标签也叫文本域标签，顾名思义就是一块能供用户输入文字的区域，其rows和cols两个属性规定了文本域的行数和列数。与前面文本框只能输入单行字段不同，<textarea> 标签定义多行输入字段。但是不能用value属性建立文本域中显示的初始值，其默认文字内容写在<textarea></textarea>之间就可以了。此外，文本域保留了默认文字中的空格以及换行，并且会自动换行。

请输入留言：<br/>
	<textarea  rows="20" cols="20">
	留言一
		留言二
			留言三
	</textarea>

下拉菜单

select标签能够定义一个下拉菜单，其中的选项由<option>标签的内容决定。下拉菜单中的第一个选项会默认显示在下拉菜单中，如果要修改默认项，则通过<option>的标签属性selected="selected"实现。如果想让第一个option只作为提示显示但是不作为选项，则将其style属性设置为'display: none'即可。但如果这个属性设置给后面的选项的话，那这个选项就不会显示了。

<select>
    <option  style='display: none'>请选择</option>
    <option>选项1</option>
    <option style='display: none'>选项2</option>
    <option>选项3</option>
</select>

表单域

表单域的标签是<form>，其有三个属性action、method和name。action属性定义了在提交表单时执行的动作。通常，表单会被提交到 web 服务器上的网页。通过action可以指定的某个服务器脚本来处理被提交表单。如果省略 action属性，则action 会被设置为当前页面。method 属性规定在提交表单时所用的 HTTP 方法。默认是GET方法，该方法的特点是表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。使用GET时，表单数据在页面地址栏中是可见的。最适合少量数据的提交。POST方法的安全性更高，因为在页面地址栏中被提交的数据是不可见的。更适合表单正在更新数据，或者包含敏感信息（例如密码）。

与<form>标签有关的还有<fieldset>标签和<legend>标签。<fieldset> 标签可将表单内的相关元素分组。<legend> 标签为 <fieldset>标签定义标题。

<form>
    <fieldset>
        <legend>个人信息</legend>
        姓名：<input type="text" /> <br />
        邮箱：<input type="email" /> <br />
        手机：<input type="tel"> <br />
        出生年月:<input type="month" /> <br />
    </fieldset>
    <fieldset>
        <legend>时间信息</legend>
        时间：<input type="time"> <br />
        年月日： <input type="date"> <br />
        星期年：<input type="week"> <br />
    </fieldset>
    颜色：<input type="color"> <br />
    滑块：<input type="range"> <br />
    搜索框：<input type="search"> <br />
    <br />
    <input type="submit"> <input type="reset">
</form>