本文链接： https://blog.csdn.net/huxueting93/article/details/102585321

前言

常见浏览器及其内核

浏览器内核主要分为两个部分：

渲染引擎
JS引擎

下面是常见浏览器所用的内核：

Trident (IE内核)
Gecko (firefox)
Webkit(safari)
Chromium/Blink (Chrome)
其中Blink是Webkit的分支
Presto(Opera欧朋)
Presto 是前任现在Opera使用的也是Blink内核

Web 标准

结构标准：对网页元素的整理和分类【XML、XHTML两部分】
样式标准：设置网页元素板式、颜色、大小等外观样式【CSS】
行为标准：网页模型的定义及交互的编写【DOM和ECMAScirpt两个部分 (JS)】

理想状态源码包括： .html .css .js

HTML 初识

HTML 是超文本标签语言

网页组成元素

网页组成元素包括：文字、图片、链接、视频、音频等…

HTML 骨架格式及文档类型

<!DOCTYPE html> 
<html lang="en">  根标签
<head>                  头标签
	<meta charset="UTF-8">
	<title>Document</title>  标题标签
</head>
<body>                  主体标签
	hello
</body>
</html>

其中<!DOCTYPE html>是文档类型用于告诉使用的html版本这里使用的是html5版本
<!DOCTYPE >不是一个标签(没有结束符)而是一种声明

<html lang="en"> 文字的显示形式(可以不写)：中文lang="zh"/英文lang="en"

<meta charset="UTF-8">表示使用的字符集 【编码方式】

<html></html>是根标签表示的是整个网页
<html></html>中必须嵌套<head></head>头标签以及<body><body/>主体标签

<title></title>为标题标签，代表了网页的名字

<body><body/>主体标签中的内容会显示在网页中

演示图如下所示：
在这里插入图片描述
在Sublime开发工具中可以使用两种快捷方式生成骨架格式：

html:5 + tab键
! + tab键

HTML 标签

标签分类：

双标签：<标签名></标签名>
单标签：<标签名 />
其中 / 代表了关闭符号

标签关系：

嵌套关系
并列关系

上面<title>与<head>标签属于嵌套关系
<head>和<body>标签属于并列关系

排版标签

描述	标签
标题标签	`<h1></h1>`to`<h6></h6>`
段落标签	`<p></p>`
水平线标签	`<hr />`
换行标签	`<br />`
网页布局	`<div></div>`和`<span></span>`

1、标题标签【熟记】

<h1><h2>...<h6>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--标题标签-->
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
	<h7>七级标题</h7>
</body>
</html>

演示结果如下：
在这里插入图片描述

可以发现最小只有六级标题，不存在~~七级标题~~<h7>
标题前后会有空行，并且会自动换行

2、段落标签【熟记】

<p></p> paragraph

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--段落标签-->
	段落1
	段落2
	<p>段落1</p>
	段落2
</body>
</html>

演示结果如下：
在这里插入图片描述

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

3、水平线标签【认识】

<hr /> horizontal

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>段落1段落1段落1段落1段落1段落1
	段落1段落1段落1段落1段落1段落1段落1段落1</p>
	<hr />    <!--水平线标签-->
	<p>段落2段落2段落2段落2段落2段落2
	段落2段落2段落2段落2段落2段落2段落2段落2</p>
</body>
</html>

演示结果如下：
在这里插入图片描述

4、换行标签【熟记】

<br /> break

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--换行标签-->
	在编辑器中进行
	手动换行是没有作用的！<br />
	编辑器中的换行变成了网页中的空格。 <br />
	这里需要用到换行标签才能实现换行，但是不会分段！ <p></p>
	使用分段标签会在前后添加空行！！
</body>
</html>

演示结果如下：
在这里插入图片描述

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。

注意：要区分<br />和<p></p>所带来的不同，分段会在段落的前后添加空行。而使用换行标签不会有多余的空行。不能用<p></p>代替<br />!!!

5、HTML 块

HTML 块元素
块元素显示时，通常会以新行开始
如：<h1>、<p>、<ul>
HTML 内联元素
内联元素通常不会以新行开始
如：<strong>、<a>、<img>
HTML <div>元素【重点】
<div></div> division 分隔分区
该元素也被称为块元素，其主要是组合HTML元素的容器
HTML <span>元素【重点】
<span></span> 跨度、跨距
该元素是内联元素，可作为文本的容器

