简介 HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
参考资料
初识HTML 简介
什么是HTML? –> HTML是Hyper Text Markup Language的缩写,中文：超文本标记语言
HTML并不是一门编程语言 编程语言的关键是逻辑，例如有条件选择 if else
HTML是用来构建网页元素的标记语言 文本段落、表格、图片
目前看到的所有网站，都是由 html 元素构成
编程语言例如们 javaScript 用来写页面逻辑、调用接口、操作&连接数据库等
在做 WEB 开发时，HTML是最基础和最必须要了解的 只使用HTML就可以构建简单网页
HTML+CSS+JavaScript:组成了WEB开发的基石
把整个人当做成一个WEB
HTML: 就是由各种元素组成的人的身体 body 手、脚、眼睛、耳朵 各种不同的标签
CSS: 决定人身体的外观和布局，眼睛张在哪里，单眼皮还是双眼，多高多重，还可以给人元素加上各种各样的样式美化，就像人一样穿上好看的衣服和化着美美的妆
JavaScript:决定行为、动作、让人动起来，不然再好看的 HTML+CSS 也是静态的死的
开发环境准备
html 的开发只需要一个 文本编辑器或 IDE 工具（用于写代码）外加一个浏览器用来查看效果
浏览器一般用 chrome ,文本编辑器看自己习惯吧，比如 sublime Text vsCode 或者其它的 IDE 工具
HTML 的好处是我们不需要使用其他的环境和服务，只需要创建一个以 .html 为后缀的文件，然后使用浏览器打开就可以了
首页 HTML 文件一般是 index.html ，如果你部署了一个 www.xxx.com 根域名默认显示 index.html 中的内容，当然也是可以自行配置的
结构
<!DOCTYPE html> 文档声明告诉浏览器我是一个 html 文件<html></html> 该标签是 HTML 根元素<head></head> HTML 头一般放入原数据，或者是搜索引擎的 keyword title 脚本 css文件链接 meta标签是一个辅助性的标签<body></body> HTML body 体内放入 HTML 元素，我们页面上的内容也就是 body 体内的内容了
1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > Document</title > </head > <body > </body > </html >
HTML元素（Element）
Element 元素的结构由 开始标签+内容+结束标签 组成，一个完整的元素都是由开始标签和结束标签成对出现，结束标签多了一个斜杠
在 HTML5 中 没有内容时就可以使用自闭标签 比如 <tagname/> 或者 <tagname>（HTML5 中支持这种自闭合的写法）
默认的自闭合标签 <br> <hr> <input> ...
HTML 标签还有属性，属性的规则为 属性名="属性值"
HTML 元素分为块状元素 和 行内元素 块状元素的宽度是 100% 独占一行 行内元素不会独占一行（最简单的方法就是加个 <br> 标签换行）
更多元素和属性查看 mozilla
示例
H1 H2 是块状元素独占一行行内元素最简单的方式通过 br 标签换行
img 标签可以设置宽度和 alt 属性 img 标签也是行内元素 src 设置图片路径可以是本地文件(./ 表示当前路径)，也可以是 http 路径a 标签是超链接标签 也是一个行内元素 加上 target 属性 view_window 或者 _blank 在新窗口打开超链接
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > Title</title > </head > <body > <h1 > 这是一个 H1 标签</h1 > <h2 > 这是一个 H2 标签</h2 > <img src ="./00.png" alt ="当图片不存在时显示这里的内容" > <img src ="./image-20220512165150400.png" alt ="当图片不存在时显示这里的内容" width ="400px" > <br > <a href ="www.adalucky.com" target ="view_window" > 个人博客</a > <a href ="www.adalucky.com" target ="_blank" > 个人博客</a > </body > </html >
标签属性
title 属性，鼠标移动到标签上，会显示 title 的属性值，类似于 hover 做一些说明，title属性不占据页面内容，当鼠标滑动停留时显示
aling="center" 水平居中 ，比如标题标签居中显示
img 下的 alt 属性，图片加载失败或者破图可以作为一个提示让用户也知道这是一张表达什么作用内容的图片，alt 会占据内容，只有当图片加载不了才会显示
超链接标签
a 标签下的 target 属性可决定超链接在当前窗口还是新窗口打开，不定义默认是当前窗口 target="_self" 当前页面 target="_blank" 新窗口
锚点又叫做命名标记，就像一个迅速定位器，比如手机通讯录或者微信右侧的字母，可以通过首字母快速定位到某一姓名首字母相同的人，可以实现在页面内进行跳转，目的地标签上加上 id 属性，然后再 a 标签的 href属性通过 #id的属性名进行绑定，例如 <a href="#P2">CSS</a>
文本标签
文本通过通过 <b>需要加粗的文本</b> <strong>需要加粗且重要的文本</strong> 这两者进行文本加粗，区别在于 b 标签只是加粗，strong 标签语义化更强，表示该文本比较重要，提醒阅读者注意，盲人朋友使用阅读设备时会加重该标签内的读音
文本倾斜通过 i（italic 斜体的） 或者 em (emphasize 强调) 标签来实现，<i>待修饰倾斜的文本</i> <em>待修饰倾斜的文本</em>,i标签仅仅为了让字体显示倾斜，没有强调的语义，em标签不仅能让字体显示倾斜，还可以加强语气，还可以让百度等搜素引擎爬取我们的页面时特别收录 em 中的文本,以便于别人从百度中搜索 em 中的关键字时，让我们的页面优先曝光
删除线可用 s(strike 取消 删除) 或者 del(delete 删除 划掉) 如 删除线<s>删除线文本</s> <del>删除线文本</del> html5 已经不支持 s 标签了，所以用 del 吧
文本添加下划线通过 u（underline 下划线）标签实现,例如 待修饰下划线的文本 <u>待修饰下划线的文本</u>
角标分为 sup(superscript 上角标) sub(subscript 下角标) 示例：41o C H2 O15
列表标签 简介
有序列表
有序列表由两个元素组成 ol（order list 有序列表） 和 li（list item 列表） 二者是父子关系
遵循 W3C 的规范,ol 标签下只能嵌套 li 标签,如果要嵌套其它标签，也只能放在 li 标签里面
列表前面的序号被称为项目符号,有序列表的序号默认从自然数 1 开始
W3C 为了兼顾多语种的需求,规定了项目符号是可以通过 type属性 设置,type 的取值范围【A,a,I,i,1】分别表示大小写字母顺序,大小写罗马数字顺序，阿拉伯数字顺序
有序列表不光能更换项目符号，还能更换起始序号可以通过 start属性 设置
无序列表
无序列表：指列表中的内容是没有时间、空间或者逻辑等顺序要求的
如下方图片所示，每个人对事情的处理先后顺序标准都不一样，对于这种无顺序的内容就可以用无序列表来展示了
有序列表由两个元素组成 ul（unorder list 无序列表） 和 li（list item 列表） 二者是父子关系
和有序列表一样 ul 标签下只能嵌套 li 标签,如果要嵌套其它标签，也只能放在 li 标签里面
无序列表的默认项目符号是一个实心的圆点例如这样 –> ● 但是我们也可以通过 type属性 设置,type 的取值范围【disc,circle,square,none】分别表示【实心圆,空心圆,隐藏项目符号,实心方块】
自定义列表
自定义列表一般在网页的底部用的比较多，比如下图中的【帮助中学、服务支持等】
自定义列表由三个标签组成 dl dt dd 分别表示定义列表、定义术语（列表标题）、定义描述（列表内容）
注意：dt 和 dd 是 dl 的子标签 dt 和 dd 是兄弟标签 dd 和 dt 不能脱离 dl 单独使用
以下是一个简单的自定义列表的示例，如果要达到上面 little mi 的那种效果，后期可通过学习 css 进行完善
列表综合案例
  表示中文位置大小的空格 表示一个空格大小img 标签中直接添加 align="center" 属性并不能居中,因此 img 需要放在 p 标签中
