HTML 基础
1. HTML 基础
1.1 HTML 标签
标签又称元素，是 HTML 的基本组成单位。从直观上，可以将标签分为双标签与单标签，绝大多数标签是双标签：
- 双标签：
<标签名>标签体</标签名>，第一个叫开始（开放）标签，第二个叫结束（闭合）标签。 - 单标签：
<标签名/>，其中 / 可省略。
标签名不区分大小写，但开发中推荐小写，更加规范。
<marquee>hello world!</marquee> <!-- 双标签 -->
<input> <!-- 单标签 -->1.2 标签属性
标签属性通常写在开始标签和单标签中，以 属性名:属性值 的形式出现，但有些特殊属性，以属性名的形式单独出现。
标签属性值应始终被包括在引号内，可使用单/双引号，并且属性、属性值对大小写不敏感，开发中推荐小写。
<marquee loop="1">hello world!</marquee>
<input disabled> <!-- 只有属性值 -->1.3 HTML 基本结构
html 标签是最外围标签，限定了文档的开始点和结束点。
head 标签用于定义文档头部，描述了文档的各种属性和信息，包括文档的标题，在 Web 中的位置以及和其它文档的关系。
body 标签定义文档的主体，包含了文档的所有内容（比如文本、超链接、图像、表格等），是用户可以直接观看到的内容。
1.4 HTML 文档声明
DOCTYPE 是文档类型（document type）的缩写，声明于 HTML 文档的最前面，是网页的必备组成部分，以避免浏览器的怪异模式。
1.5 HTML 编码
可以通过 meta 标签配合 charset 属性指定字符编码。
1.6 HTML 设置语言
在 html 标签中可以通过 lang 属性设置语言，浏览器显示对应的翻译提示，也有利于搜索引擎优化。
1.7 HTML 标准结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>hello</title>
</head>
<body>
<p>这是一段文字</p>
</body>
</html>2. 标签
2.1 排版标签
<h1>到<h6>是标题标签，<h1>最好只写一个，其它能多写。<p>是段落标签。div标签没有整体含义，用于整体布局。- 标题标签不能互相嵌套，段落标签内不能有
<h1>到<h6>，<p>以及<div>。
2.2 语义化标签
语义化标签就是用特定标签去表达特定的含义，比如标题标签、段落标签，优势如下：
- 代码结构清晰，可读性强。
- 有利于 SEO 优化。
- 方便设备解析（如屏幕阅读器）。
2.3 块级元素和行内元素
- 块级元素（如排版标签）独占一行，行内元素（如
<input>）不独占一行。 - 块级元素中能写行内元素和几乎全部的块级元素，行内元素中能写行内元素，但不能写块级元素。
<h1>到<h6>不能相互嵌套，<p>中不要写块级标签。
2.4 文本标签
文本标签通常用于包裹词汇、短语等，写在排版标签里，相对排版标签来说，文本标签更微观（词汇、短语），常见文本标签有：
<em>：表示要着重阅读的内容，双标签。<strong>：十分重要的内容，语气比<em>强，双标签。<span>：没有语义，用于包裹短语的通用容器，双标签。
2.5 图片标签
图片标签： <img>，单标签。
常用属性：
src：图片路径。alt：图片描述，便于搜索引擎了解图片内容，当图片无法访问时，部分浏览器会显示alt的值。width：图片宽度，设定后高度会等比例缩放。height：图片高度，设定后宽度会等比例缩放。
常见图片格式：
- jpg：一种有损的压缩格式，支持颜色丰富、占用空间较小，不支持透明背景，适合对细节没有极高要求的场景。
- png：一种无损压缩格式、支持颜色丰富、支持透明背景，占用空间略大。
- bmp：不进行压缩的格式，保留的细节更多，占用空间极大。
- gif：仅支持256种颜色、支持简单透明背景、支持动图。
- webp：专门用来在网页中呈现图片，具备上述几种格式的优点，但兼容性不太好。
- base64 格式：把图片进行
base64编码，形成一段文本，直接作为img标签的src属性值即可，使用场景：比较小的，需要和网页一起加载的图片。
2.6 超链接
超链接：<a> 标签，双标签。
常用属性：
href：要跳转的具体路径。target：跳转时如何打开页面，默认为_self，在本页中打开，设为_blank，在新标签页打开。
注意：<a> 标签是行内元素，但它可以包裹除它之外的任何元素。
跳转文件
可以通过 <a> 标签来打开文件，有些格式（jpg、MP4、GIF、PDF等）浏览器能直接打开，浏览器不能打开的文件，会自动触发下载。
如果想强制触发下载，需要设置 download 属性，属性值即为下载文件的名称，如：
<a href="./resource/天下无贼.mp4" target="_self" download="电影.mp4">下载电影</a>跳转锚点
锚点就是网页中的一个标记点，通过 <a> 标签可以跳转到网页的指定位置。
具体方式：
- 设置锚点：
<!-- 方式一：a标签配合name属性 -->
<a name="test1"></a>
<!-- 方式二：其它标签配合id属性 -->
<a id="test2">锚点位</a>
<!-- 具有 href 属性的是超链接，具有 name 属性的是锚点 -->
<!-- name 和 id 都区分大小写，且 id 最好别是数字开头 -->- 跳转锚点：
<!-- 跳转到test1锚点 -->
<a href="#test1">去test1锚点位</a>
<!-- 跳转到页面顶部 -->
<a href="#">回到顶部</a>
<!-- 刷新本页面 -->
<a href=" ">刷新本页面</a>
<!-- 执行一段js，不知道执行什么，可以留空，javascript: ; -->
<a href="javascript:alert(1);">点我弹窗</a>唤起指定应用
<a href="tel:10010">电话联系</a
<a href="mailto:1234567@qq.com">邮件联系</a
<a href="sms:1234567@qq.com">短信联系</a2.7 列表
有序列表
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>无序列表
<ul>
<li>长沙</li>
<li>衡阳</li>
<li>岳阳</li>
</ul>列表嵌套
可以在 <li> 标签中嵌套子列表，建议最多嵌套三层：
<ul>
<li>长沙</li>
<li>
<span>衡阳</span>
<ul>
<li>蒸湘区<li>
<li>石鼓区<li>
<li>高新区<li>
</ul>
</li>
<li>岳阳</li>
</ul><li> 标签最好写在 <ul> 或 <ol> 中，不要单独使用。
自定义列表
自定义列表就是包含术语名称和术语描述的列表，一个 <dl> 就是一个自定义列表，dt 就是术语名称，dd 就是术语描述（可以有多个）。
<dl>
<dt>做笔记</dt>
<dl>笔记可以是电子版</dl>
<dl>笔记也可以是纸质版</dl>
</dl>2.8 表格
表格：<table>，双标签。
常用属性：
width：设置表格宽度。height：设置表格最小高度，表格最终高度可能比设置的大。border：设置表格边框宽度，仅控制最外侧边框，不控制单元格边框。cellspacing：设置单元格之间的间距。
表格标题：<caption>，双标签。
表格头部：<thead>，双标签。
常用属性：
height：设置表格头部高度。align：设置单元格水平对齐方式（left/center/rught）。valign：设置单元格的垂直对齐方式（top/middle/bottom）。
表格主体：<tbody>，双标签，常用属性与 thead 相同。
表格注脚：tfoot<>，双标签，常用属性与 thead 相同。
表格行：<tr>，双标签，常用属性与 thead 相同。
单元格：<th>、<td>，双标签，表头中用 <th>，表格主体、脚注中用 <td>。
常用属性：
width：设置单元格宽度，同列单元格均受影响。height：设置单元格高度，同行单元格均影响。align：设置单元格水平对齐方式。valign：设置单元格垂直对齐方式。rowspan：指定要跨的行数。colspan：指定要跨的列数。
2.9 几个常用标签
<br>：换行。<hr>：分割线。<pre>：按原文显示，不会对空格进行处理，通常用来嵌入代码。
2.10 表单
通过 <form> 标签来创建表单，常用属性如下：
action：用于指定表单的提交地址。target：用于控制表单提交后如何打开页面，类似<a>标签。method：用于控制表单的提交方式，GET和POST。
表单常用控件 文本框和密码框：将 input 标签的 type 属性设为 text 则为文本框，设为 password 则为密码输入框，常用属性如下：
name：设置数据的名称。value：设置输入框默认输入值。maxlength：输入框最大可输入长度。
单选框：将 input 标签的 type 属性设为 radio 则为单选框，常用属性如下：
name属性：数据名称，想要单选效果，多个radio的name属性值要一致。value：提交的数据值，必须设置。checked：让该单选框默认选中。
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="fmale">女复选框：将 input 标签的 type 属性设为 checkbox 则为复选框，常用属性如下：
name属性：数据名称。value：提交的数据值，必须设置。checked：让该复选框默认选中。
<input type="checkbox" name="hobby" value="swiming">游泳
<input type="checkbox" name="hobby" value="running">跑步
<input type="checkbox" name="hobby" value="shopping">购物隐藏域：将 input 标签的 type 属性设为 hidden，是用户不可见的区域，作用是提交表单时携带一些固定数据，常用属性如下：
name：数据名称。value：提交的数据值。
<input type="hidden" name="tag" value="100">提交按钮：将 input 标签的 type 属性设为 submit，与 <button> 标签的区别如下：
<input>标签编写的提交按钮要使用value属性指定按钮文字。- 二者都不要指定
name属性。 <button>标签type属性默认值是submit。
<input type="submit" value="提交">
<button>提交</button>重置按钮：将 input 标签的 type 属性设为 reset 则为重置按钮，通过 value 属性指定按钮文字，也可以将 button 标签的 type 属性设为 reset 来设置重置按钮，同样不需要 name 属性。
<input type="reset" value="重置">
<button type="reset">提交</button>普通按钮：将 button 标签的 type 属性设为 button 则为普通按钮，若不写 type 会引起表单提交。
文本域：<textarea> 标签，双标签，常用属性如下：
rows属性指定默认显示的行数，cols属性指定默认显示的列数。- 不能指定
type属性，其它属性与普通文本框一致。
下拉框：<select> 和 <option> 标签，都是双标签，常用属性如下：
- 在
<select>标签中设置name属性指定数据名，在<option>标签中设定value属性，没设置则提交<option>标签中间的文字，设置了则提交value值。 <option>标签设置selected属性，该标签默认被选中。
禁用表单控件
给表单控件标签设置 disabled 可以禁用该控件。
label 标签label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种关联方式：
- 让
label标签的for属性的值等于表单控件的id。 - 把表单控件和文字套在
label标签里。
2.11 框架标签
框架标签：<iframe>，双标签。通过框架标签，可以在网页中嵌入广告，也可以与超链接和表单配合，展示不同的内容，常用属性如下：
name：框架的名字，可以去a标签和表单的target属性配合使用。width和height分别设置宽和高，frameborder可以设置是否显示边框。
2.12 字符实体
通过字符实体，可以渲染一些特殊的符号，如大于号，小于号，常见的字符实体有：空格 ，大于号 >，小于号 <，版权 ©， 元 ¥ 等。
2.13 HTML 全局属性
常见的全局属性有 id, class，style，dir，title 和 lang，其中 dir 可以控制内容的方向，title 可以给标签设置一个文字提示，lang 可以给标签设置语言，这些属性都不要在 <head>、<meta>、<script>、<style>、<title> 标签中使用。
2.14 meta 元信息
配置字符编码：
<meta charset="utf-8">针对 IE 浏览器的兼容性配置：
<meta http-equiv='X-UA-Compatible' content="IE-edge>针对移动端配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">配置网页关键字：
<meta name="keywords" content="8-12个关键字，英文逗号隔开">配置网页描述信息：
<meta name="description" content="对网站的描述">