<div></div>、<span></span> 这两个标签主要用于网页布局，配合CSS样式使用。

文本格式化标签【熟记】

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

注意:
对于粗体、斜体、删除线以及下划线给了两种标签显示，前者只有使用没有强调的意思。
后者的语义更强烈，为XHTML推荐的写法！

1、粗体、斜体、删除线、下划线

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--文本格式化标签-->
	<b>这是粗体</b>  <br />
	<strong>这也是粗体</strong> <br />

	<i>这是斜体</i> <br />
	<em>这也是斜体</em> <br />

	<s>带有删除线</s> <br />
	<del>也带有删除线</del> <br />

	<u>带有下划线</u> <br />
	<ins>也带有下划线</ins> <br />

</body>

演示结果如下：
在这里插入图片描述

2、上下标字

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--文本格式化标签-->
	文本<sup>上标</sup> <br />
	文本<sub>下标</sub> <br />

</body>
</html>

演示结果如下：
在这里插入图片描述

3、预格式文本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--文本格式化标签-->
	<pre>
预格式文本   中的内容
可以保留   多空格
以及换行
	</pre>

	<p>pre 标签很适合显示计算机代码：</p>

	<pre>
	sum = 0
	for i in range(10):
		sum += i
	print sum
	</pre>

</body>
</html>

演示结果如下：
在这里插入图片描述

预格式文本可以保留编辑器中的多空格以及换行等格式。

预格式文本中的空格等格式是从与<body>主体标签对齐的线开始的！！

4、HTML 字符实体

为了显示源代码，不进行解析【小于号（<）和大于号（>）浏览器会误认为它们是标签】，需要在 HTML 源代码中使用字符实体（character entities）来正确地显示预留字符。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>这是一个片段</p>
	为了连同代码一起显示则需要用到特殊字符：<br/>
	&lt;p&gt;这是一个片段&lt;p&gt; <br/>
	右边有多个空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;左边有多个空格
</body>
</html>

演示结果如下：
在这里插入图片描述

HTML 元素及属性

1、HTML 元素

HTML 元素指的是从开始标签到结束标签的所有代码

开始标签【开放标签】	元素内容	结束标签【闭合标签】
`<p>`	这是一个段落	`</p>`
`<br />`

没有元素内容的 HTML 元素被称为空元素 。空元素是在开始标签中关闭的
<br />就是没有关闭标签的空元素

2、HTML 属性

<标签名属性1=“属性1” 属性2=“属性2” ...>内容</标签名>

大多数 HTML 元素可拥有属性，属性提供了有关 HTML 元素的更多的信息。
属性总是以键/值对的形式出现key="value"
属性总是在 HTML 元素的开始标签中规定
新版本的 (X)HTML 要求使用小写属性和属性值
属性值应该始终被包括在引号内。双引号是最常用的，属性值本身就含有双引号，那么包含在单引号内。

常用的标签属性:: <h1>： align属性-对齐方式 <h1 align="center">居中对齐; <body>：bgcolor属性-背景颜色 <body bgcolor="yellow">页面整个背景为黄色; <a>： target属性- 目标窗口弹出方式 <a href="http://www.baidu.com" target="_blank">baidu</a>新窗口弹出; <hr />：width属性- 水平线的长度 <hr width="300" />水平线在中间，长度为300
通用属性:: class：规定元素的类名; id：规定元素唯一ID; style：规定元素的行内样式
写在 <head></head>中，通过 type引入 css样式 <style type="text/css"></style>; title：规定元素的额外信息

图像标签img 【重点】

单标签
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" />

图像路径可以是本地路径，网络上的图像可以右键复制图像地址，如上是图像的网络路径。
路径可以用绝对路径和相对路径，相对路径中src=“../img/1.jpg”中的../代表上一级目录。

标签属性：

src：路径属性
alt：图像不显示时的替代文本
title：鼠标悬停时的提示文本
width：宽 height：高（只用给一个即可，会自动进行缩放，不添加宽高则显示原图像大小）
border：图像边框宽度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="baidu_logo1.png" alt="百度图标" width="200"  border="20" title=“百度” />
</body>
</html>

演示结果如下：
在这里插入图片描述
在浏览器无法载入图像时，浏览器将显示替代性的文本而不是图像。

