写在最前：前面两章的内容基本全是概念，主要供了解，有需要时再翻看。疫情来了，要在家办公，我代码都在公司呢（悲），都怪我上周还差一点没写完，重新来吧，大家也小心一点，非必要尽量少出门，努力学习，努力工作，加油！
系列目录
三、HTML基础
3.1 HTML文档的基本结构和语法
3.1.1 HTML的概念
HTML（Hyper Text Markup Language）称为超文本标记语言，1990年创立的，是一种标识性的语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML标记组成的描述性文本，
HTML不是编程语言，而是标记语言（是一套标记标签）。
HTML标记可以说明文字，图形，动画，声音，表格，链接等。
HTML文档也叫web页面，通过一系列标签，来显示网页的不同效果，不同部分，浏览器是html的解析器，解析html的文件，然后在浏览器窗口中展示解析页面。
3.1.2 HTML的文档结构
HTML文档结构一般包括标记（Html）、头部（Head）、主体（Body）三部分。
标记<html></html>: 说明该文件是用超文本标记语言来描述的，它是文件的开头，而</html>则表示该文件的结尾，它们是超文本标记语言的开始标记和结尾标记。定义了整个文档。
头部<head></head>: 表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。
主体<body></body>: 网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。 定义了HTML的主体
HTML文档描述网页，包含HTML标签和纯文本，也被成为网页。
3.1.3 HTML代码的规范
HTML的注释： <!-- 注释文字 -->
注释的原则是有助于对程序的阅读理解，注释语言必须准确、移动、简洁。
HTML标记不分大小写，建议小写。如：<font>,<Font>,<fOnt>
HTML标记属性可有可无，有的标记没有属性。如：<html>,<head>,<title>等
双标签的内容在开始和结束标签之前，单标签没有内容
HTML标签可以互相嵌套，但一定要注意顺序嵌套，外层套内层，一层套一层
3.1.4 标记分类
单标记：标记只有一个，不是修饰内容的而是显示某个功能的，如果有图片，设置编码，设置关键字等。
双标记：是修饰内容的标记，有开始有结束标记，中间要写修饰内容。
3.1.5 行内元素和块级元素
这个在面试中经常被问到
行内元素：标签范围在一行显示，超出换行a、b、span、img、input、strong、select、em、button、textarea
块级元素：标签范围占据一行，div、ul、li、dl、dt、dd、p、h1-h6、table等
空元素：即没有内容的HTML元素，br、meta、hr、link、input、img
拓展：使用display可以实现元素之间互相转换
（1）display：inline 转换为行内元素
（2）display：block 转换为块级元素
（3）display：inline-block 转换为行内块状元素
3.2 HTML常用元素及其基本属性
如果大家单看标签无法理解其作用，可以自己试一下。
| 结构元素 | 功能：用于构建网页文档结构，多指块状元素 |
|---|---|
| div | 在文档中定义一块区域，即包含框、容器 |
| ol | 根据一定的排序进行列表 |
| ul | 没有排序的列表 |
| li | 每条列表项 |
| dl | 以定义的方式进行列表 |
| dt | 定义列表中的词条 |
| dd | 对定义的词条进行解释 |
| del | 定义删除的文本 |
| ins | 定义插入的文本 |
| h1-h6 | 标题1到标题6（由大到小），定义不同级别的标题 |
| p | 定义段落结构 |
| hr | 定义水平线 |
| 内容元素 | 功能：定义了元素在文档中表示内容的语义，一般只文本格式化元素，多是行内元素 |
| span | 在文本行中定义一个区域，即行内包含框 |
| a | 定义超链接 |
| abbr | 定义缩写词 |
| address | 定义地址 |
| dfn | 定义术语，以斜体显示 |
| kbd | 定义键盘键 |
| samp | 定义样本 |
| var | 定义变量 |
| tt | 定义打印机字体 |
| code | 定义计算机源代码 |
| pre | 定义预定义格式文本，保留源代码格式 |
| blockquote | 定义大块内容引用 |
| cite | 定义引文 |
| q | 定义引用短语 |
| strong | 定义重要文本 |
| em | 定义文本为重要 |
| 修饰元素 | 修饰元素定义了文本的显示效果 |
| b | 视觉提醒，显示为粗体 |
| i | 语气强调，显示为斜体 |
| big | 定义较大文本 |
| small | 表示细则一类的旁注，文本缩小显示 |
| sup | 定义上标 |
| sub | 定义下标 |
| bdi和bdo | 定义文本显示方向 |
| br | 定义换行 |
| u | 非文本注解，显示下划线 |
| 已经废除的修饰元素 | 上面有些元素在HTML5的时候也已经被废除了，请通过css去实现 |
| center | 定义文本居中 |
| font | 定义文字的样式、大小和颜色 |
| s | 定义删除线，strike缩写 |
| strike | 定义删除线 |
3.3 HTML元素的具体实现
我没想到我写了三天才把所有的内容写完，我写代码速度好垃圾啊（悲），然后常用的基本都提到了，因为代码太多了，所以有些代码我就用图片展示，真正的代码包附在最后，强烈建议大家自己下载下来，就算不试试，看看代码也能有所收获。
我是用的Edge展示的，不同浏览器可能会有所不同
3.3.1 div和span
<!-- div和span -->
<div class="divbolder" id="div">这是div,块级标签，会占据一整行，划分网页结构</div>
<span class="span1">这是span，行内标签，在文本行中定义一个区域</span>
<hr>我定义了一个样式表，主要是为了展示两者不同的范围
3.3.2 转义字符
<!-- 转义字符 -->
<div id="nbsp">
<dl>
<dt><h3>转义字符</h3></dt>
<dd><p>" " & nbsp：提供空格</p></dd>
<dd><p>"<" & lt: 提供左边尖括号</p></dd>
<dd><p>">" & gt: 提供右边尖括号</p></dd>
<dd> <p>"©" & copy: 提供备案符号</p> </dd>
<dd><p>"&" & amp: 提供和号</p> </dd>
<dd><p>"¥" & yen: 提供人民币</p> </dd>
<dd><p>"®" & reg: 提供商标符号</p> </dd>
<dd><p>"5°" & deg: 提供摄氏度符号</p> </dd>
<dd> <p>"5±" & plusmn: 提供正负号</p> </dd>
<dd> <p>"5×4" & times: 提供乘号</p> </dd>
<dd> <p>"5÷4" & divide: 提供除号</p> </dd>
<dd> <p>"5²" & sup2: 提供平方上标</p> </dd>
<dd> <p>"5³" & sup3: 提供立方上标</p> </dd>
</dl>
</div>网页中具体显示：
3.3.3 段落标签，文本标题标签，定义删除文本，定义插入文本，水平线
<!-- 段落标签，文本标题标签，定义删除文本，定义插入文本，水平线 -->
<div id="p">
<dl>
<dt><h3>段落元素 <p></h3></dt>
<dd><p>定义段落结构，是块级标签，<span style="color: red;">两端文字间会多一行</span></p></dd>
</dl>
<div class="likehrtwo"></div>
<dl>
<dt><h3>文本标题元素 <h1>~<h6></h3></dt>
<dd>
<h1>这是h1标签（一个网页最好只定义一个h1标签）</h1>
<h2>这是h2标签（标题标签之间间隔，文字大小，粗细都是固定的）</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
</dd>
</dl>
<div class="likehrtwo"></div>
<dl>
<dt><h3>删除文本元素 <del></h3></dt>
<dd><del>行级元素，标签内的文字会被删除</del> 标签外的元素不受影响 </dd>
</dl>
<div class="likehrtwo"></div>
<dl>
<dt><h3>插入文本元素 <ins></h3></dt>
<dd><ins>行级元素，标签内的文字会附带下划线</ins> </dd>
</dl>
<div class="likehrtwo"></div>
<dl>
<dt><h3>水平线 <hr></h3></dt>
<dd>
<hr>
<div class="likehr"></div>
<p>是一个单标签，不包含文本内容，用border-bottom: 1px solid可以模仿，<span style="color: red;">但是是在底部而不是居中</span>，对<hr>也可以设置样式</p>
</dd>
</dl>
</div>其中
<div class="likehrtwo"></div> 是定义一条水平虚线，没有实际意义网页中具体显示：
3.3.4 有序列表，无序列表，自定义列表
<!-- 有序列表，无序列表，自定义列表 -->
<div id="ul">
<ul>
<li> <h3>无序列表</h3> </li>
<li>列表本身是块级元素</li>
<ul>
<li>列表可以嵌套</li>
</ul>
<li>已经废弃type定义样式，而是使用css定义</li>
<ul>
<li>在<span style="color: red;">ul</span>上定义的是整个列表的样式，在<span style="color: red;">li</span>上定义的是单个选项的样式</li>
<li style="list-style-type: circle;"><code>style="list-style-type:circle"</code>定义空心圆</li>
<li style="list-style-type: disc;"><code>style="list-style-type:disc"</code>定义实心圆</li>
<li style="list-style-type: square;"><code>style="list-style-type:square"</code>定义实心方块</li>
</ul>
</ul>
<div class="likehrtwo"></div>
<ol>
<li><h3>有序列表</h3></li>
<li>默认使用小写数字，从1开始记录</li>
<ol start="2" type="A">
<li><code>start="2"</code>通过start=" "可以规定排序首字母的大小</li>
<li>嵌套表格内部的顺序、样式与外部无关</li>
</ol>
<li>通过type定义样式</li>
<ol>
<li>虽然在ol和li标签上都可以定义样式，但是应该在ol上定义最好</li>
<li type="a"><code>type="a"</code>定义小写字母编号</li>
<li type="A"><code>type="A"</code>定义大写字母编号</li>
<li type="i"><code>type="i"</code>定义小写罗马数字编号</li>
<li type="I"><code>type="I"</code>定义大写罗马数字编号</li>
<li type="1"><code>type="1"</code>定义数字编号</li>
</ol>
</ol>
<div class="likehrtwo"></div>
<dl>
<dt><h3>自定义列表</h3></dt>
<dd>具体的样式通过css定义</dd>
<dt><dt>标签表示标题</dt>
<dd><dd>标签表示内容</dd>
</dl>
</div>网页中具体显示：
3.3.5 文本格式化元素
大多数都是3.2中提出的内容元素，通过一首诗来显示不同元素之间的区别
<!-- 文本格式化标签 -->
<div id="abbr">
<ul>
<li>
<h3>内容元素中修饰文本样式的元素，多为行内元素</h3>
</li>
<ul style="list-style-type: circle;">
<li><abbr>将进酒</abbr></li>
<li style="list-style-type: disc;"><code>abbr:</code>定义缩写词</li>
<div class="likehrtwo"></div>
<li><address>李白 〔唐代〕</address></li>
<li style="list-style-type: disc;"><code>address:</code>定义地址</li>
<div class="likehrtwo"></div>
<li><dfn>君不见黄河之水天上来，奔流到海不复回。</dfn></li>
<li style="list-style-type: disc;"><code>dfn:</code>定义术语，以斜体显示</li>
<div class="likehrtwo"></div>
<li><kbd>君不见高堂明镜悲白发，朝如青丝暮成雪。</kbd></li>
<li style="list-style-type: disc;"><code>kbd:</code>定义键盘键</li>
<div class="likehrtwo"></div>
<li><samp>人生得意须尽欢，莫使金樽空对月。</samp></li>
<li style="list-style-type: disc;"><code>samp:</code>定义样本</li>
<div class="likehrtwo"></div>
<li><var>天生我材必有用，千金散尽还复来。</var></li>
<li style="list-style-type: disc;"><code>var:</code>定义变量</li>
<div class="likehrtwo"></div>
<li><tt>烹羊宰牛且为乐，会须一饮三百杯。</tt></li>
<li style="list-style-type: disc;"><span style="color: red;"><code>tt:</code>定义打印机字体（HTML5已经不再使用）</span></li>
<div class="likehrtwo"></div>
<li><code>岑夫子，丹丘生，将进酒，杯莫停。</code></li>
<li style="list-style-type: disc;"><code>code:</code>定义计算机源代码</li>
<div class="likehrtwo"></div>
<li><pre>与君歌一曲，请君为我倾耳听。</pre></li>
<li style="list-style-type: disc;"><code>pre:</code>定义预定义格式文本，保留源代码格式</li>
<div class="likehrtwo"></div>
<li>
<blockquote>钟鼓馔玉不足贵，但愿长醉不愿醒</blockquote>
</li>
<li style="list-style-type: disc;"><code>blocquote:</code>定义大块内容引用</li>
<div class="likehrtwo"></div>
<li><cite>古来圣贤皆寂寞，惟有饮者留其名。</cite></li>
<li style="list-style-type: disc;"><code>cite:</code>定义引文</li>
<div class="likehrtwo"></div>
<li><q>陈王昔时宴平乐，斗酒十千恣欢谑。</q></li>
<li style="list-style-type: disc;"><code>q:</code>定义引用短语</li>
<div class="likehrtwo"></div>
<li><strong>主人何为言少钱，径须沽取对君酌。</strong></li>
<li style="list-style-type: disc;"><code>strong:</code>定义重要文本</li>
<div class="likehrtwo"></div>
<li><em>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</em></li>
<li style="list-style-type: disc;"><code>em:</code>定义文本为重要</li>
</ul>
</ul>
</div>网页中具体显示：
3.3.6 超连接标签
代码内容太多了，就大概给个图，具体内容再后面自己了解
网页中具体显示：
3.3.7 图像标签
图片可以存在本地或者网络图片
<!-- 图像标签（title属性可以放在里面） -->
<div id="img">
<ul>
<li>
<h3>图像标签<img>,单标签</h3>
</li>
<ul>
<li>
<h4>图像相关属性</h4>
<ul>
<li><code>src</code>:必要条件，图像的路径和文件名 </li>
<li><code>alt</code>:替换文本，图像不能显示时的文字 </li>
<li><code>title</code><span style="color: indianred;">提示文字，鼠标放在图像上，显示的文字（也可用于其他标签）</span> </li>
<li><code>width</code>:设置图像的宽度 </li>
<li><code>height</code>:设置图像的长度 </li>
<li><code>border</code>:<span style="color: red;">设置图像的边框（目前已经被废弃，使用css去设置）</span> </li>
</ul>
</li>
<li>
<h4>图像演示</h4>
<ul>
<li><img src="../IMGAE/flowers.JPG" alt="抱歉，图片地址错误或者您没有这张图" title="群花盛开"></li>
<li><code><img src="../IMGAE/flowers.JPG" alt="抱歉，图片地址错误或者您没有这张图" title="群花盛开"></code>通过地址访问本地图片</li>
<li><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="抱歉，网站下架的图片或者您没有联网" title="百度图片"></li>
<li><code><src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="抱歉，网站下架的图片或者您没有联网" title="百度图片"></code>通过网络地址访问网络图片</li>
</ul>
</li>
</ul>
</ul>
</div>网页中具体显示：
3.3.8 表格元素
代码量也太多了，不展示了
网页中具体显示：
3.3.9 表单元素
<!-- 表单相关控件 -->
<div id="input">
<ul>
<li>
<h3>表单相关控件</h3>
</li>
<ul>
<li><b>表单由表单域、表单控件和提示信息组成</b></li>
<li><code><form></code>，规定了表单域的大小</li>
<li><code>action="url"</code>，定义在form上，是一个接口，表示该表单该提交到哪</li>
<li><code>method="get/post"</code>，表示该表单的数据提交方法</li>
<li><code>name="名称"</code>，表示该表单的名称</li>
<ul>
<li><b>input框的类型</b></li>
<li><code>type=" "</code>，表示类型</li>
<li><code>value=" "</code>，表示文本框信息</li>
<li><code>maxlength=" "</code>，表示能输入的最大长度，以字符计算</li>
<li><code>size=" "</code>，表示控件的大小（长度，宽度）</li>
<li><code>placeholder=" "</code>，帮助用户填写输入字段的提示</li>
<ul>
<li><b>具体input框的运用</b></li>
<li><code><input type="text"></code>,表示文本框</li>
<li><code><input type="password"></code>,表示密码框</li>
<li><code><input type="button"></code>,表示按钮</li>
<li><code><input type="reset" value="重置按钮"></code>,表示重置按钮</li>
<li><code><input type="submit" value="登录按钮"></code>,表示提交按钮</li>
<li><code><input type="radio"></code>,表示单选</li>
<li><code><input type="checkbox"></code>,表示多选</li>
<li><code><input type="file"></code>,表示获取文件</li>
<li><code><input type="image"></code>,图片提交按钮</li>
</ul>
<li><b>select框信息</b></li>
<li><code>name=" "</code>，选择框的名称</li>
<li><code>id=" "</code>，名称</li>
<li><b>textarea文本框</b></li>
<li><code>name=" ",cols=" ",rows=" "</code>，文本框的名称，行数和列数</li>
</ul>
</ul>
网页中具体显示：
扩展：实现一个表单的设计
<form style="border: 1px dashed gray; width: 500px; text-align: center;">
<h4>用户调研表单</h4>
<p>姓名：
<input type="text" placeholder="请输入姓名..">
</p>
<p>
密码：
<input type="password" placeholder="请输入密码..">
</p>
<p>
性别：
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</p>
<p>
曾停留城市：
<input type="checkbox" name="city">北京
<input type="checkbox" name="city">上海
<input type="checkbox" name="city">广州
<input type="checkbox" name="city">深圳
<input type="checkbox" name="city">成都
</p>
<p>
请提交相关健康宝信息：
<input type="file">
</p>
<p>
籍贯：
<select name="民族">
<option>请选择民族</option>
<option>汉族</option>
<option>蒙古族</option>
<option>满族</option>
<option>朝鲜族</option>
<option>回族</option>
<option>土族</option>
<option>彝族</option>
<option>白族</option>
<option>苗族</option>
</select>
</p>
<p>
请输入相关留言
<textarea name="信息" cols="40" rows="5"></textarea>
</p>
<p>
图片提交按钮，同时会返回网页图片位置
<input type="image" src="../IMGAE/button.JPG" width="100px" height="100px">
</p>
<p>
<input type="reset" value="重置">
<input type="submit" value="保存">
</p>
</form>网页中具体显示：
第三章练习题
练习题同样很简单
| 题目 | 答案 |
|---|---|
| HTML是一种标记语言，它是由（ ）解释执行的 | 浏览器 |
| 在HTML文档中用于表示页面标题的标记对是（ ） | <title></title> |
| 在HTML文档中用于表示表格的标记对是（ ） | <table></table> |
| 在HTML中使用的注释符号是（ ） | <!-- --> |
| 为了标识一个HTML文件，应该使用的HTML标记是（ ） | <html></html> |
| 在下列的HTML中，哪个是最大的标题（ ） | <h1> |
| 在HTML中要定义一个书签，应该使用的语句是（ ） | <a name=" ">text</a> |
| 如果要在表单中创建一个普通文本框，下列标记中正确的是（ ） | <input type= "text"> |
| 不属于行内元素的是（ ） | <div> |
| 正确制作电子邮件连接是（ ） | <a herf=" mailto : xxx@yyy"> |
| 以下选项中，全部都是表格标记的是（ ） | <table><tr><td> |
| 下列语句中，能产生带有数字列表符号的列表标记是（ ） | <ol> |
| 在下列选项中，正确地产生文本区（textarea）的标记是（ ） | <textarea> |
1904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