自定义列表中的标题 dl 中不光是只用来放文本,也可以放图片,根据实际需求而定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > 综合案例</title > </head > <body > <h1 align ="center" > 综合案例</h1 > <p >     万里长城，龙脉绵延，是中华民族的骄傲，无论是“望长城内外惟余莽莽”的诗句，还是“万里长城永不倒”的歌谣，或是“巨龙横卧轮廓巍峨”的诗歌，无不展现着长城在中国人心中的分量。其实长城也是画家笔下永久的绘画题材，中国画中的国画长城有着很深的内在含义和许多美好的寓意，所以中国人喜欢画长城景色而后挂于厅堂，不但求吉祈福，还承载着中华悠悠历史和美好希冀以及勇敢无畏的中华魂。 </p > <p >     那么长城景色真的好入画吗?的确，若不是有实力的画家，真的无法将长城的雄风恢弘绘就而出。而当代山水画家王宁恰恰就做到了这一点，他用拙朴的笔法，表现出长城的沧桑与中华民族屹立东方的精神气质。他的国画长城作品粗放又不失秀逸，长城的雄风、恢弘大气之感油然而出。 </p > <p align ="center" > <img src ="./img.png" alt ="万里山河图片" width ="400px" > </p > <h1 > 费曼学习法</h1 > <ol > <li > <a href ="" > 将所学内容,迅速记录到一张纸上</a > </li > <li > <a href ="" > 练习教授别人</a > </li > <li > <a href ="" > 查漏补缺,找到不足之处</a > </li > <li > <a href ="" > 优化及完善</a > </li > </ol > <h1 > 小段子</h1 > <ul type ="square" > <li > 北冥有鱼,其名为鲲</li > <li > 鲲之大,一锅炖不下</li > <li > 化而为鸟,其名为鹏</li > <li > 鹏之大,需要两个烧烤架</li > <li > 一个秘制,一个麻辣</li > <li > 来瓶雪花,带你勇闯天涯</li > </ul > <div > <h1 > 图文混排</h1 > <df > <dl > <img src ="./img_1.png" alt ="我和我的祖国海报" width ="400px" > </dl > <dd > 电影名称: 《我和我的祖国》</dd > <dd > 主演: 黄渤,张译,葛优等</dd > <dd > 导演: 陈凯歌,张一白,徐峥等</dd > <dd > 类型: 剧情</dd > </df > </div > </body > </html >
表格 简介
在实际的工作中表格被大量广泛的使用,作为列表数据的展示
表格中中的元素分为: 行,列,单元格
表格用 table 标签定义,tr 和 td 标签分别表示行和列
一个普通的表格每个 tr 中的 td 个数是一致的
初体验
创建一个 4 行(tr) 5列(td)的表格,描述王者荣耀的英雄信息
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > example for table</title > </head > <body > <table > <tr > <td > <b > 序号</b > </td > <td > <b > 王者英雄</b > </td > <td > <b > 王者性别</b > </td > <td > <b > 所属位置</b > </td > <td > <b > 详情</b > </td > </tr > <tr > <td > 1</td > <td > 王昭君</td > <td > 女</td > <td > 中路</td > <td > <a href ="" > 点击查看详情</a > </td > </tr > <tr > <td > 2</td > <td > 亚瑟</td > <td > 男</td > <td > 中抗路</td > <td > <a href ="" > 点击查看详情</a > </td > </tr > <tr > <td > 3</td > <td > 虞姬</td > <td > 女</td > <td > 发育路</td > <td > <a href ="" > 点击查看详情</a > </td > </tr > </table > </body > </html >
表头加粗
在一般的使用中我们可能会希望给表头的文本进行一些加粗显示,上面的粗体验采用额通过 b标签 来实现,在 table 中有一个专门用来定义表头的 th 标签
th(table header cell 表头单元格),该标签下的文本会加粗并且居中显示
和上面相比我们把 <td><b>序号</b></td> 换成了 <th>序号</th> 同样实现了加粗效果并且居中显示
1 2 3 4 5 6 7 <tr> <th>序号</th> <th>王者英雄</th> <th>王者性别</th> <th>所属位置</th> <th>详情</th> </tr>
表格边框
上面的图片并没有边框线给每个单元格进行划分开,可以再 table 上添加 border 属性 进行指定边框大小
示例: <table border="1"> (目前这种方式表格边框的线是双边框线.下方的单元格间距将会描述)
表格宽高
通过 width 和 height 控制表格总体的宽高
示例: <table width="500px" height="150px"></table>
不难发现,它视乎会根据我们单元格内文本的宽度去分配列宽
单元格间距cellspacing
上面的表格边框章节我们可以看到单元格与单元格之间的线是两条线,究其缘由是因为单元格与单元格之间的间隙过大导致生成的
我们只需要通过 cellspacing 属性进行控制即可
示例: <table cellspacing="0"></table> 如果需要让单元格间距变大,增加 cellspacing 属性值即可
单元格文本间距cellpadding
cellpadding 可控制单元格与文本之间的距离,假设我们想要文本居左靠齐 我们只需要通过 cellpadding 属性进行控制即可
示例: <table cellpadding="0"></table>
如果需要让文本与单元格间距变大,增加 cellpadding 属性值即可
表格页面布局
这里指的是表格再页面上整体的位置，并不是指的单元格里面文本的对其方式
可以通过 align 属性控制,取值范围有【left、center、right】
表格和边框颜色
就像 Excel 中我们可以给单元格设置背景色填充，或者边框线的颜色
table 标签中通过 bgcolor bordercolor 两个属性实现单元格和框线的颜色填充
示例: <table bgcolor="yellow" bordercolor="red"></table> （表格黄色背景，红色边框）
单元行 tr 属性
height(单元行高度)、bgcolor(单元行背景颜色)、align(水平对其方式)、valign(垂直对其方式)
设置单元行的高度: height 属性设置当前行的高度,如果 table 设置了高度,我们给其中一个单元行设置了固定高度后，剩下的单元行会平分剩余高度
例如: 当前一个 4 行高的表格总体高度 300px 给第一行设置高度 150px,那么剩余 3 行平均每行 50px
设置单元行背景颜色遵循就近原则
可以给单元行设置文本对其方式,默认为水平居左，垂直居中
单元格
设置某一单元格的列宽(width),会影响所在列的列宽
设置某一单元格的行高(height),会影响所在行的行高
设置某一单元格的背景色(bgcolor),不会影响其它单元格
和单元行一样也可通过 align(水平对其方式)、valign(垂直对其方式) 两个属性设置当前所在的单元格的文本对其方式，默认水平居左，垂直居中
合并单元格
单元格的合并，脑海中回想一下 Excel 的合并，单元格和其一样，分为水平合并(横向合并)、垂直合并(纵向合并)
水平合并产生跨列从哪一列合并到哪一列，垂直合并产生跨行从哪一行合并到哪一行
单元格的垂直合并，就是列合并,需要从起始列的下一列开始,减少列数一直到终止列，然后在起始类通过 rowspan 跨行指定合并的个数
跨列合并也是一样，删除需要合并的单元格，然后在起始的单元格通过 colspan(column span) 跨列指定合并的个数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 <!DOCTYPE html> <html lang ="en" > <head > <meta charset ="UTF-8" > <title > example to cell merger</title > </head > <body > <table border ="1" cellspacing ="0" width ="500" height ="500" > <tr bgcolor ="deepskyblue" height ="30" > <th > </th > <th > 星期一</th > <th > 星期二</th > <th > 星期三</th > <th > 星期四</th > <th > 星期五</th > </tr > <tr bgcolor ="skyblue" height ="30" > <td > 早自习</td > <td > </td > <td > </td > <td > </td > <td > </td > <td > </td > </tr > <tr > <td bgcolor ="skyblue" rowspan ="4" > 上午</td > <td > </td > <td > </td > <td > </td > <td > </td > <td > </td > </tr > <tr bgcolor ="skyblue" > <td > </td > <td > </td > <td > </td > <td > </td > <td > </td > </tr > <tr > <td > </td > <td > </td > <td > </td > <td > </td > <td > </td > </tr > <tr bgcolor ="skyblue" > <td > </td > <td > </td > <td > </td > <td > </td > <td > </td > </tr > <tr > <td bgcolor ="skyblue" rowspan ="4" > 下午</td > <td > </td > <td > </td > <td > </td > <td > </td > <td > </td > </tr > <tr bgcolor ="skyblue" > <td > </td > <td > </td > <td > </td > <td > </td > <td > </td > </tr > <tr > <td > </td > <td > </td > <td > </td > <td > </td > <td > </td > </tr > <tr bgcolor ="skyblue" > <td > </td > <td > </td > <td > </td > <td > </td > <td > </td > </tr > <tr height ="30" > <td bgcolor ="skyblue" > 晚自习</td > <td colspan ="5" > </td > </tr > </table > </body > </html >
表格分组
caption标题标签、thead表头(table head )、tbody表体(table body)、tfoot表尾(table foot) 这些都是属于行分组
colgroup 列分组标签,和 caption 同级语法示例: <colgroup span="1" bgcolor="skyblue"></colgroup> 一般用于设置某一列的颜色或者字体等样式,这里的 1 表示第一列,如果要进行第二列分组的话就再创建一个 colgroup 标签 span 的值还是 1,表示第二列分组也只有一列，如果第二列分组有 6 列 那么 span 的值就是 6
表格中如果没有使用分组标签,浏览器在渲染时默认会把 tr 放在 tbody,为了使语义化更强，我们可以根据实际情况手动进行分组添加对应的分组标签
W3C 的标准约定,一个 table 下只允许使用一个 thead 和一个 tfoot ,允许使用多个 tbody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > Title</title > </head > <body > <table border ="1" width ="500" height ="500" align ="center" bordercolor ="#ffffff" cellspacing ="0" cellpadding ="0" > <caption > 阿里职级薪资</caption > <colgroup span ="1" bgcolor ="skyblue" > </colgroup > <colgroup span ="6" bgcolor ="orange" > </colgroup > <thead bgcolor ="deepskyblue" > <tr > <th rowspan ="2" > 序号</th > <th colspan ="6" > 技术岗与管理岗职级薪资</th > </tr > <tr > <th > P序列</th > <th > P级名称</th > <th > M序列</th > <th > M级名称</th > <th > 薪资</th > <th > 股票</th > </tr > </thead > <tbody align ="center" > <tr > <th > 1</th > <td > P6</td > <td > 资深工程师</td > <td > M1</td > <td > 主管</td > <td > 20W-35W</td > <td > 几乎不授予</td > </tr > <tr > <th > 2</th > <td > P7</td > <td > 技术专家</td > <td > M2</td > <td > 经理</td > <td > 30W-50W</td > <td > 2400股</td > </tr > <tr > <th > 3</th > <td > P8</td > <td > 高级专家</td > <td > M3</td > <td > 高级经理</td > <td > 45W-80W</td > <td > 6400股</td > </tr > <tr > <th > 4</th > <td > P9</td > <td > 资深专家</td > <td > M4</td > <td > 总监</td > <td > 80W-100W</td > <td > 16000股</td > </tr > <tr > <th > 5</th > <td > P10</td > <td > 研究员</td > <td > M5</td > <td > 高级总监</td > <td > 150W<sup > +</sup > </td > <td > 20000股</td > </tr > </tbody > <tfoot > <tr bgcolor ="#D7E1C5" > <th bgcolor ="#B0CC7F" > 说明</th > <td colspan ="6" > P-Profession M-Manage,马云在阿里的级别是M10</td > </tr > </tfoot > </table > </body > </html >
Emmet 简介
Emmet 并不是什么 html 中的知识，而是一种提高开发效率的 语法 ,其语法简单，使用方便，能提高我们编写 html 代码的速度
VS Code 内置了 Emmet 的语法,开箱即用,（我用的 IDEA ）
快速创建一个空标签
快速创建一个标签至需要输入标签名然后按 Tab 键即可
语法: h1 + Tab键,即可生成 <h1></h1>
创建一个带 Content 的标签
快速创建一个带有内容的标签,比如 h1创建时直接把内容带上
语法: h1{这是一个 H1 标题} + Tab 键,即可生成 <h1>这是一个 H1 标题</h1>
创建多个带 Content 的标签
如上所示我们已经能快速创建一个带内容的 h1 标签了,那如果我们要创建 5 个 10个内
语法: h1{标签内容}*标签重复次数 + Tab 键 例如 h1{标签内容}*3 + Tab 键 即可生成如下代码
1 2 3 <h1 > 标签内容</h1 > <h1 > 标签内容</h1 > <h1 > 标签内容</h1 >
创建 h1到h6 标签
需求: 快速创建一个 h1到h6 6个标签,每个标签中的文本带有当前序号
语法: h${这是一个$级标签}*6 + Tab 键,即可生成下方代码
说明: 这里的 $ 符号实现一次递增的序号
1 2 3 4 5 6 <h1 > 这是一个1级标签</h1 > <h2 > 这是一个2级标签</h2 > <h3 > 这是一个3级标签</h3 > <h4 > 这是一个4级标签</h4 > <h5 > 这是一个5级标签</h5 > <h6 > 这是一个6级标签</h6 >
嵌套标签
需求: 快速创建一个 ul 其中有 5 个 li 标签
语法: 父标签名>子标签名{子标签内容}*子标签重复次数 + Tab 键,例如 ul>li{这是第$个无序列表}*5 即可生成下方代码
1 2 3 4 5 6 7 <ul > <li > 这是第1个无序列表</li > <li > 这是第2个无序列表</li > <li > 这是第3个无序列表</li > <li > 这是第4个无序列表</li > <li > 这是第5个无序列表</li > </ul >
重复嵌套
上面是生成了一个 ul 标签,里面有 5 个 li 标签,如果想生成 2 个 ul 标签,每个 ul 中含有 3 个 li
语法: 父级标签*父级标签重复次数>子级标签{子级标签内容}*子级标签重复次数 + Tab 键,例如 ul*2>li{这是第$个无序列表}*2 即可生成下方代码
1 2 3 4 5 6 7 8 <ul > <li > 这是第1个无序列表</li > <li > 这是第2个无序列表</li > </ul > <ul > <li > 这是第1个无序列表</li > <li > 这是第2个无序列表</li > </ul >
带属性的标签
需求: 快速创建一个 h1 标签，通过属性让其居中
语法: 标签名[属性名="属性值"] + Tab 键,例如 h1[align="center"]{综合案例} + Tab 键 即可生成下方代码
1 <h1 align ="center" > 综合案例</h1 >
其它
生成兄弟元素:p+div
生成多个兄弟元素: (a[target="iframeExample"]+b)*3 生成 3 组 a b 标签
生成分组: (a[target="iframeExample"]>b)*3
颜色
在网页中的颜色由三色光组成：红、绿、蓝
表示颜色的方式有三种
颜色名称(Red、Green、Blue 等，共计 140 个标准的英文名称)
十六进制值,是指使用 #RRGGBB 的形式来定义颜色值，取值在 00-FF 之间 RR(红色强度)、GG(绿色强度)、BB(蓝色强度) 注意 # 号不要丢掉,字母采用小写规范
RGB值,使用 RGB(red,green,blue)，每个参数的取值范围都是 0-255 之间的整数,有时候可能还会看到四个参数的，第四个参数表示强度 0-1 之间的值 例如 rgb(255, 255, 255, 0.1);
长度单位
在网页中长度单位分为：绝对长度单位、相对长度单位，例如 PX %
百分比是相对父元素的像素
元素分类
元素分为：块元素也叫块状元素(block-level 块)、行内元素也叫内联元素(inline 内联)
块级元素总是从新行开始，浏览器会自动在元素的前后添加一些上下边距，块元素独占一行
行内元素不会独占一行,而且只占据必要的宽度，注意行内元素中是不能包含块元素的
表单控件 初识表单
页面中填写的信息就像大海里的小鱼小虾，然后用表单就像渔网一样收集起来，然后提交到服务器进行操作或存储
表单通过 form 来进行定义
表单 form 可通过 action 定义提交的接口 method 定义请求方法默认是 get 示例：method="POST" method="GET"
输入框
文本输入框 <input type="text"> 密码输入框 <input type="password"> 输入的密码会被屏蔽,用 * 号显示 name 属性可以绑定输入框的参数名,例如 用户名: <input name="username" type="text"> ``
input 是个单标签，自带闭合
总结：input 输入框数据采集的方式由 type 属性决定的,如果没有定义 type 的属性值默认就是文本输入框
1 2 3 4 <form action ="" > 请输入用户名: <input type ="text" > <br > 请输入密码: <input type ="password" > </form >
多行文本框
多行文本框可以显示多行输入的文本 <textarea>请输入详细地址</textarea >
当输入的文本到达多行文本的右侧时,会自动换行
可通过属性 rows cols 设置文本框可见行、列（宽高）
1 2 3 <form > 居住地址:<textarea cols ="30" rows ="10" > 请输入你的详情地址</textarea > </form >
单选框
定义单选框: <input type="radio" name="gander" value="1">男 <input type="radio" name="gander" value="0">女
单选框控件必须成组使用才有意义，每组至少需要两个单选框
组是通过 name 属性来建立的,凡是 name 值相同的就是一组,value 作为接口提交的参数值
同组的单选框只有一个会处在选中状态，其它的会自动呈现未选中状态
如果没有给单选框设置 name 属性,那么每个单选框自成一组
如果一旦选择了某一个单选框,那么就无法通过点击取消选择状态
默认选中通过定义 checked 属性，可指定一个任意的值或者不指定
1 2 3 4 5 <form > 请选择性别: <input type ="radio" name ="radio" value ="1" > 男 <input type ="radio" name ="radio" value ="0" > 女 </form >
多选框
定义多选框: <input type="checkbox" checked>HTML
默认选中通过定义 checked 属性，可指定一个任意的值或者不指定
1 2 3 4 5 6 7 8 9 10 11 <form > 请选择性别: <input type ="radio" name ="radio" value ="1" > 男 <input type ="radio" name ="radio" value ="0" > 女 <input type ="radio" name ="radio" value ="2" checked > 保密 <br > 前端基础包括 <input type ="checkbox" checked > HTML <input type ="checkbox" > CSS <input type ="checkbox" > JavaScript </form >
单选下拉菜单
当用户点击选择框的时候会出现一个下拉列表,用户可以从列表中选择一个选项我们称这个控件为下拉菜单
下来菜通过 select 标签定义下拉菜单, option 标签定义下拉菜单的列表
select 下只能定义 option 标签
下拉菜单中的默认展示为第一个 option 标签中的值,可以通过 selected 属性 标记为默认选中
多选下拉菜单
和普通的单选下拉菜单一样通过 select 标签定义,设置属性 multiple 表示为一个多选菜单（一般需要按住 shift 进行）
额外可以设置 size="number" 来控制多选菜单的可视高度
文件选择
文件选择也是通过 input 标签,只需要把 type 指定为 file 即可
定于语句: <input type="file">
在不同浏览器渲染的效果不太一样,不过功能都是一样的
label标签
需求: 如上面的性别单选,我们需要点击对应的小圆点才能选中，如何实现点击文本【男、女、保密】文本也能进行选择对应的单选按钮内
在实际的工作中我们为了提升用户的体验度可能需要使用 label 标签来完成
label 标签对屏幕阅读器用户很有用，因为当用户关注输入元素时,屏幕阅读器会大声读出标签
label 标签要定义 for 属性指定元素的 id 进行关联(元素的 id 要确保唯一性)
1 2 3 4 5 6 7 <form action ="" > <label for ="username" > 请输入用户名:</label > <input type ="text" id ="username" > <br > <input type ="radio" id ="man" name ="Gender" > <label for ="man" > 男</label > <input type ="radio" id ="woman" name ="Gender" > <label for ="woman" > 女</label > <input type ="radio" id ="other" name ="Gender" > <label for ="other" > 保密</label > </form >
默认值&只读&禁用
需求: 在某些情况下页面的一些输入我们需要让他作为只读，比如用户信息中的登录账号，注册后就不能去修改了，还有我们期望某些表单空间在发起请求时，忽略某个控件，可以进行禁用
只读 readonly 属性,一般用作文本输入框
禁用 disabled 属性,可作用于表单内的所有控件
input 输入框的默认值用 value 属性指定
1 2 3 4 5 6 7 8 9 10 <form > <input type ="radio" name ="Gender" > 男 <input type ="radio" name ="Gender" > 女 <input type ="radio" name ="Gender" disabled > 保密 <br > <span > 手机号:</span > <input value ="150****1369" readonly > <br > <br > <span > 地址:</span > <textarea > 请输入地址</textarea > </form >
分组控件
需求: 期望表单进行分类，比如个人信息中分为 基本信息 保密信息
在表单中可以用 <fieldset></fieldset> 进行定义一个带有边框和标题的分组表单控件 fieldset 字段集 –> 表单控件分组
fieldset 中添加 legend 标签定义分组标签标题可以直接在 body 体中定义
1 2 3 4 5 6 7 8 9 10 11 <body > <fieldset > <legend > 基本信息</legend > 姓名:<input type ="text" name ="" > </fieldset > <br > <fieldset > <legend > 保密信息</legend > 电话:<input > </fieldset > </body >
按钮 简介
按钮的分类: 提交按钮 重置按钮 普通按钮 图形按钮 双标签 button 按钮
提交按钮：具有点击确认提交信息同时发送表单数据给后台的功能
可通过 value 属性控制按钮显示的文本,例如一个登录按钮 <input type="submit" value="登录">
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <body > <form action ="www.baidu.com" target ="view_window" > 用户名: <input name ="username" type ="text" > <br > 密码: <input name ="password" type ="password" > <br > <br > <input type ="submit" value ="登录" > <input type ="reset" value ="重置" > <input type ="button" value ="普通按钮" > <br > <br > <br > <input type ="image" src ="./img.png" width ="300" height ="150" > <br > <button > button提交按钮</button > <button type ="button" > button普通按钮</button > </form > </body >
submit
定义语法: <input type="submit">
观察变化: 当我们点击提交按钮后 ①页面刷新了 ②输入框的内容消失了 ③浏览器地址栏里多了一个问号
form 标签中的 action 属性定义请求的接口地址 target 属性用于在当前窗口还是新窗口打开(不定义 target 属性默认是在当前页面打开)
1 2 3 4 5 6 7 8 9 <body > <form action ="www.baidu.com" target ="view_window" > 用户名: <input name ="username" type ="text" > <br > 密码: <input name ="password" type ="password" > <br > <input type ="submit" value ="登录" > </form > </body >
reset
重置按钮
重置 复位 擦除当前表单中的内容
定义语法 <input type="reset" value="重置">
button 是一个普通按钮，不带有任何功能，一般需要绑定事件结合使用
定义语法 <input type="button" value="普通按钮">
和上面的 button，有所区别,上面是一个input输入框定义了 type 属性为 button 并且没有提交功能
button 标签 是单独的一个标签与 input 无关
定义语法: <button>button提交</button> 和在 form表单中定义的 button标签默认和 sublime 按钮的功能是一致的,可以提交表单内容
如果想让 button 中的按钮只是一个普通按钮 需要定义属性 type=”button”
image
图片按钮和 sublime 按钮的功能是一致的 展示上看起来就是用图片替换了按钮
定义语法: <input type="image" src="./img.png" width="300" height="150">
综合案例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > example</title > <style > body { font-family : "PingFang SC" } </style > </head > <body > <h1 align ="center" > 社区疫情流调信息表</h1 > <p >     请大家做好个人防护，如去过风险地区，请及时项社区和公司报备;如您的身体壮壮异常（出现新冠病毒典型症状，如发热，咳嗽等）请及时上报异常情况，并按照通知，前往指定医院进行核酸检测，在去的路上请戴好口罩，做好个人防护，等待检测结果，期间请勿前去人多汇集的地方</p > <form action ="" > <fieldset > <legend > 基本信息</legend > <h4 > 1.您的姓名</h4 > <input type ="text" > <h4 > 2.您的手机号</h4 > <input type ="text" value ="137****2473" readonly > <h4 > 3.您的性别</h4 > <input type ="radio" name ="Gander" id ="man" > <label for ="man" > 男</label > <input type ="radio" name ="Gander" id ="woman" > <label for ="woman" > 女</label > <input type ="radio" name ="Gander" disabled > 保密 <h4 > 4.家庭地址</h4 > <select > <option > ===所属省/直辖市===</option > </select > <select > <option > ===市/区===</option > </select > <select > <option > ===县===</option > </select > <br > <br > <textarea name ="" id ="" cols ="50" rows ="3" > 请输入详情地址</textarea > <h4 > 5.您现在的身体状况</h4 > <input type ="checkbox" > 健康 <br > <input type ="checkbox" > 发热 <br > <input type ="checkbox" > 干咳 <br > <input type ="checkbox" > 乏力 <br > <input type ="checkbox" > 呼吸困难 <br > <input type ="checkbox" > 咽痛 <br > <input type ="checkbox" > 胸痛 <br > <input type ="checkbox" > 肌肉酸痛/关节痛 <br > <input type ="checkbox" > 呕吐 <br > <input type ="checkbox" > 腹泻 <br > <input type ="checkbox" > 味觉异常 <br > <input type ="checkbox" > 嗅觉异常 <br > <h4 > 6.您的健康码颜色目前是</h4 > <input type ="radio" name ="codeColor" id ="green" > <label for ="green" > 绿色</label > <input type ="radio" name ="codeColor" id ="yellow" > <label for ="yellow" > 黄色</label > <input type ="radio" name ="codeColor" id ="red" > <label for ="red" > 红色</label > <h4 > 7.您是否在 14 天内有过中高风险地区旅居史，或与确诊人员有过较为密切的接触</h4 > <input type ="radio" name ="dangerous" id ="yes" > <label for ="yes" > 是</label > <input type ="radio" name ="dangerous" id ="no" > <label for ="no" > 否</label > <h4 > 8.疫苗接种情况</h4 > <input type ="radio" name ="immunity" id ="first" > <label for ="first" > 已接种第一针</label > <input type ="radio" name ="immunity" id ="second" > <label for ="second" > 已接种第二针</label > <input type ="radio" name ="immunity" id ="third" > <label for ="third" > 三针完成天下无敌</label > </fieldset > <fieldset > <legend > 保密信息</legend > <h4 > 1.身份证信息</h4 > <span > 正面:</span > <input type ="file" > <br > <span > 反面:</span > <input type ="file" > <h4 > 2.学历信息(最高)</h4 > <select name ="选择学历" id ="" > <option value ="" > 硕士及以上</option > <option value ="" > 本科</option > <option value ="" > 大专</option > <option value ="" > 高中及一下</option > </select > <h4 > 3.是否服兵役</h4 > <input type ="radio" name ="soldier" id ="join" > <label for ="join" > 是</label > <input type ="radio" name ="soldier" id ="notJoin" > <label for ="notJoin" > 否</label > <h4 > 4.个人意见</h4 > <textarea name ="" id ="" cols ="50" rows ="5" > 征集个人意见</textarea > </fieldset > <button > 上报社区</button > <input type ="reset" value ="重置" > <input type ="image" src ="./img.png" width ="89" height ="50" > </form > </body > </html >
实用性标签 hr
hr 标签是 horizontal rule 的简写,表示水平线,作用是在网页画一条水平分割线,可以在视觉上将文档分割成多个部分
width height 设置宽高 默认宽度横跨整个屏幕,默认高度 2px
noshade 用来去掉水平线阴影
color 用于定义水平线的颜色
align 用来调整水平线水平对齐方式(前提是要有宽度,默认是水平居中)
示例 <hr color="green" align="left"> 单标签
pre
pre preformatted 预格式化的文本
pre 标签中的文本以固定宽度的字体显示,并且文本保留了空格和换行,文本将完全按照 HTML 中的源码进行显示
1 2 3 4 5 6 <pre > 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 </pre >
Map
Map 标签用来定义图像映射(也就是给一个图片定义一个或多个热点区域,点击不同的区域实现链接的跳转)
Map 是一个双标签,有一个必须定义的属性 name Map 的 name 属性要和 img 标签的 usemap 属性相关联 （就是把某一张图片当成热点地图，创建对应的关联关系）
Map 下通过子标签 area 定义热点区域的大小 位置 形状
area的属性: herf 用来定义热点区域链接的目标地址,互联网和本地的网页图片地址都可以 shape 用来定义区域的形状 default 所有区域 rect 矩形 circle 圆形 poly 多边形 coords 用来定义可点击区域的坐标,需要与 shape 属性配合使用
1 2 3 4 5 6 7 8 9 <img src ="./img.png" alt ="" usemap ="#celestial" > <map name ="celestial" > <area shape ="circle" coords ="472,100,50" href ="www.baidu.com" alt ="" > <area shape ="rect" coords ="90,40,137,90" href ="www.adalucky.com" alt ="" > <area shape ="poly" coords ="263,123,399,199,263,465" href ="www.google.com" alt ="" > </map >
示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > Title</title > </head > <body > <div > <b > 锄禾日当午</b > <hr color ="green" align ="left" > <b > 汗滴禾下土</b > <b > 低头思故乡</b > <br > <br > <pre > 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 </pre > </div > <img src ="./img.png" alt ="" usemap ="#celestial" > <map name ="celestial" > <area shape ="circle" coords ="472,100,50" href ="www.baidu.com" alt ="" > <area shape ="rect" coords ="90,40,137,90" href ="www.adalucky.com" alt ="" > <area shape ="poly" coords ="263,123,399,199,263,465" href ="www.google.com" alt ="" > </map > </body > </html >
iframe
iframe 的作用：用来在一个网页中显示另外一个网页
iframe 是一个双标签 基本语法 <iframe></iframe>
常用属性 src 页面路径 width height 宽高 frameborder 框架边框 一般设置为 0 scrolling 滚动条,取值范围【auto(在需要情况下显示滚动条，auto 也是默认值)、yes(始终显示)、no(从不显示)】
iframe 也可以作为一个链接的目标框架(iframe 的 name 属性值和 a 标签的 target 属性值要一致)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > iframe example</title > </head > <body > <iframe src ="https://www.bilibili.com" frameborder ="0" width ="500" height ="350" > </iframe > <div > <a href ="http://qfedu.com" target ="iframeExample" > <b > 千峰</b > </a > <a href ="https://www.bilibili.com" target ="iframeExample" > <b > 哔哩哔哩</b > </a > <a href ="https://www.bilibili.com/video/BV1mm4y1X7Hc?p=15" target ="iframeExample" > <b > Spring Security</b > </a > </div > <iframe src ="https://www.bilibili.com" frameborder ="0" width ="500" height ="350" name ="iframeExample" > </iframe > </body > </html >
页面布局常用标签
p 标签是段落标签用于一段文本的描述，该标签是块状元素，如果想要对段落中的某些文本加粗可以用 <strong></strong> 包裹起来，如果要用斜体可以用 <em></em> 包裹起来
1 2 3 4 5 6 7 8 9 <div > </div > 无意义块状元素标签<span > </span > 无意义行内元素标签<p > </p > 段落标签<ul > </ul > 无序列表<li > </li > 列表项<a > </a > 超链接标签<img /> 图片标签<i > </i > 斜体标签<b > </b > 粗体标签