在这里插入图片描述

链接标签

<a></a> anchor 锚
<a href="http://www.baidu.com">百度</a>

1、创建链接【重点】

标签属性：

href：（Hypertext Reference 超文本引用）跳转目标地址

外部链接不能省略http://
内部链接直接链接内部页面名称 <a href="index.html">百度</a>
href="#"没有链接目标，用#代表空链接

target：目标窗口弹出方式

target="_self" 在当前窗口直接跳转（默认方式）
target="_blank"以新窗口打开

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>

演示结果如下：
在这里插入图片描述

“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
文本、图像、表格、音频、视频都可以添加超链接

2、创建目录（锚点定位）【难点】

使用<a href=" #id名">跳转到指定标题的链接</a>

使用相同的id名标注需要跳转的位置<h1 id="id名">标题名</h1>

使用<a href=" #name名">跳转到文字的链接</a>

<a name="name名">文字</a>

注意:这里的name属性与id是一样的，用 <a name="name名">文字</a>可以为普通文本（非标题）创建链接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1 id="0">目录</h1>
	<a href="#1">查看章节1</a> <br />
	<a href="#2">查看章节2</a> <br />
	<a href="#3">查看章节3</a> <br />
	<a href="#4">查看章节4</a> <br />
	<a href="#5">查看章节5</a> <br />
	<a href="#6">查看章节6</a> <br />
	<a href="#7">查看章节7</a> <br />

	<h3 id="1">章节1</h3>
	<a href="#0">返回顶部</a>

	<h3 id="2">章节2</h3>
	<a href="#0">返回顶部</a>

	<h3 id="3">章节3</h3>
	<a href="#0">返回顶部</a>

	<h3 id="4">章节4</h3>
	<a href="#0">返回顶部</a>

	<h3 id="5">章节5</h3>
	<a href="#0">返回顶部</a>

	<h3 id="6">章节6</h3>
	<a href="#0">返回顶部</a>

	<h3 id="7">章节7</h3>
	<a href="#0">返回顶部</a>
</body>
</html>

演示结果如下：
在这里插入图片描述
点击查看章节3的链接后会跳转到章节3的位置，如下：

base标签

单标签： <base /> 定义页面中所有链接的默认地址或默认目标
在<head></head>之间写<base />标签

属性	描述
`href`	所有相对链接的基准 URL
`target`	所有链接的目标窗口弹出方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<base href="audio_processing/yinpin/" target="_blank" />
</head>
<body>
	<audio src="als1_cut.mp3" controls ></audio> <br />
	<p> 在base中已经给定了一个相对地址，这里的音频会在“audio_processing/yinpin/als1_cut.mp3”路径下寻找。</p>
	<a href="http://www.baidu.com">百度</a> <br />
	<a href="http://www.sina.com">新浪</a>	
	<p>因为在base中设置了target="_blank"，所以这里的链接都会以新窗口打开</p>
</body>
</html>

演示结果如下：
在这里插入图片描述

列表标签

标签	描述
`<ul>`	无序列表
`<ol>`	有序列表
`<li>`	列表项
`<dl>`	自定义列表
`<dt>`	自定义列表中的列表项
`<dd>`	对自定义列表中列表项的描述

1、无序列表【重点】

<ul></ul> & <li></li>

标签属性:

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--无序列表-->
	无序列表：
	<ul>
		<li>列表项1</li>
		<li>列表项2 <br/>
			<img src="baidu_logo1.png" width="200">
		</li>
		<li>列表项3
			<p>这是一个段落</p>
		</li>
		<li>列表项4<br/>
			<ul>
				<li>子列表项1</li>
				<li>子列表项2</li>
			</ul>
		</li>
		<li><a href="http://www.baidu.com" target="_blank">列表项5</a></li>
	</ul>
</body>
</html>

演示结果如下：
在这里插入图片描述

<ul>标签里只能放<li>，不能写其他标签，如<p>

<li>标签里面可以使用其余标签。例如列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

默认嵌套列表使用实心圆圈、空心圆圈、实心方块…

2、有序列表【了解】

<ol></ol> & <li></li>

