前端之HTML
一 何为HTML？
HTML：Hypertext Markup Language，即超文本（图片、链接、甚至音乐、程序等非文字元素）标记语言。
HTML不是一种编程语言，而是一种标记语言（一套标记标签 (markup tag)）。
HTML使用标记标签来描述网页。
HTML文档包含了HTML标签及文本内容。
HTML文档也叫做web 页面。
浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）。
静态网页文件扩展名：.html 或 .htm
二 HTML标签格式
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- HTML标签不区分大小写，推荐使用小写
- 标签分为两部分，开始标签(开放标签)和结束标签(闭合标签)，两个标签之间的部分叫标签体
- 某些标签不是成对出现的，这种标签叫自闭合标签，比如：<img>，<br>，<hr>
- 标签可以有若干个属性，也可以没有，比如:<head>
- 标签可以嵌套，但不能交叉嵌套，比如：<a><b></a></b>
# 标签的语法 <标签 属性1=“属性1值” 属性2=“属性2值” ...>内容</标签> <标签 属性1=“属性1值” 属性2=“属性2值”... />
三 HTML 元素
HTML标签和HTML元素通常都是描述同样的意思。但是严格来讲，一个HTML元素包含了开始标签与结束标签，结构如下：
<h1>内容</h1>
四 HTML的结构
<!DOCTYPE html>
<html> <!--顶层标记-->
<head> <!--头标记-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--体标记-->
</body>
</html>
- <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
- <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
- <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
- <title></title>定义网页标题，在浏览器标题栏显示
- <body></body>之间的文本是可见的网页主体内容
注意：浏览器一般忽略文件的回车符，文件中的空格通常也不按照程序中的效果显示。对于确实需要显示空格和回车的地方，HTML通过特殊的符号来表达，比如HTML源文件如下：
<html> <!--顶层标记-->
Hello World <!--两个单词之间有很多空格-->
</html>
实际执行效果：
如果我们确实需要在浏览器中显示空格，则需要特殊字符“ ”，修改源码如下：
执行结果如下：
更多特殊字符表：https://www.jb51.net/onlineread/htmlchar.htm
五 常用标签
5.1 <!DOCTYPE>标签
<!DOCTYPE> 声明位于文档中的最前面的位置，位于 <html> 标签之前。此标签可告知浏览器，文档使用哪种 HTML 或 XHTML 规范。
作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：
- BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
- CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat。
5.2 <head>内常用标签
5.2.1 <meta>
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1. name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="关键字1，关键字2，..."> <!--定义网页关键字，方便搜索--> <meta name="description" content="网页的描述信息"> <!--定义网页的描述信息--> <meta name="author" content="joe"> <!--定义网页作者-->
2. http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--30秒钟后跳转到指定网页，如不指定URL，则为每5秒刷新当前网页--> <meta http-equiv = "refresh" content ="5; URL = https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) <meta http-equiv = "content-Type" charset = "UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
5.2.2 <title>
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
<title>文档标题</title>
5.2.3 <base>
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。
<head> <base href="http://www.baidu.com/" target="_blank"> </head>
5.2.4 <link>
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表。
<head> <!--用于连接到样式表--> <link rel="stylesheet" type="text/css" href="mystyle.css"> <!--用于更改标题栏图标--> <link rel="icon" href="url"> </head>
5.2.5 <style>
<style> 标签定义了HTML文档的样式文件引用地址。
在<style> 标签中你也可以直接添加样式来渲染 HTML 文档。
<style>
h1{
background-color: red;
color: aqua;
}
p{
background-color: aqua;
color: red;
}
</style>
5.2.6 <script>
<script>标签用于加载脚本文件，如：JavaScript。
5.3 <body>内基本标签
5.3.1 段落
HTML会忽略文件中的回车和换行，所以需要用特别的标记来表示段落，并且上下内容之间有一行空白。标记为：<p>
<body>
<p> 第一段：xxxxxx</p>
<p> 第二段：xxxxxx</p>
<p> 第三段：xxxxxx</p>
</body>
执行效果：
5.3.2 标题
<hn>：n的取值范围是1~6； 从大到小，用来表示标题，浏览器会自动的在标题的前后添加空行。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
<body>
<h1>xxxxxx</h1>
<h2>xxxxxx</h2>
<h3>xxxxxx</h3>
<h4>xxxxxx</h4>
<h5>xxxxxx</h5>
<h6>xxxxxx</h6>
</body>
执行效果：
5.3.3 字体格式
<b> <strong>: 加粗标签 <strike>: 为文字加上一条中线 <del>: 删除字 <i>：斜体 <sup>和<sub>: 上角标 和 下角标
<body>
<b>粗体</b>
<strong>粗体</strong>
<strike>为文字加上一条中线</strike>
<del>删除字</del>
<i>斜体</i>
<em>斜体</em>
<sup>上角标</sup>
<sub>下角标</sub>
</body>
执行效果：
更多字体格式标签：
5.3.4 链接和图像
1. 超链接标签(锚标签): <a>
什么是超级链接？ 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上 的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
<a> href="" target="_blank" >click</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com"）
相对 URL - 指当前站点中确切的路径（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
target属性可以定义被链接的文档在何处显示，将其设置为 "_blank", 链接将在新窗口打开。
2. 图形标签: <img>
属性如下：
- src: 要显示图片的路径
- alt: 图片没有加载成功时的提示
- title: 鼠标悬浮时的提示信息
- width: 图片的宽
- height:图片的高 (宽高两个属性只用一个会自动等比缩放)
<!--注意：中间不用加其他符号隔开--> <img title="TEST" width="500px" height="300px" src="URL" alt="失败时显示文字">
5.3.5 表格标签<table>
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。<table>、<tr>、<td>、<th>分别声明：表格、表行、表单元、表头表格的基本结构：
<table>
<tr> <!-- table row -->
<th>标题</th> <!-- table head -->
<th>标题</th>
</tr>
<tr>
<td>内容</td> <!-- table data -->
<td>内容</td>
</tr>
</table>
# 属性: border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.（最好通过css来设置长宽） rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格）
5.3.6 列表标签
1. 有序列表（order list）
<ol>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>
2. 无序列表（unorder list）
<ul>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ul>
3. 定义列表 （define list）
<dl>
<dt>标题一</dt> <!--define title-->
<dd>内容一</dd> <!--define data-->
<dt>标题二</dt>
<dd>内容二</dd>
</dl>
提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
5.3.7 <div>和<span>
<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。 <span></span>： <span>表示了内联行（行内元素），并无实际的意义，主要通过CSS样式为其赋予不同的表现。
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: red; } span{ background-color: green; } </style> </head> <body> <div>我是块级标签</div> <span>我是内联标签</span> </body> </html>
5.3.8 颜色及背景
颜色可以用于设置字体，网页背景等，HTML的颜色有3种表达方式：
- 十六进制数字
- RGB值
- 颜色名称
比如通过上述方式设置页面背景：
<body bgcolor = "red"> <body bgcolor = "#FF0000"> <body bgcolor = "rgb(255,255,0)">
通常情况下（也建议这样做）我们采用样式来定义颜色和背景：
<body style="background-color: red"> <!--设置背景颜色为红色-->
<p style="color: green">绿色文字</p> <!--设置字体颜色为绿色-->
<p style="color: green; font-size: 30px">绿色文字，字体大小为30px</p> <!--设置字体颜色及字体大小-->
</body>
5.3.9 Flash及音视频播放
我们可以使用<object>标签播放嵌入式Flash，举例如下：
<object> classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"> <embed src="flash5266.swf" width="300" height="200"></embed> </object>
<object>标签中的classid、codebase等属性用于指明客户端播放插件，开发过程中不需要修改这部分内容，只需要修改<embed>标签的相关属性就可以设置不同的flash文件，播放窗口的大小等。
另一种方式：
<object data="flash5266.swf" width="300" height="200"></object>
音频和视频可以通过<audio>、<video>标签嵌入HTML中，浏览器遇到他们时会将本地可用的音频和视频播放器嵌入页面中，比如：
<audio controls="controls"> <source src="test.mp3" type="audio/mp3"> </audio> <video controls="controls"> <source src="xxxx.mp4" type="video/mp4"> </video>
HTML可以识别常见的多种音频格式。
5.3.10 其他
<hr/>：表示单行横线显示；<br/>表示换行
<p>这是一个段落</p><hr/> <b>粗体</b><br/> <del>删除字</del> <p>这是一个段落</p>
执行效果：
5.4 表单标签<form>
功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互。
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等，还可以包含textarea、select、fieldset和 label标签。
# 表单属性 action: 表单提交到哪。一般指向服务器端一个程序，程序接收到表单提交过来的数据（即表单元素值）作相应处理 method: 表单的提交方式 post/get，默认取值就是get
表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
5.4.1 <input>
# 表单类型
type:
text 文本输入框 # 比如提示用户输入用户名
password 密码输入框 # 输入密码，暗文
radio 单选框 # 圆圈
checkbox 多选框 # 方形
submit 提交按钮 # 可通过value赋值
button 按钮(需要配合js使用) button和submit的区别？ # button原生的
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
hidden 给定默认值，不显示出来，不需要用户输入
上传文件注意两点：
1.请求方式必须是post
2.form表单需要加上属性enctype="multipart/form-data"
# 表单属性
name: 表单提交项的键
注意和id属性的区别：name属性是和服务器通信时使用的名称
而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio和checkbox默认被选中
readonly: 只读.text和password
disabled: 对所用input都好使
注意：input标签只能在form里使用，方才有效！！！
<form enctype="multipart/form-data" method="post"> <p>用户名：<input type="text" name="username"></p> <p>密码：<input type="password" name="password"></p> <p>性别： 男 <input type="radio" name="sex" value="male" checked> 女 <input type="radio" name="sex" value="female"> </p> <p>兴趣爱好： 足球 <input type="checkbox" name="hobby" value="football" checked> 篮球 <input type="checkbox" name="hobby" value="basketball"> 斯诺克 <input type="checkbox" name="hobby" value="snooker"> 一个disabled示例 <input type="checkbox" name="hobby" value="xxx" disabled> </p> <p>头像上传：<input type="file" name="pic" accept=".png, .jpg, .gif "/></p> <!--accept属性可以设置文件选择框中的文件筛选器--> <p><input type="reset"></p> <!--重置--> <p><input type="button" value="button提交"></p> <p><input type="submit" value="submit提交"></p> </form>
5.4.2 <select>（适用于单多选）
<select> 下拉选标签属性
name:表单提交项的键.
size：选项个数
multiple：multiple 多选 等同于multiple
<optgroup>为每一项加上分组
label:赋值
<option> 下拉选中的每一项 属性：
value:表单提交项的值.
selected: selected下拉选默认被选中
<select name="province" size="2"> <!--添加multiple为多选--> <optgroup label="中国"> <option value="henan"> 河南</option> <option value="hebei">河北</option> <option value="hunan">湖南</option> <option value="hubei">湖北</option> <option value="sichuan">四川</option> </optgroup> </select>
5.4.3 <textarea>
多行文本框
<p>备注：<textarea name = "comment" rows="2" cols="60"> </textarea></p>
5.4.4 <label>
定义：<label> 标签为 input 元素定义标注（标记）。说明如下：
- label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form method="post" action=""> <label for="username">用户名:</label> <input type="text" name="username"> </form>
5.4.5 <fieldset>
该标签为HTML提供的边框控件，可以将所有其他控件包含在一起，已形成良好的视觉效果。
<fieldset> <legend>信息:</legend> <!--定义<fieldset>元素的标题--> <!--此处放置所有的输入控件--> </fieldset>
将以上所有控件集合在一起，示例代码如下：
<form name="input" enctype="multipart/form-data" method="post"> <fieldset> <legend>用户注册</legend> <p> <label for="username">用户名:</label> <input type="text" name="username"> </p> <p> <label for="password">密码:</label> <input type="password" name="password"> </p> <p>性别： 男 <input type="radio" name="sex" value="male" checked> 女 <input type="radio" name="sex" value="female"> </p> <p>兴趣爱好： 足球 <input type="checkbox" name="hobby" value="football" checked> 篮球 <input type="checkbox" name="hobby" value="basketball"> 斯诺克 <input type="checkbox" name="hobby" value="snooker"> 一个disabled示例 <input type="checkbox" name="hobby" value="xxx" disabled> </p> <p>地址： <select name="province" size="2"> <!--添加multiple为多选--> <optgroup label="中国"> <option value="henan"> 河南</option> <option value="hebei">河北</option> <option value="hunan">湖南</option> <option value="hubei">湖北</option> <option value="sichuan">四川</option> </optgroup> </select> </p> <p>备注：<textarea name = "comment" rows="2" cols="60"> </textarea></p> <p>头像上传：<input type="file" name="pic" accept=".png, .jpg, .gif "/></p> <!--accept属性可以设置文件选择框中的文件筛选器--> <p><input type="reset"></p> <!--重置--> <p><input type="button" value="button提交"></p> <p><input type="submit" value="submit提交"></p> </fieldset> </form>
显示效果如下：
六 其他
6.1 标签的分类
- 块级标签：独占一行，比如：<hn>、<p>、<div>、<ul>、<table>
- 内联标签：根据内容而定所占范围，比如：<sub>、<sup>、<br>、<span>、<img>
6.2 HTML 注释
<!-- 这是一个注释 -->
6.3 HTML空格符
 ：普通的英文半角空格
 / / ：普通的英文半角空格但不换行
　：中文全角空格 （一个中文宽度）
 ：半个中文宽度
 ：一个中文宽度
 ：四分之一中文宽度
相比平时的空格（ ）， 拥有不间断（non-breaking）特性。即连续的 会在同一行内显示。
即使有100个连续的nbsp，浏览器也不会把它们拆成两行。
浙公网安备 33010602011771号