Web前端（更新中）
文章目录
- 什么是WEB前端
- HTML
- HTML的简介
- 运行环境和开发环境
- 标签的语法结构
- 页面的分类
- 常用标签
- head中常用标签
- body中的常用标签，特殊符号，语义化标签
- 特殊符号
- 语义化标签
- 多媒体标签
- 图片标签
- 音视频标签
- 表格标签
- 超链接标签
- 列表标签
- 有序列表
- 无序列表
- 数据列表
- 表单标签
- 表单标签Form
- input标签
- 表格用户界面例子
- CSS层叠样式表
- CSS的几种使用方式
- CSS的选择器
- 基本选择器
- 包含选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
什么是WEB前端
简单来说就是网页，由多种技术参与制作的，向用户展示的页面
技术：
- HTML（hyper mark-up language）：它决定了网页的结构
- CSS：网页的装饰器
- JavaScript：最初是因为校验而产生的。（数据交互、网页特效）
HTML
HTML的简介
第一款浏览器MOSIAC
第一款商用的浏览器叫做netscape（网景）的navigator（导航者）
W3C制定了web的相关规范
运行环境和开发环境
开发环境只需要一个记事本即可
运行环境只需要有浏览器即可
标签的语法结构
<标签 属性=“属性值”>内容部分或称区域</标签结束>
1.标签大多成对出现有开始<>和结束</>。（自结束标签除外）
2.标签内可以有属性，又属性必有值。（布尔型属性除外如muted）
3.开始和结束标签之间包含的内容被称为区域。
4.标签不区分大小写。
<!DOCTYPE html>
<html lang="zh"><head><!-- meta是一个自结束标签,无需在结束处写</meta>--><!-- charset是meata的一个属性，决定了网页的编码形式--><meta charset="utf-8"><title>hello world</title></head><body><!-- 标签的内容也被称为区域 -->第一个html程序</body>
</html>
页面的分类
静态页面：是指不修改网页源码的前提下，无论何时何地去访问都会得到同样的结果
动态页面：网站会根据信息做出实时反馈。例如注册，论坛等等。
常用标签
head中常用标签
meta标签：它的charset属性用来设置页面的编码方式 (常见编码有GBK,UTF-8,BIG,bg2312); 它的name属性可以有keyword，description，这两个属性可以影响到网页的排名。
title标签:他用来定义页面的主体，影响选项卡显示的内容。
body中的常用标签，特殊符号，语义化标签
<!DOCTYPE html>
<html lang="zh"><head><!-- meta是一个自结束标签,无需在结束处写</meta>--><!-- charset是meata的一个属性，决定了网页的编码形式--><meta charset="utf-8"><meta name="keyword" content="学习；交友；游戏" /><meta name="description" content="这是同学互相学习交友的前台程序"><title>hello world</title></head><body><header><!-- 定义页面的顶部，可用于快速定位 --><!-- 标签的内容也被称为区域 -->第一个html程序<b>这是一段又黑又粗的文字</b><br><strong>这是一段又黑又粗的文字，too</strong><br><i>这是一段斜体文字</i><br><em>这是一段斜体文字，too</em><br><u>这是下划线标签</u><br><del>中划线标签</del></header><section><!-- section身体部分，可用于分块，起到快速定位的作用 --><!-- p标签是块标签，自成一行 --><p style="border:1px solid red">这是段落标签</p><!-- div默认是块标签 --><div style="border:1px solid black">这是div块标签<p>11111嵌套</p><div>这是一个子div</div></div><!-- span默认是行内标签 --><span style="border:1px solid green">这是span行内标签</span><!-- 格式化标签 --><pre>锄禾日当午汗，滴禾下土谁知盘中餐，粒粒皆辛苦</pre><!-- 下标和上标 -->O<sub>2</sub>9<sup>2</sup>=81<hr><h1 style="display:inline">这是h1，<small>这是一个小一点的h1</small></h1><h2>这是 h2</h2><!-- 空格 --><h3>这是h3</h3><h4>这是h4</h4><h5>这是h5</h5><h6>这是h6</h6></section></body><!-- ctrl+k重排代码格式 -->
</html>
特殊符号
语义化标签
| 标签名称 | 作用 |
|---|---|
| header | 定义页面的顶部（页眉）的内容 |
| article | 主要是用来表示文章内容的 |
| nav | 用于页面导航的连接组 |
| aside | 当前页面或文章的附属信息部分 |
| footer | 上层父级内容区块或是一个根区块的脚注 |
| hgroup | hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组 |
| address | address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站连接、电子邮件、真实地址、电话号码等 |
| figure | 网页上的一块独立元素，在一个figure元素中只能放置一个figcaption元素，表示该figure元素的标题 |
| figcaption | figure元素块中的标题 |
| details | details元素主要用来列表一些关键的元素，在details中，我们是用summary元素作为details元素的标题，如果我们在details元素中不使用summary元素，则默认出现“显示详细信息” |
| summary | 作为details元素的标题 |
| mark | 标注或者高亮一些我们需要的关键词 |
| progress | 表示当前的完成进度情况 |
| meter | meter元素有六个属性，value表示值，min表示最小值，max表示最大值，low表示下限，high表示上限，optimum表示最佳值 |
| cite | 表示作品或文章中的标题 |
| small | HTML5中，small元素被重新定义了，small通常标签与正文无关的文字，内嵌在页面上，如标注版权信息，网站备案等 |
| canvas | 画布标签，用来在页面上画图案 |
多媒体标签
图片标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 图片的格式都有哪些jpg：现在多为无损格式，并且它不是支持透明通道，1760万色png：无损格式，并且它支持透明通道bmp：无损，支持透明，体积大gif：动画，只支持256色--><!-- src填写资源路径 它是单次source的缩写第一种填写路径的方式：使用绝对路径（从根目录开始）第二种填写路径的方式：相对路径（以当前html文件开始）./two.jpg表示当前路径第三种填写路径的方式：网络路径<img src="two.jpg" alt="">alt属性的作用是当图片无法正常显示的时候，会显示alt中错误提示如果没有alt属性，name描述文字会显示title内容鼠标放在图片上会显示title内容--><img src="two.jpg" alt="该图片无法正常显示" title="耻辱" width="50%" height="300px"><!-- px代表像素数，50%代表占页面一半并且会自适应 --></body>
</html>
音视频标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- video的第一个属性controls 显示控制界面 --><!-- autoplay自动播放 但是必须在静音muted开启的情况下才能自动播放 --><!-- loop是用来控制循环播放的属性 --><video src="" controls="controls" autoplay="autoplay" muted width="100%"></video><audio src="山岡晃 - Promise.mp3" controls="controls" autoplay="autoplay" loop></audio></body>
</html>
表格标签
表格标签：是由table、tr、td三个标签构成，同时可以使用语义化标签thead、tbody、tfoot进行规划。
表格语义化标签及属性
表格的属性、表格的嵌套、表格的合并
表格的嵌套一般多用于进行布局，将网页进行表格化处理，通常结合表格的合并，每一格显示不同的模块
表格的合并
- 行合并：rowspan
- 列合并：colspan
表格的背景
background=“ziyuan\two.jpg” bgcolor="#ccc"优先匹配前者
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- cellspacing是控制单元格之间的间距 --><!-- cellpadding是控制单元格的内边距,字符到单元格的距离 --><!-- 颜色构成按照RGB顺序写在一个16进制的数字 0xFF00FF --><table border="1" cellspacing=0 cellpadding=0 width=300 background="ziyuan\two.jpg" bgcolor="#ccc"><!-- thead tbody tfoot无论怎样颠倒，页面中首先会显示的是thead，其次tbody，再次tfoot --><tbody><!-- 表体 --><tr><td rowspan="2">蔡徐坤</td><td>男</td><td>20</td></tr></tbody><tfoot><tr><td>坤坤</td><td>男</td><td>18</td></tr></tfoot><thead><!-- tr表示定义一个表格行时table row的缩写 --><tr>123<!-- td表示定义一个单元格，是table data的缩写 --><td>姓名</td><td>性别</td><td>年龄</td></tr><tr>456</tr></thead></table> <!-- 表格嵌套 --><table border="1" width=300 cellpadding=0><tr><!-- align可设定各种元素的位置，左中右 --><td width=300 rowspan="2" align="center">456</td><!-- rowspan上下行合并 --><td>789</td><td><table border="1" width=100><tr><td>asd<border="1"><tr><td>123</td></tr></td></tr></table></td></tr><tr><td colspan="2">231</td><!-- colspan左右列合并 --><td>asd</td><td>654</td></tr></table></body>
</html>
超链接标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- href是所需要跳转的网页链接 --><!-- target属性为_blank的时候 跳转的网页会新建选项卡 --><a id="top" href="#bottom">跳到底部</a><br><!-- 锚链接 --><a href="pic.html" target="_blank">跳转two</a><div style="background-color: aqua;width: 1000px;height:5000px;"></div><a id="bottom" href="#top">回到顶部</a><img src="ziyuan/two.jpg" alt="" usemap="#map"><map name="map"><area shape="rect" coords="0,0,100,100" href="" alt=""><!-- 图片左上的矩形区域设置超链接 --><area shape="circle" coords="101,101,50" href="video.html"><!-- 圆（坐标，半径） --><area shape="poly" coords="200,200,300,300" href="first.html"><!-- 多边形 --></map></body>
</html>
列表标签
有序列表
扩展知识：emmet命令，可以高效的书写前端代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ol type="a" start="5" reversed="reversed"><!-- type=""前缀类型 I、A、1 , start修改起始号,reversed倒序 --><!-- li*9{我是子项$}[style="border:1px solid red"] 在结尾按TAB键执行代码创建语句 --><li style="border:1px solid red">我是子项1</li><li style="border:1px solid red">我是子项2</li><li style="border:1px solid red">我是子项3</li><li style="border:1px solid red">我是子项4</li><li style="border:1px solid red">我是子项5</li><li style="border:1px solid red">我是子项6</li><li style="border:1px solid red">我是子项7</li><li style="border:1px solid red">我是子项8</li><li style="border:1px solid red">我是子项9</li></ol></body>
</html>
无序列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ul type="square"><!-- type修改图案,圆或方块 --><li>我是子项1</li><li>我是子项2</li><li>我是子项3</li><li>我是子项4</li><li>我是子项5</li></ul></body>
</html>
数据列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><dl><dt>社会新闻</dt><dd>老李架构丢了</dd><dd>坤坤决定退出娱乐圈</dd><dt>娱乐新闻</dt><dd>杨瑶宣布出道</dd><dd>胡老师宣布出道</dd></dl></body>
</html>
表单标签
表单标签Form
method：决定表单提交数据的方式
action：向服务器提交数据的接口
post和get的区别：
- get会将表单中的数据拼接在url中，post会将数据存储在request body中。
- get会被浏览器的历史记录保存，post不会保存
- get的安全性较低，post相对来说比较安全
- get的数据长度受限于url的长度，最初只能录入2k，但是随着时代发展，各家浏览器对这个上限要求是不同的可能有很多，post没有上限，是因为所有上传的数据存在请求包中。
enctype：
- application/x-www-form-urlencoded：使用url编码的方式处理数据
- multipart/form-data：一般用于上传带问题的包体
- text/plain：就是纯文本内容
input标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Document</title></head><body> <!-- action设置提交数据的网站地址 --><form method="get" action="#" enctype="text/plain"><!-- name 和 value 属性 决定数据提交的键值对格式 name属性不可或缺，如果没有name属性标签将成为一个无意义的摆设 -->用户名：<input type="text" name="username" value="zxzx"><br><!-- value设置默认值 -->密码：<input type="text" name="password"/><br>爱好：<input type="checkbox" name="sing"/>唱<input type="checkbox" name="jump"/>跳<input type="checkbox" name="rap"/>rap<input type="checkbox" name="basketball"/>篮球<br>爱好：<input type="radio" name="lol"/>lol<input type="radio" name="data"/>dota<input type="radio" name="wzny"/>王者荣耀<br><input type="reset" name="" id=""/><!-- reset重置选项 --><input type="submit"/><button>commit</button><!-- checkbox多选 radio单选--><!-- 当button在form标签内 默认可以有提交功能，如果不在form标签内，则没有作用 --><!-- image实际上是图像按钮 --><input type="image" src="ziyuan/two.jpg"/><!-- hidden隐藏键，点击提交之后在结尾加上hidden内的内容 --><input type="hidden" name="hidden" value="衢州/ggwp"/><!-- 用于上传文件 --><input type="file" name="file" id=""/><select name="所在地" id="" multiple><!-- multipl可以将单选框改为多选的表格 --><option>广州</option><option>西安</option></select><!-- textarea是文本域，可以进行多文本的编辑 cols表示有多少列 rows表示有多少行 --><textarea name="用户意见" id="" cols="30" rows="4"></textarea></form></body>
</html>
表格用户界面例子
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Doucument</title></head><body><form action="#" method="get"><table width=300><thead><tr align="center"><td colspan="2" bgcolor="#ccc">用户注册</td></tr></thead><tr><td bgcolor="#ddd">用户名</td><td bgcolor=" #ddd"><input type="text" name="username"></td></tr><tbody><tr><td bgcolor="#ddd">密码</td><td bgcolor="#ddd"><input type="password" name="password"></td></tr><tr><td bgcolor="#ddd">性别</td><td bgcolor="#ddd"><input type="radio" name="sex value=" 男"><label for="sex">男</label><!-- 使用label可以实现定位修改 --><input type="radio" name="sex value="女">女</td></tr><tr><td bgcolor="#ddd">爱好</td><td bgcolor="#ddd"><input type="checkbox" name="写作">写作<input type="checkbox" name="听音乐">听音乐<input type="checkbox" name="体育">体育</td></tr><tr><td bgcolor="#ddd">省份</td><td bgcolor="#ddd"><select name="省份" id=""><option>陕西省</option><option>山西省</option><option>广东省</option><option>江苏省</option></select></td></tr><tr><td bgcolor="#ddd">自我介绍</td><td bgcolor="#ddd"><textarea name="自我介绍” id="" cols=" 30” rows="10"></textarea></td></tr></thead><tfoot><tr align="center"><td colspan="2" bgcolor="#ccc"><input type="submit"/><input type="reset"/></td></tr></tfoot></table></form></body>
</html>
补充：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Document</title></head><body> <!-- action设置提交数据的网站地址 --><form method="get" action="#" enctype="text/plain"><!-- name 和 value 属性 决定数据提交的键值对格式 name属性不可或缺，如果没有name属性标签将成为一个无意义的摆设 -->用户名：<input type="text" name="username" placeholder="请输入用户名"><br><!-- value设置默认值 -->密码：<input type="text" name="password"/><br>爱好：<input type="checkbox" name="sing"/>唱<input type="checkbox" name="jump"/>跳<input type="checkbox" name="rap"/>rap<input type="checkbox" name="basketball"/>篮球<br>爱好：<input type="radio" name="lol"/>lol<input type="radio" name="data"/>dota<input type="radio" name="wzny"/>王者荣耀<br><input type="reset" name="" id=""/><!-- reset重置选项 --><input type="submit"/><button>commit</button><!-- checkbox多选 radio单选--><!-- 当button在form标签内 默认可以有提交功能，如果不在form标签内，则没有作用 --><!-- image实际上是图像按钮 --><input type="image" src="ziyuan/two.jpg"/><!-- hidden隐藏键，点击提交之后在结尾加上hidden内的内容 --><input type="hidden" name="hidden" value="衢州/ggwp"/><!-- 用于上传文件 --><input type="file" name="file" id=""/><select name="所在地" id="" multiple><!-- multipl可以将单选框改为多选的表格 --><option>广州</option><option>西安</option></select><!-- textarea是文本域，可以进行多文本的编辑 cols表示有多少列 rows表示有多少行 --><textarea name="用户意见" id="" cols="30" rows="4"></textarea><!-- html5之后 推出的标签 --><br><input type="color" name="" id=""/><br><input type="date" name="" id=""/><br><input type="datetime-local"/><br><input type="email"/><br><input type="range" min="1" max="200" name="age"/><br><input type="number" name="number" id=""></form></body>
</html>
CSS层叠样式表
CSS：Cascading style sheet
CSS的几种使用方式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- <style>/* 第二种使用CSS的方式叫做 页面样式 是在head标签中添加style标签，是在style中书写css的代码，需要调用 */#first_div{border-width: 1px;border-style: dashed;border-color: rebeccapurple;width: 200px;height: 200px;}</style> --><!-- 第三种使用CSS的方式叫做 外链样式 通过引用css文件 使用其内部的样式代码 --><!-- <link rel="stylesheet" href="test.css"/> --><!-- 第四种使用css的凡是叫做 @import 通过css的import方法导入css，使用其内部代码 --><style>@import url("test.css");</style><!-- 面试题：import和link有什么区别？ --><!-- 答：第一个区别：import是css自带 link是html的功能，并且link不仅仅可以引用css 还可以定义rss rel第二个区别：加载顺序的区别，link会等css加载完毕再显示，import会先加载完html，再加载css，所以当网速不太优良的情况下会显示一个比较简单页面之后再慢慢补充细节第三个区别：import引入css的代码 dom编程无法获取到css的内容第四个区别：兼容性区别。IE 5版本以后的浏览器才支持import--></head><body><!-- 第一种使用CSS的方法叫做 行内样式 是在标签的style属性中书写css的代码 --><!-- <div style="width: 100px; height: 100px; border: 1px dashed red;"></div> --><div id="first_div"></div></body>
</html>
CSS的选择器
基本选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>/*
不建议使用通配符选择器，建议使用reset.css
* {
color: red;
}
*//* 标签选择器 */div {color: aqua;}/* id选择器 */#myprogram {background: yellow;}/* 类选择器题 */.mylove2 {color: red;}</style></head><body><div id="first" class="mylove">这个是一个div</div><p id="myprogram">这个是段落标签</p><div class="mylove mylove2">这个是一个div</div><h1>这个是标题</h1><hr /><div class="list"><ul><li>这是是一个列表1</li><li>这是是一个列表2</li><li>这是是一个列表3</li><li>这是是一个列表4</li><li>这是是一个列表5</li><li>这是是一个列表6</li><li>这是是一个列表7</li><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></ul><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></body>
</html>
包含选择器
- 子代选择器：修饰当前标签的子代标签，不修饰子代的子代
- 后代选择器：修饰当前标签的子代标签，不修饰子代的子代
- 分组选择器：分组选择器又名逗号选择器，通过逗号隔开的选择器共享同一套样式代码，逗号选择器两侧只要是符合语法规范的选择器即可
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>ul li {/* 修饰符合该条件的项 后代选择器：修饰当前标签的子代标签，不修饰子代的子代 */border: 1px solid red;}/* ul > li{ 子代选择器：修饰当前标签的子代标签，不修饰子代的子代border: 1px solid red;} *//* 分组选择器又名逗号选择器，通过逗号隔开的选择器共享同一套样式代码 */.ul_class,ul>li,div {border: 1px solid red;}</style></head><body><ul class="ul_class"><li>子项1</li><li>子项2</li><li>子项3</li><li>子项4</li><li>子项5</li><ol><li>123</li><li>456</li></ol><li>子项6</li><li>子项7</li><li>子项8</li><li>子项9</li></ul><li>子项1</li><li>子项2</li><li>子项3</li><li>子项4</li><li>子项5</li><li>子项6</li><li>子项7</li><li>子项8</li><li>子项9</li></div><br><div>我是div1</div><div>我是div2</div><div>我是div3</div><div>我是div4</div><div>我是div5</div><div>我是div6</div><div>我是div7</div><div>我是div8</div><div>我是div9</div></body></html>
属性选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* input[type='text']{border: 1px solid red;} */[title*="two"] {width: 100px;}input[type$='t']+input,p {/* +号代表匹配该属性标签的下一个标签 */border: 1px solid red;/* 首先筛选出input标签，然后将符合条件的input标签加上红边框 *//* input[type*='ex']{border: 1px solid red;} *//* $表示以什么结尾^表示以什么开头*=包含什么字符*//* 若将input去掉则匹配范围不限于input属性标签 */</style></head><body><form action="#" method="get" enctype="application/x-www-form-urlencoded">用户名：<input type="text" />密码：<input type="password" /><br>邮件：<input type="reset" /><p>这是一段文字</p><img src="../ziyuan/two.jpg" title="two" alt="" /></form></body>
</html>
伪类选择器
伪类选择器：即对一个标签在不同状态下有不同的样式
- a:link——普通链接状态
- a:visited——访问后状态
- a:hover——鼠标悬停状态
- a:active——点击状态
注：在书写伪类选择器的时候一定要注意保持 link visited hover active的顺序进行编写，否则有可能伪类选择器不生效。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {width: 100px;height: 100px;border: 1px solid red;}div:visited {width: 50px;height: 50px;border: 1px solid red;}div:hover {width: 200px;height: 200px;background-image: url("../ziyuan/two.jpg");}div:active {width: 300px;height: 300px;background-image: url("../ziyuan/two.jpg");}a:link {color: orange;text-decoration: none;}a:visited {color: black;border: 1px solid black;}a:hover {color: red;text-decoration: underline;border: 1px solid red;}a:active {color: green;text-decoration: none;}</style></head><body><a href="" target="_blank">go to bilibili</a><div><img src="../ziyuan/two.jpg" width="20px" height="20px" /></div></body>
</html>
伪元素选择器
伪元素选择器：通过伪元素选择器可以设置元素的指定部分的样式，主要用来设置元素内部的文本对的首字母，首行样式，或者是在元素内容前后插入其他元素
::before
::after
::first-letter
::first-line
::section
注：伪元素选择器是js代码无法获取的内容，意味着我们无法使用js对我们的当前进行为元素方面的修改。
Web前端（更新中）
文章目录
- 什么是WEB前端
- HTML
- HTML的简介
- 运行环境和开发环境
- 标签的语法结构
- 页面的分类
- 常用标签
- head中常用标签
- body中的常用标签，特殊符号，语义化标签
- 特殊符号
- 语义化标签
- 多媒体标签
- 图片标签
- 音视频标签
- 表格标签
- 超链接标签
- 列表标签
- 有序列表
- 无序列表
- 数据列表
- 表单标签
- 表单标签Form
- input标签
- 表格用户界面例子
- CSS层叠样式表
- CSS的几种使用方式
- CSS的选择器
- 基本选择器
- 包含选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
什么是WEB前端
简单来说就是网页，由多种技术参与制作的，向用户展示的页面
技术：
- HTML（hyper mark-up language）：它决定了网页的结构
- CSS：网页的装饰器
- JavaScript：最初是因为校验而产生的。（数据交互、网页特效）
HTML
HTML的简介
第一款浏览器MOSIAC
第一款商用的浏览器叫做netscape（网景）的navigator（导航者）
W3C制定了web的相关规范
运行环境和开发环境
开发环境只需要一个记事本即可
运行环境只需要有浏览器即可
标签的语法结构
<标签 属性=“属性值”>内容部分或称区域</标签结束>
1.标签大多成对出现有开始<>和结束</>。（自结束标签除外）
2.标签内可以有属性，又属性必有值。（布尔型属性除外如muted）
3.开始和结束标签之间包含的内容被称为区域。
4.标签不区分大小写。
<!DOCTYPE html>
<html lang="zh"><head><!-- meta是一个自结束标签,无需在结束处写</meta>--><!-- charset是meata的一个属性，决定了网页的编码形式--><meta charset="utf-8"><title>hello world</title></head><body><!-- 标签的内容也被称为区域 -->第一个html程序</body>
</html>
页面的分类
静态页面：是指不修改网页源码的前提下，无论何时何地去访问都会得到同样的结果
动态页面：网站会根据信息做出实时反馈。例如注册，论坛等等。
常用标签
head中常用标签
meta标签：它的charset属性用来设置页面的编码方式 (常见编码有GBK,UTF-8,BIG,bg2312); 它的name属性可以有keyword，description，这两个属性可以影响到网页的排名。
title标签:他用来定义页面的主体，影响选项卡显示的内容。
body中的常用标签，特殊符号，语义化标签
<!DOCTYPE html>
<html lang="zh"><head><!-- meta是一个自结束标签,无需在结束处写</meta>--><!-- charset是meata的一个属性，决定了网页的编码形式--><meta charset="utf-8"><meta name="keyword" content="学习；交友；游戏" /><meta name="description" content="这是同学互相学习交友的前台程序"><title>hello world</title></head><body><header><!-- 定义页面的顶部，可用于快速定位 --><!-- 标签的内容也被称为区域 -->第一个html程序<b>这是一段又黑又粗的文字</b><br><strong>这是一段又黑又粗的文字，too</strong><br><i>这是一段斜体文字</i><br><em>这是一段斜体文字，too</em><br><u>这是下划线标签</u><br><del>中划线标签</del></header><section><!-- section身体部分，可用于分块，起到快速定位的作用 --><!-- p标签是块标签，自成一行 --><p style="border:1px solid red">这是段落标签</p><!-- div默认是块标签 --><div style="border:1px solid black">这是div块标签<p>11111嵌套</p><div>这是一个子div</div></div><!-- span默认是行内标签 --><span style="border:1px solid green">这是span行内标签</span><!-- 格式化标签 --><pre>锄禾日当午汗，滴禾下土谁知盘中餐，粒粒皆辛苦</pre><!-- 下标和上标 -->O<sub>2</sub>9<sup>2</sup>=81<hr><h1 style="display:inline">这是h1，<small>这是一个小一点的h1</small></h1><h2>这是 h2</h2><!-- 空格 --><h3>这是h3</h3><h4>这是h4</h4><h5>这是h5</h5><h6>这是h6</h6></section></body><!-- ctrl+k重排代码格式 -->
</html>
特殊符号
语义化标签
| 标签名称 | 作用 |
|---|---|
| header | 定义页面的顶部（页眉）的内容 |
| article | 主要是用来表示文章内容的 |
| nav | 用于页面导航的连接组 |
| aside | 当前页面或文章的附属信息部分 |
| footer | 上层父级内容区块或是一个根区块的脚注 |
| hgroup | hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组 |
| address | address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站连接、电子邮件、真实地址、电话号码等 |
| figure | 网页上的一块独立元素，在一个figure元素中只能放置一个figcaption元素，表示该figure元素的标题 |
| figcaption | figure元素块中的标题 |
| details | details元素主要用来列表一些关键的元素，在details中，我们是用summary元素作为details元素的标题，如果我们在details元素中不使用summary元素，则默认出现“显示详细信息” |
| summary | 作为details元素的标题 |
| mark | 标注或者高亮一些我们需要的关键词 |
| progress | 表示当前的完成进度情况 |
| meter | meter元素有六个属性，value表示值，min表示最小值，max表示最大值，low表示下限，high表示上限，optimum表示最佳值 |
| cite | 表示作品或文章中的标题 |
| small | HTML5中，small元素被重新定义了，small通常标签与正文无关的文字，内嵌在页面上，如标注版权信息，网站备案等 |
| canvas | 画布标签，用来在页面上画图案 |
多媒体标签
图片标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 图片的格式都有哪些jpg：现在多为无损格式，并且它不是支持透明通道，1760万色png：无损格式，并且它支持透明通道bmp：无损，支持透明，体积大gif：动画，只支持256色--><!-- src填写资源路径 它是单次source的缩写第一种填写路径的方式：使用绝对路径（从根目录开始）第二种填写路径的方式：相对路径（以当前html文件开始）./two.jpg表示当前路径第三种填写路径的方式：网络路径<img src="two.jpg" alt="">alt属性的作用是当图片无法正常显示的时候，会显示alt中错误提示如果没有alt属性，name描述文字会显示title内容鼠标放在图片上会显示title内容--><img src="two.jpg" alt="该图片无法正常显示" title="耻辱" width="50%" height="300px"><!-- px代表像素数，50%代表占页面一半并且会自适应 --></body>
</html>
音视频标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- video的第一个属性controls 显示控制界面 --><!-- autoplay自动播放 但是必须在静音muted开启的情况下才能自动播放 --><!-- loop是用来控制循环播放的属性 --><video src="" controls="controls" autoplay="autoplay" muted width="100%"></video><audio src="山岡晃 - Promise.mp3" controls="controls" autoplay="autoplay" loop></audio></body>
</html>
表格标签
表格标签：是由table、tr、td三个标签构成，同时可以使用语义化标签thead、tbody、tfoot进行规划。
表格语义化标签及属性
表格的属性、表格的嵌套、表格的合并
表格的嵌套一般多用于进行布局，将网页进行表格化处理，通常结合表格的合并，每一格显示不同的模块
表格的合并
- 行合并：rowspan
- 列合并：colspan
表格的背景
background=“ziyuan\two.jpg” bgcolor="#ccc"优先匹配前者
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- cellspacing是控制单元格之间的间距 --><!-- cellpadding是控制单元格的内边距,字符到单元格的距离 --><!-- 颜色构成按照RGB顺序写在一个16进制的数字 0xFF00FF --><table border="1" cellspacing=0 cellpadding=0 width=300 background="ziyuan\two.jpg" bgcolor="#ccc"><!-- thead tbody tfoot无论怎样颠倒，页面中首先会显示的是thead，其次tbody，再次tfoot --><tbody><!-- 表体 --><tr><td rowspan="2">蔡徐坤</td><td>男</td><td>20</td></tr></tbody><tfoot><tr><td>坤坤</td><td>男</td><td>18</td></tr></tfoot><thead><!-- tr表示定义一个表格行时table row的缩写 --><tr>123<!-- td表示定义一个单元格，是table data的缩写 --><td>姓名</td><td>性别</td><td>年龄</td></tr><tr>456</tr></thead></table> <!-- 表格嵌套 --><table border="1" width=300 cellpadding=0><tr><!-- align可设定各种元素的位置，左中右 --><td width=300 rowspan="2" align="center">456</td><!-- rowspan上下行合并 --><td>789</td><td><table border="1" width=100><tr><td>asd<border="1"><tr><td>123</td></tr></td></tr></table></td></tr><tr><td colspan="2">231</td><!-- colspan左右列合并 --><td>asd</td><td>654</td></tr></table></body>
</html>
超链接标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- href是所需要跳转的网页链接 --><!-- target属性为_blank的时候 跳转的网页会新建选项卡 --><a id="top" href="#bottom">跳到底部</a><br><!-- 锚链接 --><a href="pic.html" target="_blank">跳转two</a><div style="background-color: aqua;width: 1000px;height:5000px;"></div><a id="bottom" href="#top">回到顶部</a><img src="ziyuan/two.jpg" alt="" usemap="#map"><map name="map"><area shape="rect" coords="0,0,100,100" href="" alt=""><!-- 图片左上的矩形区域设置超链接 --><area shape="circle" coords="101,101,50" href="video.html"><!-- 圆（坐标，半径） --><area shape="poly" coords="200,200,300,300" href="first.html"><!-- 多边形 --></map></body>
</html>
列表标签
有序列表
扩展知识：emmet命令，可以高效的书写前端代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ol type="a" start="5" reversed="reversed"><!-- type=""前缀类型 I、A、1 , start修改起始号,reversed倒序 --><!-- li*9{我是子项$}[style="border:1px solid red"] 在结尾按TAB键执行代码创建语句 --><li style="border:1px solid red">我是子项1</li><li style="border:1px solid red">我是子项2</li><li style="border:1px solid red">我是子项3</li><li style="border:1px solid red">我是子项4</li><li style="border:1px solid red">我是子项5</li><li style="border:1px solid red">我是子项6</li><li style="border:1px solid red">我是子项7</li><li style="border:1px solid red">我是子项8</li><li style="border:1px solid red">我是子项9</li></ol></body>
</html>
无序列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ul type="square"><!-- type修改图案,圆或方块 --><li>我是子项1</li><li>我是子项2</li><li>我是子项3</li><li>我是子项4</li><li>我是子项5</li></ul></body>
</html>
数据列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><dl><dt>社会新闻</dt><dd>老李架构丢了</dd><dd>坤坤决定退出娱乐圈</dd><dt>娱乐新闻</dt><dd>杨瑶宣布出道</dd><dd>胡老师宣布出道</dd></dl></body>
</html>
表单标签
表单标签Form
method：决定表单提交数据的方式
action：向服务器提交数据的接口
post和get的区别：
- get会将表单中的数据拼接在url中，post会将数据存储在request body中。
- get会被浏览器的历史记录保存，post不会保存
- get的安全性较低，post相对来说比较安全
- get的数据长度受限于url的长度，最初只能录入2k，但是随着时代发展，各家浏览器对这个上限要求是不同的可能有很多，post没有上限，是因为所有上传的数据存在请求包中。
enctype：
- application/x-www-form-urlencoded：使用url编码的方式处理数据
- multipart/form-data：一般用于上传带问题的包体
- text/plain：就是纯文本内容
input标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Document</title></head><body> <!-- action设置提交数据的网站地址 --><form method="get" action="#" enctype="text/plain"><!-- name 和 value 属性 决定数据提交的键值对格式 name属性不可或缺，如果没有name属性标签将成为一个无意义的摆设 -->用户名：<input type="text" name="username" value="zxzx"><br><!-- value设置默认值 -->密码：<input type="text" name="password"/><br>爱好：<input type="checkbox" name="sing"/>唱<input type="checkbox" name="jump"/>跳<input type="checkbox" name="rap"/>rap<input type="checkbox" name="basketball"/>篮球<br>爱好：<input type="radio" name="lol"/>lol<input type="radio" name="data"/>dota<input type="radio" name="wzny"/>王者荣耀<br><input type="reset" name="" id=""/><!-- reset重置选项 --><input type="submit"/><button>commit</button><!-- checkbox多选 radio单选--><!-- 当button在form标签内 默认可以有提交功能，如果不在form标签内，则没有作用 --><!-- image实际上是图像按钮 --><input type="image" src="ziyuan/two.jpg"/><!-- hidden隐藏键，点击提交之后在结尾加上hidden内的内容 --><input type="hidden" name="hidden" value="衢州/ggwp"/><!-- 用于上传文件 --><input type="file" name="file" id=""/><select name="所在地" id="" multiple><!-- multipl可以将单选框改为多选的表格 --><option>广州</option><option>西安</option></select><!-- textarea是文本域，可以进行多文本的编辑 cols表示有多少列 rows表示有多少行 --><textarea name="用户意见" id="" cols="30" rows="4"></textarea></form></body>
</html>
表格用户界面例子
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Doucument</title></head><body><form action="#" method="get"><table width=300><thead><tr align="center"><td colspan="2" bgcolor="#ccc">用户注册</td></tr></thead><tr><td bgcolor="#ddd">用户名</td><td bgcolor=" #ddd"><input type="text" name="username"></td></tr><tbody><tr><td bgcolor="#ddd">密码</td><td bgcolor="#ddd"><input type="password" name="password"></td></tr><tr><td bgcolor="#ddd">性别</td><td bgcolor="#ddd"><input type="radio" name="sex value=" 男"><label for="sex">男</label><!-- 使用label可以实现定位修改 --><input type="radio" name="sex value="女">女</td></tr><tr><td bgcolor="#ddd">爱好</td><td bgcolor="#ddd"><input type="checkbox" name="写作">写作<input type="checkbox" name="听音乐">听音乐<input type="checkbox" name="体育">体育</td></tr><tr><td bgcolor="#ddd">省份</td><td bgcolor="#ddd"><select name="省份" id=""><option>陕西省</option><option>山西省</option><option>广东省</option><option>江苏省</option></select></td></tr><tr><td bgcolor="#ddd">自我介绍</td><td bgcolor="#ddd"><textarea name="自我介绍” id="" cols=" 30” rows="10"></textarea></td></tr></thead><tfoot><tr align="center"><td colspan="2" bgcolor="#ccc"><input type="submit"/><input type="reset"/></td></tr></tfoot></table></form></body>
</html>
补充：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Document</title></head><body> <!-- action设置提交数据的网站地址 --><form method="get" action="#" enctype="text/plain"><!-- name 和 value 属性 决定数据提交的键值对格式 name属性不可或缺，如果没有name属性标签将成为一个无意义的摆设 -->用户名：<input type="text" name="username" placeholder="请输入用户名"><br><!-- value设置默认值 -->密码：<input type="text" name="password"/><br>爱好：<input type="checkbox" name="sing"/>唱<input type="checkbox" name="jump"/>跳<input type="checkbox" name="rap"/>rap<input type="checkbox" name="basketball"/>篮球<br>爱好：<input type="radio" name="lol"/>lol<input type="radio" name="data"/>dota<input type="radio" name="wzny"/>王者荣耀<br><input type="reset" name="" id=""/><!-- reset重置选项 --><input type="submit"/><button>commit</button><!-- checkbox多选 radio单选--><!-- 当button在form标签内 默认可以有提交功能，如果不在form标签内，则没有作用 --><!-- image实际上是图像按钮 --><input type="image" src="ziyuan/two.jpg"/><!-- hidden隐藏键，点击提交之后在结尾加上hidden内的内容 --><input type="hidden" name="hidden" value="衢州/ggwp"/><!-- 用于上传文件 --><input type="file" name="file" id=""/><select name="所在地" id="" multiple><!-- multipl可以将单选框改为多选的表格 --><option>广州</option><option>西安</option></select><!-- textarea是文本域，可以进行多文本的编辑 cols表示有多少列 rows表示有多少行 --><textarea name="用户意见" id="" cols="30" rows="4"></textarea><!-- html5之后 推出的标签 --><br><input type="color" name="" id=""/><br><input type="date" name="" id=""/><br><input type="datetime-local"/><br><input type="email"/><br><input type="range" min="1" max="200" name="age"/><br><input type="number" name="number" id=""></form></body>
</html>
CSS层叠样式表
CSS：Cascading style sheet
CSS的几种使用方式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- <style>/* 第二种使用CSS的方式叫做 页面样式 是在head标签中添加style标签，是在style中书写css的代码，需要调用 */#first_div{border-width: 1px;border-style: dashed;border-color: rebeccapurple;width: 200px;height: 200px;}</style> --><!-- 第三种使用CSS的方式叫做 外链样式 通过引用css文件 使用其内部的样式代码 --><!-- <link rel="stylesheet" href="test.css"/> --><!-- 第四种使用css的凡是叫做 @import 通过css的import方法导入css，使用其内部代码 --><style>@import url("test.css");</style><!-- 面试题：import和link有什么区别？ --><!-- 答：第一个区别：import是css自带 link是html的功能，并且link不仅仅可以引用css 还可以定义rss rel第二个区别：加载顺序的区别，link会等css加载完毕再显示，import会先加载完html，再加载css，所以当网速不太优良的情况下会显示一个比较简单页面之后再慢慢补充细节第三个区别：import引入css的代码 dom编程无法获取到css的内容第四个区别：兼容性区别。IE 5版本以后的浏览器才支持import--></head><body><!-- 第一种使用CSS的方法叫做 行内样式 是在标签的style属性中书写css的代码 --><!-- <div style="width: 100px; height: 100px; border: 1px dashed red;"></div> --><div id="first_div"></div></body>
</html>
CSS的选择器
基本选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>/*
不建议使用通配符选择器，建议使用reset.css
* {
color: red;
}
*//* 标签选择器 */div {color: aqua;}/* id选择器 */#myprogram {background: yellow;}/* 类选择器题 */.mylove2 {color: red;}</style></head><body><div id="first" class="mylove">这个是一个div</div><p id="myprogram">这个是段落标签</p><div class="mylove mylove2">这个是一个div</div><h1>这个是标题</h1><hr /><div class="list"><ul><li>这是是一个列表1</li><li>这是是一个列表2</li><li>这是是一个列表3</li><li>这是是一个列表4</li><li>这是是一个列表5</li><li>这是是一个列表6</li><li>这是是一个列表7</li><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></ul><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></body>
</html>
包含选择器
- 子代选择器：修饰当前标签的子代标签，不修饰子代的子代
- 后代选择器：修饰当前标签的子代标签，不修饰子代的子代
- 分组选择器：分组选择器又名逗号选择器，通过逗号隔开的选择器共享同一套样式代码，逗号选择器两侧只要是符合语法规范的选择器即可
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>ul li {/* 修饰符合该条件的项 后代选择器：修饰当前标签的子代标签，不修饰子代的子代 */border: 1px solid red;}/* ul > li{ 子代选择器：修饰当前标签的子代标签，不修饰子代的子代border: 1px solid red;} *//* 分组选择器又名逗号选择器，通过逗号隔开的选择器共享同一套样式代码 */.ul_class,ul>li,div {border: 1px solid red;}</style></head><body><ul class="ul_class"><li>子项1</li><li>子项2</li><li>子项3</li><li>子项4</li><li>子项5</li><ol><li>123</li><li>456</li></ol><li>子项6</li><li>子项7</li><li>子项8</li><li>子项9</li></ul><li>子项1</li><li>子项2</li><li>子项3</li><li>子项4</li><li>子项5</li><li>子项6</li><li>子项7</li><li>子项8</li><li>子项9</li></div><br><div>我是div1</div><div>我是div2</div><div>我是div3</div><div>我是div4</div><div>我是div5</div><div>我是div6</div><div>我是div7</div><div>我是div8</div><div>我是div9</div></body></html>
属性选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* input[type='text']{border: 1px solid red;} */[title*="two"] {width: 100px;}input[type$='t']+input,p {/* +号代表匹配该属性标签的下一个标签 */border: 1px solid red;/* 首先筛选出input标签，然后将符合条件的input标签加上红边框 *//* input[type*='ex']{border: 1px solid red;} *//* $表示以什么结尾^表示以什么开头*=包含什么字符*//* 若将input去掉则匹配范围不限于input属性标签 */</style></head><body><form action="#" method="get" enctype="application/x-www-form-urlencoded">用户名：<input type="text" />密码：<input type="password" /><br>邮件：<input type="reset" /><p>这是一段文字</p><img src="../ziyuan/two.jpg" title="two" alt="" /></form></body>
</html>
伪类选择器
伪类选择器：即对一个标签在不同状态下有不同的样式
- a:link——普通链接状态
- a:visited——访问后状态
- a:hover——鼠标悬停状态
- a:active——点击状态
注：在书写伪类选择器的时候一定要注意保持 link visited hover active的顺序进行编写，否则有可能伪类选择器不生效。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {width: 100px;height: 100px;border: 1px solid red;}div:visited {width: 50px;height: 50px;border: 1px solid red;}div:hover {width: 200px;height: 200px;background-image: url("../ziyuan/two.jpg");}div:active {width: 300px;height: 300px;background-image: url("../ziyuan/two.jpg");}a:link {color: orange;text-decoration: none;}a:visited {color: black;border: 1px solid black;}a:hover {color: red;text-decoration: underline;border: 1px solid red;}a:active {color: green;text-decoration: none;}</style></head><body><a href="" target="_blank">go to bilibili</a><div><img src="../ziyuan/two.jpg" width="20px" height="20px" /></div></body>
</html>
伪元素选择器
伪元素选择器：通过伪元素选择器可以设置元素的指定部分的样式，主要用来设置元素内部的文本对的首字母，首行样式，或者是在元素内容前后插入其他元素
::before
::after
::first-letter
::first-line
::section
注：伪元素选择器是js代码无法获取的内容，意味着我们无法使用js对我们的当前进行为元素方面的修改。