标签属性:

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--有序列表-->
	有序列表：
	<ol>
		<li>列表项1</li>
		<li>列表项2 <br/>
			<img src="baidu_logo1.png" width="200">
		</li>
		<li>列表项3
			<p>这是一个段落</p>
		</li>
		<li>列表项4<br/>
			<ul>
				<li>无序子列表项1</li>
				<li>无序子列表项2</li>
			</ul>
			<ol>
				<li>有序子列表项1</li>
				<li>有序子列表项1</li>
			</ol>
		</li>
		<li><a href="http://www.baidu.com" target="_blank">列表项5</a></li>
	</ol>
</body>
</html>

演示结果如下：
在这里插入图片描述

<ol>标签里只能放<li>，不能写其他标签，如<p>

<li>标签里面可以使用其余标签。例如列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

3、自定义列表【理解】

<dl></dl> & <dt></dt> & <dd></dd>

有序列表和无序列表都是一列项目，而自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始，自定义列表项以 <dt> 开始，每个自定义列表项的注释以 <dd> 开始。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--自定义列表-->
	自定义列表：
	<dl>
		<dt>列表项1</dt>
		<dd>列表项1的解释1</dd>
		<dd>列表项1的解释2</dd>
		<dt>列表项2</dt>
		<dd>列表项2的解释1</dd>
		<dd>列表项2的解释2</dd>
	</dl>
</body>
</html>

演示结果如下：
在这里插入图片描述

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

表格标签table 【会使用】

表格	描述
`<table>`	表格
`<caption>`	表格标题
`th`	表格的表头
`tr`	表格的行
`td`	表格的单元格
`thead`	表格的页眉
`tbody`	表格的主体
`tfoot`	表格的页脚

1、表格及其属性

<table></table> & <tr></tr> & <td></td>

不用表格标签来进行网页布局，常用来处理显示表格式数据
HTML表格中没有列，<tr></tr>（table row）代表了表格中的行，<td></td>（table data）代表表格一行中数据单元格中的内容【相当于列】。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

标签属性:

width：表格外边框的宽 height：表格外边框的高 <table width="500" height="300"></table>
border：边框属性，如果不定义边框属性，表格将不显示边框。<table border="1"></table>
align: 对齐方式align="left"/"right/"/"center" 在<table>中加代表整个表格在页面中的位置
在<tr>、<td>中加代表单元格中的文字内容在单元格的位置
cellspacing：单元格间距，单元格边框之间的距离以及单元格边框与表格外边框的距离
cellpadding：单元格边距，单元格文字内容与其边框之间的距离
bgcolor：表格背景颜色 bgcolor="red"，<table>、<tr>、<td>标签中均可以添加
background：表格背景图像 background="1.png"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--表格-->
	<table border="1">
		<tr>
			<td>姓名</td>
			<td>性别</td>
		</tr>
		<tr>
			<td>张三</td>
			<td>男</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>男</td>
		</tr>
	</table>
</body>

演示结果如下：
未使用border属性：
在这里插入图片描述
使用border=“1”属性后：

使用cellpadding="10"属性后，单元格文字内容与单元格的边框距离变化。
使用cellspacing="5"属性后，单元格边框距离表格外边框的距离变化。

<tr>中只能嵌套<td>
<td>中可以容纳所有元素，包含文本、图片、列表、段落、表单、水平线、表格等等

2、表头标签及表格标题

表头标签 <th></th>

表头便签即是用<th></th>(table head)代替<td></td>，浏览器会把表头显示为粗体居中的文本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--表格-->
	<table border="1" width="100" height="90">
		<tr>
			<th>姓名</th> <!--表头标签-->
			<th>性别</th>
		</tr>
		<tr> 
			<td>张三</td>
			<td>男</td>
		</tr>
		<tr> 
			<td>李四</td>
			<td></td> <!--空单元格-->
		</tr>
	</table>
</body>
</html>

演示结果如下：
在这里插入图片描述

空单元格可以用<td></td> 也可以用<td> </td>
其中 (no-breaking 空格)是一个字符实体

表格标题 <caption></caption>

表格标题可以随着表格进行移动，并且位于表格上方居中的位置。

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--表格-->
	信息表1 <!--非表格标题-->
	<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>
</body>
</html>

演示结果如下：
在这里插入图片描述

3、表格结构【了解】

<thead>、<tbody>、<tfoot>定义表格的页眉、主体、页脚，用于对 HTML 表格中的内容进行分组，方便使用 CSS 使这些元素改变表格的外观。

注意：<thead> 内部必须拥有 <tr> 标签！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		thead {color:green}
		tbody {color:blue;height:50px}
		tfoot {color:red}
	</style>
</head>
<body>
	<!--表格-->
	<table border="1">
		<thead>   <!--页眉-->
    		<tr>
     			 <th>Month</th>  <!--表头标签-->
      			<th>Savings</th>
    		</tr>
  		</thead>
  		
  		<tbody>  <!--主体-->
   			 <tr>
      			<td>January</td> 
      			<td>$100</td>
    		</tr>
    		<tr>
      			<td>February</td>
      			<td>$80</td>
    		</tr>
  		</tbody>
  		
  		<tfoot> <!--页脚-->
    		<tr>
     		 <td>Sum</td>
      		<td>$180</td>
    		</tr>
  		</tfoot>
  		
	</table>
</body>
</html>

演示结果如下：
在这里插入图片描述

4、合并单元格【难点】

跨行合并rowspan rowspan="2"代表跨行合并2个单元格，保留上面的单元格，删除下面的

跨列合并colspan colspan="2"代表跨列合并2个单元格，保留左边的单元格，删除右边的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--表格-->
	<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>
</body>
</html>

演示结果如下：
在这里插入图片描述

表单标签【掌握】

表单包含了:

表单控件（表单元素）

提示信息

表单域

1、input 控件【重点】

<input type=" "/> 单标签
type属性决定了控件的类型

文本框：type="text"
密码框：type="password"
单选框：type="radio" 通过name属性使得同一组控件，只能选择一个
复选框：type="checkbox" 也是通过name属性关联一组控件，可进行多选

标签属性checked=“checked”来表示默认选择

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

标签属性value=" "来表示input控件中默认文本值
标签属性maxlength来表示控件允许输入的最多字符数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--input控件-->
	用户名：<input type="text" value="请输入用户名"/> <br />
	密　码：<input type="password" /> <!--i用全角中文输入空格-->  <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"/>绘画
			<input type="checkbox" name="hobby"/>唱歌 <br />
	上传头像：<input type="file" /> <br />
	<hr />
	<input type="image" src="jd_logo.png" /> <br />
	<input type="submit" value="提交表单" />   
	<input type="reset" value="重置表单" />	
</body>
</html>

演示结果如下：
在这里插入图片描述

2、label标签【理解】

与<input />标签搭配，可以实现点击提示信息，自动定位焦点到input控件。

一个表单控件，直接用<label></label>包裹<input />控件

多个表单控件，需要定位到特定某个控件，通过<label>标签属性for=“id名”和<input>标签属性id=“id名”的格式进行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--input控件-->
	用户名1：<input type="text" /> <br />
	<!--label标签-->
	<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>
</body>
</html>

演示结果如下：
在这里插入图片描述
点击‘用户名2’后，鼠标光标会自动定位焦点到后面的文本框。

点击‘文本框1’～‘文本框4’，鼠标光标都会定位焦点到‘文本框3‘的文本框

3、textarea控件（文本域）

与前面文本框只能输入单行字段不同，<textarea> 元素定义多行输入字段（文本域）。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--textarea控件-->
	请输入留言：<br/>
	<textarea  rows="10" cols="30">
正文正文正文正文正文正文正文正文正文正文正文
		
	正文正文正文正文正文正文正文正文正文正文正文
	正文正文正文正文正文  正文正文正文正文正文
	</textarea>
	</label>
</body>
</html>

演示结果如下：
在这里插入图片描述

注意：在文本域中的文字保留了空格以及换行，并且会自动换行！！
文本域中可以自己键入文本。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--textarea控件-->
	<label>
	请输入留言：<br/>
	<textarea  rows="10" cols="30">请输入留言
	</textarea>
	</label>
</body>
</html>

演示结果如下：
在这里插入图片描述

4、下拉菜单 select

<select></select>控件
<option></option>

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>

’选项1‘默认会显示在下拉菜单中，如果要修改默认项，通过<option>的标签属性selected="selected"实现。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--select控件-->
	籍贯：
	<select>
	<option>北京</option>
	<option>上海</option>
	<option selected="selected">湖北</option>
</select>
</body>
</html>

演示结果如下：
在这里插入图片描述

5、表单域 form

<form action="xxx.php"(提交的后台) method="GET"/"POST"（提交的方式） name="表单名称">
	<input />
	...
<form>

action：定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。通过xxx.php指定了某个服务器脚本来处理被提交表单。
如果省略 action属性，则action 会被设置为当前页面。
method 属性规定在提交表单时所用的 HTTP 方法（GET默认方法或 POST）
GET：表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。使用GET时，表单数据在页面地址栏中是可见的。最适合少量数据的提交。浏览器会设定容量限制。
POST：表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

注意：如果要正确地被提交，每个输入字段必须设置一个 name 属性

HTML5 新标签与特性

常用新标签

标签	描述
`<header>`	定义文档或节`<section>`的页眉
`<nav>`	导航链接
`<footer>`	定义文档或节`<section>`的页脚
`<article>`	文章
`<section>`	文档中的节
`<aside>`	定义页面内容之外的内容（侧边）
`<figure>`	定义自包含内容，比如图示、图表、照片、代码清单等等
`<datalist>`	下拉列表，选项列表，搭配`<input>`
`<filedset>`	定义围绕表单中元素的边框，对表单内相关元素分组打包，与`<legend>`搭配

<datalist id="id名">、<option> 选项列表
必须与<input list="id名"/>搭配使用，通过<datalist>中的id实现和<input>链接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--datalist-->
	籍贯：<input type="text" value="输入籍贯" list="country"/>
	<datalist id="country">
	<option>北京</option>
	<option>上海</option>
	<option>湖北</option>
	</datalist>
</body>
</html>

演示结果如下：
在这里插入图片描述

<fieldset>表单元素边框
与<legend>搭配，<legend> 标签为< fieldset> 元素定义标题

HTML5 <fieldset>标签拥有如下属性:

属性	描述
`disabled`	用于禁用一组表单元素（一个 fieldset）
`form`	规定 fieldset 所属的一个或多个表单，`form=“表单的id名”`
`name`	规定 fieldset 的名称

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--fieldset-->
	<fieldset>
		<legend>健康信息</legend>
		<label>身高：<input type="text" /></label> 
		<label>体重：<input type="text"></label>
	</fieldset>
	<fieldset disabled="disabled"> <!--禁用fieldset-->
		<legend>健康信息</legend>
		<label>身高：<input type="text" /></label> 
		<label>体重：<input type="text"></label>
	</fieldset>
</body>
</html>

演示结果如下：
在这里插入图片描述

新增的input type 属性值

属性	描述
`email`	邮箱
`tel`	手机格式
`url`	网址
`number`	数字
`search`	搜索框（带有X清空按钮）
`range`	区域滑块
`time`	小时分钟
`date`	年月日
`datetime`	时间
`month`	月年
`week`	星期年
`color`	颜色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>	
	<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>
	
</body>
</html>

演示结果如下：
在这里插入图片描述

新增表单属性

属性	描述
`placeholder`	占位符提供可描述输入，字段预期值的提示信息
`autofocus`	自动获得焦点
`multiple`	多文件上传
`autocomplete=“on”/"off"`	自动完成，`on`时进行记录已经输入的值
`required`	必填项
`accesskey="某个字母"`	按alt+字母使得元素获得焦点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>	
	<form>
		<fieldset>
			<legend>个人信息</legend>
			姓名：<input type="text" value="请输入姓名" /> <br /> 
			<!--value是控件中默认文本值-->
			用户名：<input type="text" placeholder="请输入用户名" /> <br /> 
			<!--placeholder是占位符，焦点定位后字段消失-->

			鼠标光标焦点会在我这： <input type="text" autofocus> <br />
			<!--autofocus自动定位焦点-->

			上传头像：<input type="file" /> <br/>
			<!--单一文件上传-->
			上传多个文件： <input type="file" multiple /> <br/>
			<!--multiple 多文件上传-->

			不带记录的搜索框： <input type="search" /> <br />
			带记录的搜索框： <input type="search" autocomplete="on" name="search"/> <br />

			手机：<input type="tel" required accesskey="t"/>


		</fieldset>
		<br />
			<input type="submit"> <input type="reset">
	</form>
	
</body>
</html>

演示结果如下：
在这里插入图片描述

打开页面后，鼠标光标首先会定位在autofocus所在的控件中。
value中的值为黑色，而placeholder中为灰色。
进行控件输入时，value中的值不会自动消失，而placeholder中的值会清除。
多文件的上传，控件依旧是文件域type="file"，只是多加了一个标签属性multiple。
注意：
1>autocomplete首先必须需要有一个提交按钮
2>要正确的提交，必须设置一个name属性
在进行正确提交完成后，下次输入可以通过autocomplete记录已经输入的值，进行自动填写
按住alt+t可以定位焦点到手机号的控件框中。
手机号我们设置为必选项required，在提交时如果未填写会给予提示信息。

多媒体标签

标签	描述
`<embed></embed>`	定义外部交互内容或插件（用于引入网上视频）
`<audio></audio>`	音频
`<video></video>`	视频

1、多媒体embed 【会使用】

属性	描述
`src`	嵌入内容的 URL
`type`	定义嵌入内容的类型
`height`	设置嵌入内容的高度
`width`	设置嵌入内容的宽度

将自己的视频上传到网络上，对上传的视频点击分享后会有一个Html代码，进行复制粘贴到<body></body>中即可。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>	
	<embed height=498 width=800 src='http://player.youku.com/embed/XNDQwMTAxODkxNg==' frameborder=0 'allowfullscreen'></embed>
</body>
</html>

演示结果如下：
在这里插入图片描述

2、多媒体audio

属性	描述
`src`	播放音频的 URL
`autoplay`	自动播放
`controls`	播放控件
`loop`	无限循环播放
`muted`	播放默认为静音

总共有三种音频格式，为了浏览器兼容，至少需要做前两个的音频格式的文件

ogg

mp3

wav

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>	
	<audio controls autoplay>
		<source src="audio_processing/yinpin/als1_cut.mp3"/>
		<source src="audio_processing/yinpin/als1_cut.ogg">
		您的浏览器不支持html音频播放功能
	</audio>
</body>
</html>

演示结果如下：
在这里插入图片描述

3、多媒体video

属性	描述
`src`	播放视频的 URL
`poster`	视频下载时显示的图像，或者在用户点击播放按钮前显示的图像URL
`autoplay`	自动播放
`controls`	播放控件
`loop`	无限循环播放
`muted`	播放默认为静音
`height`	视频播放器的高度
`width`	视频播放器的宽度

总共有三种视频格式，为了浏览器兼容，至少需要做前两个的声音文件

ogg

mpeg4

webm

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>	
	<video controls autoplay width="400">
		<source src="movie.mp3"/>
		<source src="movie.ogg">
		您的浏览器不支持视频播放功能
	</video>
</body>
</html>

演示结果如下：
在这里插入图片描述

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

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

HTML教程-黑马

目录

前言

常见浏览器及其内核

Web 标准

HTML 初识

网页组成元素

HTML 骨架格式及文档类型

HTML 标签

排版标签

1、标题标签 【熟记】

2、段落标签 【熟记】

3、水平线标签 【认识】

4、换行标签 【熟记】

5、HTML 块

文本格式化标签 【熟记】

1、粗体、斜体、删除线、下划线

2、上下标字

3、 预格式文本

4、HTML 字符实体

HTML 元素及属性

1、HTML 元素

2、HTML 属性

图像标签img 【重点】

链接标签

1、创建链接【重点】

2、创建目录（锚点定位） 【难点】

base标签

列表标签

1、无序列表【重点】

2、有序列表【了解】

3、自定义列表 【理解】

表格标签table 【会使用】

1、表格及其属性

2、表头标签及表格标题

3、表格结构 【了解】

4、合并单元格 【难点】

表单标签 【掌握】

1、input 控件 【重点】

2、label标签 【理解】

3、textarea控件（文本域）

4、下拉菜单 select

5、表单域 form

HTML5 新标签与特性

常用新标签

新增的input type 属性值

新增表单属性

多媒体标签

1、多媒体embed 【会使用】

2、多媒体audio

3、多媒体video

猜你喜欢

1、标题标签【熟记】

2、段落标签【熟记】

3、水平线标签【认识】

4、换行标签【熟记】

文本格式化标签【熟记】

3、预格式文本

2、创建目录（锚点定位）【难点】

3、自定义列表【理解】

3、表格结构【了解】

4、合并单元格【难点】

表单标签【掌握】

1、input 控件【重点】

2、label标签【理解】

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