html常见的文本标签
标题标签
写法：<h1> 一级标签 </h1><h2> 二级标签 </h2><h3> 三级标签 </h3><h4> 四级标签 </h4><h5> 五级标签 </h5><h6> 六级标签 </h6>范围：h1-h6(从大到小) 功能：作为标题使用，并且依据重要性递减。默认属性：自动加粗
分割线标签
写法：<hr/>特点：没有开始标签
段落标签
写法：<p>这是段落标签</p>特点：这一段内容的前后都会带换行效果。
段落缩进标签
写法：<blockquote>这是段落缩进标签</blockquote>
滚动标签
写法：<marquee>这是滚动标签</marquee>常用的属性：scrollamount:设置滚动速度：正整数的值（值越大，速度越快）behavior:滚动方式：slide :滚动某边框停止掉scroll:穿梭滚动（默认值）alternate:交替滚动direction:滚动方向left:从右到左（默认值）right:从左到右up:向上滚动down:向下滚动bgcolor:背景颜色（颜色的英文单词或十六进制数）
格式标签
加粗标签
写法：<strong>我变粗了！</strong><b>我变粗了</b>strong和b是同样的效果区别：strong有“文章语言语气强调”b只是普通加粗
斜体标签
写法：<em>我快倒了！</em><i>我快倒了</i>em和i是同样的效果区别：em有语气强调i只是普通斜体
换行标签
写法：<br/>作用：换个行
预先排版的文本展示标签
写法：<pre>我想怎么样就怎么样</pre>作用：按照文本的格式原封不动的进行浏览器输出
计算机的编码代码标签
写法：<code>function checkUser(){alert("hello") ;}</code>此标签用于表示计算机源代码或者其他机器可以阅读的文本内容，把文本变成等宽内容，暗示此段文本是源程序代码。
上下标标签
作用：一般情况用在网站门户首页 下面底部栏的版权所有信息或者注册商标信息。
上标标签
写法：x<sup>2</sup>运行结果：x²
下标标签
写法CO<sub>2</sub>运行结果：CO₂
html转义字符
浏览器解析(所有现代浏览器:谷歌/火狐/ie/edge/欧朋浏览器/洋葱浏览器...)转义字符:© 等价于©® 等价于® 等价于一个空格  等价于两个空格< 等价于<> 等价于>
超链接
超链接标签
写法：<a htef="#" target="_blank">超链接，点我跳转</a>属性:href:链接到的资源地址url(统一资源定位符)url统一资源定位符的组成:协议+域名+端口 :网站默认都是将端口80(省略不写)target:打开资源文件的方式_blank:新建一个窗口打开_self:(默认值),当前窗口直接打开协议:file:// 本地文件协议http:// http协议https:// 适合发送隐私数据jdbc:mysql:// (jdbc的mysql协议)thunder://迅雷协议mailto: 邮件协议...
以下为具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>超链接标签</title></head><body><a href="01_html常见的文本标签.html" target="_blank">点击跳转</a><br/><a href="" target="_blank">进入百度</a><br/><a href="thunder://" target="_blank">高速通道-《米奇妙妙屋》</a><br/><a href="" target="_blank">普通通道-《米奇妙妙屋》</a></body></html>
超链接的使用方式
方式一:跳转链接a标签的href:从一个页面链接到到另一个页面方式二:锚链接写法：同一个页面下1)创建锚点(跳转标记) <a name="锚点名称"></a>2)创建跳转到锚点的链接地址<a href="#锚点名称">文本...</a>不同页面下1)创建锚点(跳转标记)<a name="锚点名称"></a>2)创建跳转到锚点的链接地址<a href="跳转到另一个页面地址的url地址#锚点名称">
图像标签
img标签
写法：<img src="#图片链接" title="图像标题" width=”10px" height="10px“ alt="图片失效了" align="right" />一些基本属性：src:链接到图片资源地址 (相对路径)相对路径注意事项:页面存储位置是否在同级目录下(绝对路径:就是直接指定磁盘上的具体图片位置)title:图像的标题文字提示设置宽和高:width和height 单位为px或者是权重百分比%alt:替代文本 (当图片链接失效了,给文字提示信息)align:(左右浮动)left(左对齐)right(右对齐)
图像链接
将img标签包裹在a标签中, 在a标签中设置图像链接跳转地址。写法：<a href="adv.html" target="_self"><img src="img/OIP-C.jpg"width="400px"height="300px"align="right"/></a>
表格
表格标签
写法：<table><caption>这是一个三行三列表格</cation><tr><th></th><th></th><th></th></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>子标签caption:指定表格的标题内容tr:行标签th:表头(特殊单元,居中加粗)td:数据表内容普通单元格table标签的常见属性:border="表格边框大小"cellspacing="单元格的边框和table边框的距离"width和height:表格宽度和高度像素或者百分比bgcolor:背景颜色表格单元格的合并属性:合并行(行合并)rowspan="所占的单元格的数量"合并列(列合并)colspan="单元格的数量"
以下是具体代码举例：
代码用到了以上所有标签和标签属性。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>表格标签</title></head><body><table border="1px" align="center"cellspacing="0"bgcolor="pink"width="500px"height="500px"><caption>学生成绩表</caption><tr><th>学号</th><th>姓名</th><th>班级</th><th>成绩</th></tr><tr align="center"><td></td><td>张三</td><td>1班</td><td>80</td></tr><tr align="center"><td></td><td>李四</td><td>2班</td><td>98</td></tr><tr align="center"><td></td><td>王五</td><td rowspan="2">3班</td><td>100</td></tr><tr align="center"><td></td><td>赵六</td><!-- <td>3班</td> --><td>90</td><tr align="center"><td colspan="3">平均成绩</td><!-- <td></td><td></td> --><td>未知</td></tr></tr></table></body></html>
表格嵌套
以下是具体代码举例：
<!-- 表格嵌套举例 简单的页面--><!DOCTYPE html><html><head><meta charset="utf-8"><title>表格嵌套</title></head><body><!-- 大的表格一行一列 --><table border="1px" cellpadding="0" width="100%"><tr><!-- 第一部分:头部Logo部分 --><table><tr><td><img src="img/英特尔大logo.jpg" align="center" width="900px"/></td><td align="left"><a href="/wow/z/oversea/SEO-SEM/ovs-pc-login"target="_blank">登录</a><a href="/wow/z/oversea/SEO-SEM/ovs-pc-register"target="_blank">注册</a></td></tr></table><!-- 第二部分 导航条 --><table><!-- 每一个标签都有style样式 --><!-- <tr style="background-color: black;"> --><tr><td><a href="#"target="_blank">首页</a><a href="#"target="_blank">CPU</a><a href="#"target="_blank">主板套餐</a><a href="#"target="_blank">固态硬盘</a></td></tr></table><!-- 第三部分:轮播图指定图片 --><table><tr><td><img src="./img/intel轮播图1.jpg" width="100%" /><img src="img/intel轮播图2.jpg" width="100%" /></td></tr></table><!-- 第四部分:热门商品 --><table><tr><td><a href=product_info.htmltarget="_blank"><img src="./img/热门商品1.png"></a><a href=product_info.htmltarget="_blank"><img src="./img/热门商品2.png"></a><a href=product_info.htmltarget="_blank"><img src="./img/热门商品3.png"></a></td></tr></table></tr></table></body></html>
<!-- prduct_info.html --><!DOCTYPE html><html><head><meta charset="utf-8"><title>商品信息</title></head><body>处理器真好</body></html>
块标签
块标签div
写法：<div>这是div块标签</div>块级的块标签，定义一块，默认占满一行，进行内容的显示。1）默认占满一行。2）会自动换行。适用于大量数据展示。
块标签span
写法：<span>这是span块标签</span>行级的块标签，一行上定义一个块，进行内容的显示。1）有多少内容，就会占用多大空间。2）不会自动换行。适用于少量数据展示
块标签的应用场景
div标签应用场景
应用网页布局使用div将任意html元素(标签)包裹起来,在通过css(Casading Style Sheet:层叠样式表)进行样式修饰达到一种层级布局的效果。
span标签应用场景
相对于div进行少量数据的块标签显示。
列表
无序列表
列表项前面有标记（实心圆点符号、空心圆点符号和实心小正方形符号等）。写法：<ul><li></li><li></li><li></li></ul>ul属性 type="指定列表项前面的标记"disc:实心圆点cicle:空心圆点square:实心小正方形子标签li（列表项）
以下是具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>无序列表</title><!-- <style>ul li{display:inline;}</style> --></head><body>你喜欢的篮球明星是？<ul type="cicle"><li><a href="#">科比</a></li><li><a href="#">詹姆斯</a></li><li><a href="#">乔丹</a></li><li><a href="#">kk</a></li></ul></body></html>
有序列表
列表项前面有标记（阿拉伯数字、罗马数字和大小写字母等）。写法:<ol><li></li><li></li><li></li></ol>ol属性 type="指定列表项前面的标记"默认值:1.....其他标记AI子标签li（列表项）
以下是具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>有序列表</title></head><body>cxr是个啥？<ol type=""><li>sz</li><li>bm</li><li>hh</li><li>pz</li></ol></body></html>
自定义列表
写法：<dl><dt></dt><dd></dd><dt></dt><dd></dd></dl>dl:定义自定义列表dt：自定义的列表项dd:自定义列表项中的具体内容
以下是具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>自定义列表</title></head><body><p>公司项目部架构如下</p><dl><dt>项目总监</dt><dd>技术总监</dd><dd>架构总监</dd><dd>管理总监</dd><dt>攻城狮</dt><dd>攻城狮1</dd><dd>攻城狮2</dd><dd>攻城狮3</dd></dl></body></html>
表单元素
最常见表单的应用场景
用户通过表单提交,将用户数据提交到服务器端登录或者注册.
以下是具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>表单元素</title></head><!--最常见表单的应用场景:用户通过表单提交,将用户数据提交到服务器端登录或者注册--><body><!-- 表单标签form--><form action="server.html" method="get"><!-- input type="text" 文本输入框value属性:给输入框指定的默认值 h5的新增属性placeholder="输入框的提示文字" (鼠标光标进入输入框提示文字消失了)表单项必须给定name属性 ="见名知意",给后端标记用户输入的具体内容(否则,action地址不知道前端提交的内容)-->用户名：<input type="text" name="wyh" placeholder="请输入用户名" /> <br/><!-- 密码输入框 -->密  码：<input type="password" name="123"placeholder="请输入密码" /><br/><!-- input type="submit" 提交按钮(特殊按钮) --><input type="submit" value="登录" /><br/></form><!-- 表单标签form--><form action="server.html" method="post">\<!-- input type="text" 文本输入框value属性:给输入框指定的默认值 h5的新增属性placeholder="输入框的提示文字" (鼠标光标进入输入框提示文字消失了)表单项必须给定name属性 ="见名知意",给后端标记用户输入的具体内容(否则,action地址不知道前端提交的内容)-->用户名：<input type="text" name="wyh" placeholder="请输入用户名" /> <br/><!-- 密码输入框 -->密  码：<input type="password" name="123"placeholder="请输入密码" /><br/><!-- input type="submit" 提交按钮(特殊按钮) --><input type="submit" value="登录" /><br/></form></body></html>
表单中常见的表单项
输入相关的组件:<input type="text"/> 文本输入框<input type="password"/> 密码输入框<input type="radio"/> 单项按钮<input type="checkbox"/> 复选框<input type="file"/> 文件上传组件<input type="date"/> 日期组件 yyyy/MM/dd(这种格式年份/月份/月中日期)<input type="button" value="按钮的默认值"/> 普通按钮<input type="submit"/> 特殊的提交按钮:将表单项提交到form的action地址上<input type="rest"/> 重置清空<input type="email"/> 输入有效的时候必须有@标记下拉菜单:<select><option>下拉选项</option></select>文本域:<textarea> (网页简历,自我介绍:写一段文本)</textarea>
以下是具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>常见的表单项</title></head><body><form action="server.html" method="get">用户名：<input type="text" placeholder="请输入用户名"name="name" /><br/>密  码：<input type="password"placeholder="请输入密码"name="password"/><br/>性  别：<!-- 同一组信息:给定同名的name属性:给后端标记用户选的内容是什么 --><input type="radio" value="0"name="sex" />男<input type="radio"value="1"name="sex" />女<br/>爱  好：<!-- 同一组信息:给定同名的name属性:给后端标记用户选的内容是什么 --><input type="checkbox"value="yuanshen"name="hobby"/>yuanshen<input type="checkbox"value="lol"name="hobby"/>lol<input type="checkbox"value="cf"name="hobby"/>cf<br/>籍  贯：<!-- 下拉菜单 --><select><option value="blank">请选择</option><option value="0">山西省</option><option value="1">山东省</option><option value="2">河北省</option><option value="3">河南省</option></select><br/>出生日期：<input type="date"name="birthday"/><br/><!-- 文件上传组件 -->上传图片：<input type="file" name="photo" /><br/>自我介绍：<!-- 文本域rows:指定行数cols:一行支持的列数--><textarea cols="30" rows="5">chenxinrushigeshazi</textarea><br/>邮  箱：<input type="email"name="my_email"placeholder="请输入你的邮箱地址"/><br/><!-- 普通按钮 --><input type="button" value="点我没用" /><br/><input type="submit" value="提交" /><input type="reset" value="清空" /></form></body></html>
<!-- server.html --><!DOCTYPE html><html><head><meta charset="utf-8"><title>后台服务器地址</title></head><body>正在校验中！</body></html>
table嵌套表单
以下是具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>格式优雅的表单</title><!-- table不能嵌套form,form是可以嵌套table的--></head><body background="img/bg.jpg"><form action="server.html" method="get"><table border="0px" cellspacing="0" width="1000"height="500"align="center"bgcolor="white"><caption><b>注册用户</b></caption><tr align="center"><td>用户名：</td><td><input type="text" placeholder="请输入用户名"name="name" /></td></tr><tr align="center"><td>密  码：</td><td><input type="password"placeholder="请输入密码"name="password"/></td></tr><tr align="center"><td>性  别：</td><td><input type="radio" value="0"name="sex" />男<input type="radio"value="1"name="sex" />女</td></tr><tr align="center"><td>爱  好：</td><td><input type="checkbox"value="yuanshen"name="hobby"/>yuanshen<input type="checkbox"value="lol"name="hobby"/>lol<input type="checkbox"value="cf"name="hobby"/>cf</td></tr><tr align="center"><td>籍  贯：</td><td><select><option value="blank">请选择</option><option value="0">山西省</option><option value="1">山东省</option><option value="2">河北省</option><option value="3">河南省</option></select></td></tr><tr align="center"><td>出生日期：</td><td><input type="date"name="birthday"/></td></tr><tr align="center"><td colspan="2"><input type="submit" value="注册" /></td></tr></table></form></body></html>
<!-- server.html --><!DOCTYPE html><html><head><meta charset="utf-8"><title>后台服务器地址</title></head><body>正在校验中！</body></html>
框架标签
frameset框架集
注意：不能和body一块用，要么body标签去掉,要么在body前面去使用frameset写法：<frameset> </frameset>一些属性：rows="由上而下看的每一个部分占用的权重百分比"cols="由左到右看的每一个部分占用的权重百分比"frameset框架集能与frameset框架集和frame框架嵌套使用。
frame框架
写法：<frame> </frame>
以下是具体代码举例：
<!-- index.html --><!DOCTYPE html><html><head><meta charset="utf-8"><title>xxx后台管理系统</title></head><!-- frameset框架集 不能和body一块用要么body标签去掉,要么在body前面去使用frameset--><!-- 框架集rows="由上而下看的每一个部分占用的权重百分比"--><frameset rows="20%,*"><!-- 20%属于logo头部页面 --><frame src="header.html" /><!-- *:代表属于的部分(整个从左到右整体部分) 又可以从左到右划分两部分--><frameset cols="15%,*"><!-- 15%属于左边菜单 --><frame src="menu.html" /><!-- *,剩余中间主页 --><!-- src:框架包含的页面地址name属性:给框架其名称标识--><frame src="main.html" name="main" /></frameset></frameset> <!-- <body></body> --></html>
<!-- main.html --><!DOCTYPE html><html><head><meta charset="utf-8"><title>主页面</title></head><body><img src="../img/主页面.jpg" /></body></html>
<!-- menu.html --><!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><ul><li><!-- 如果超链接在框架中 frame使用,target指定为在哪一个frame中打开target必须和frame中的name属性名称一致 --><a href="main.html" target="main">首页</a></li><li><a href="product/product_lists.html" target="main">酷睿i9</a></li><li><a href="product/product_lists - 副本.html" target="main">酷睿i7</a></li><li><a href="product/product_lists - 副本 (2).html" target="main">酷睿i5</a></li><li><a href="#">酷睿i3</a></li></ul></body></html>
<!-- header.html --><!DOCTYPE html><html><head><meta charset="utf-8"><title>头部页面</title></head><body><div><img src="../img/英特尔大logo.jpg" width="100%"height="100px"/></div></body></html>
<!-- product_lists - 副本 (2).html --><!DOCTYPE html><html><head><meta charset="utf-8"><title>酷睿i5</title></head><body><table border="1px" align="center" cellspacing="0" ><tr><th>商品编号</th><th>商品名称</th><th>商品价格</th><th>商品型号</th><th>商品生产企业</th><th>商品图片</th></tr><tr><td>1</td><td>酷睿i5-13900KF</td><td>5849</td><td>13代i5新品</td><td>intel</td><td><img src="../../img/酷睿i9（1）.jpg_.webp" /></td></tr><tr><td>2</td><td>酷睿i5-13900K</td><td>5649</td><td>13代i5新品</td><td>intel</td><td><img src="../../img/酷睿i9（2）.jpg_.webp" /></td></tr><tr><td>3</td><td>酷睿i5-13900KS</td><td>6849</td><td>13代i5新品</td><td>intel</td><td><img src="../../img/酷睿i9（1）.jpg_.webp" /></td></tr><tr><td>4</td><td>酷睿i5-14900KS</td><td>8849</td><td>13代i5新品</td><td>intel</td><td><img src="../../img/酷睿i9（2）.jpg_.webp" /></td></tr></table></body></html>
<!-- product_lists - 副本 --><!DOCTYPE html><html><head><meta charset="utf-8"><title>酷睿i7</title></head><body><table border="1px" align="center" cellspacing="0" ><tr><th>商品编号</th><th>商品名称</th><th>商品价格</th><th>商品型号</th><th>商品生产企业</th><th>商品图片</th></tr><tr><td>1</td><td>酷睿i7-13900KF</td><td>5849</td><td>13代i7新品</td><td>intel</td><td><img src="../../img/酷睿i9（1）.jpg_.webp" /></td></tr><tr><td>2</td><td>酷睿i7-13900K</td><td>5649</td><td>13代i7新品</td><td>intel</td><td><img src="../../img/酷睿i9（2）.jpg_.webp" /></td></tr><tr><td>3</td><td>酷睿i7-13900KS</td><td>6849</td><td>13代i7新品</td><td>intel</td><td><img src="../../img/酷睿i9（1）.jpg_.webp" /></td></tr><tr><td>4</td><td>酷睿i7-14900KS</td><td>8849</td><td>13代i7新品</td><td>intel</td><td><img src="../../img/酷睿i9（2）.jpg_.webp" /></td></tr></table></body></html>
<!-- product_lists,html --><!DOCTYPE html><html><head><meta charset="utf-8"><title>酷睿i9</title></head><body><table border="1px" align="center" cellspacing="0"width="1000" ><tr><th>商品编号</th><th>商品名称</th><th>商品价格</th><th>商品型号</th><th>商品生产企业</th><th>商品图片</th><th>修改信息</th></tr><tr><td>1</td><td>酷睿i9-13900KF</td><td>5849</td><td>13代i9新品</td><td>intel</td><td><img src="../../img/酷睿i9（1）.jpg_.webp" /></td><td><a href="#">修改</a><a href="#">删除</a></td></tr><tr><td>2</td><td>酷睿i9-13900K</td><td>5649</td><td>13代i9新品</td><td>intel</td><td><img src="../../img/酷睿i9（2）.jpg_.webp" /></td><td><a href="#">修改</a><a href="#">删除</a></td></tr><tr><td>3</td><td>酷睿i9-13900KS</td><td>6849</td><td>13代i9新品</td><td>intel</td><td><img src="../../img/酷睿i9（1）.jpg_.webp" /></td><td><a href="#">修改</a><a href="#">删除</a></td></tr><tr><td>4</td><td>酷睿i9-14900KS</td><td>8849</td><td>13代i9新品</td><td>intel</td><td><img src="../../img/酷睿i9（2）.jpg_.webp" /></td><td><a href="#">修改</a><a href="#">删除</a></td></tr></table></body></html>
新增元素video元素
浏览器需要flash插件,浏览器通过video元素进行视频的播放video元素属性:width:宽度 以及height:高度controls="controls" h5的video控制视频播放source子标签:指定 加载视频连接地址 src属性type="媒体类型 举例.mp4/.mp3/.ogg等等都是媒体类型"
以下是具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>video</title></head><body><video height="500px" width="700px" controls="controls"><source type="audio/mp4" src="mp4/OPPO-京东.mp4"></source><!-- 添加多个source标签 --></video><p style="font-weight: bold;">gege </p><p style="font-size:20px;font-weight: 900;">7月13日19:57:32</p></body></html>
CSS使用方式
行内样式
1) (如果某个页面中某个位置单独去使用某个样式,可以使用行内样式)每一个标签都有style属性="css代码"样式名称:值;样式名称2:值2;...
内部样式(内联)
在style标签体 通过选择器{样式属性名称:值;样式属性名称2:值2;}写法：<style>/* 选择器 */a{text-decoration: none;color: skyblue;font-size: 50px;}</style>优点:一次性控制多个标签弊端:css代码和html标签混合使用,不利于后期管理(阅读性差)
外部方式(外联)
方式3:外部方式(外联) 导入css文件 link的href属性导入css文件地址link写法：<link href="#" rel="stylesheet" />rel:固定写法 stylesheet:系统库中的层叠样式表
以下是具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS的使用方式</title></head><!-- <style>/* 选择器 */a{text-decoration: none;color: skyblue;font-size: 50px;}</style> --><link href="css/mycss.css" rel="stylesheet" /><body><a href="#" style="text-decoration: none;color: rosybrown;font-size: 40px;">点我1111</a><a href="#">点我试试</a><a href="#">别点我</a></body></html>
<!-- 1.行内样式 --><body><p style="text-decoration:none;color:red;font-size:20px;">7月13日19:57:32</p><body><!-- 2.内部样式 --><style>p{font-size:20px;coloer:red;text-decoration:none;}</style><body><p>7月13日20:07:24</p></body><!-- 3.外部样式 --><!-- mycss.css -->p{font-size:20px;coloer:red;text-decoration:none;}<!-- css.html --><body><p>7月13日20:12:29</p></body>
常见的CSS选择器
id选择器
id选择器(同一个页面标签id属性值必须"唯一")写法: #id属性值{样式名称:值;...} id选择器优先级最大
class 类选择器
同一个页面标签元素的class属性值是可以重复的写法: .class属性值{属性名称:值;属性名称2:值2;...}class 类选择器优先级次于id选择器
标签名称选择器
写法： 标签名称{样式属性:值;...}优先级:标签名称选择器 < class选择器 < id选择器
后代选择器
写法： 标签1 标签2{样式属性:值;...}作用：标签1后包含标签2的所有相关标签样式属性都对于改变。
并集选择器
写法：标签1，标签2{样式属性:值;...}作用：同时选中多个标签
伪类选择器
锚伪类:将一个标签的状态划分为以下几种:1)鼠标未访问过的状态 link2)鼠标经过这个元素的状态 hover3)鼠标经过了并且点击在这个元素状态:active4)鼠标访问的状态(上面3)之后的,点击并且松开了) visited代码:选择器:状态名称(不区分大小写)提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。
以下为具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>伪类选择器</title><style>/* 鼠标未访问*/a:link{font-size: 40px;color: red;}/* 鼠标访问过的状态 */a:visited{font-size: 30px;color: blue;}/* 鼠标经过 */a:hover{font-size: 45px;color: pink;}/* 激活状态 */a:active{font-size: 30px;color: green;}</style></head><body><a href="02_h5新增video元素.html" target="_blank">恒大商城</a></body></html>
CSS字体相关的样式属性
font-family:字体库的类型:楷体/宋体/其他/黑体font-style:字体样式normal:文字正常显示(正常体:默认值)italic:文字"斜体"font-weight:属性指定字体的粗细适当加粗:boldfont-size:字体大小
CSS之文本样式
文本样式:colorcolor: deepskyblue;文本对齐方式:text-alignleft:默认值 左对齐center:居中right:右对齐文本装饰:text-decoration:underline:设置下划线overline:上划线line-through中划线none:去掉文本修饰line-through设置字母大写:uppercase/lowercasetext-transform: uppercase;文本缩进:第一行文本设置 缩进效果text-indent: 500px;行高:line-height 属性用于指定行之间的间距line-height: 60px;单词间距:word-spacing系统认定中文,必须两个字组成一个单词word-spacing: 20px;为文本添加阴影:text-shadow垂直和水平阴影 默认2px 后面可以指定颜色text-shadow: 2px 2px firebrick;
CSS之边框样式属性
边框有四个边: 颜色/宽度/样式(必须有)(单实线/虚线/点/双实线)边框颜色边框宽度边框样式给四个边设置边框的颜色border-top-color: blueviolet;border-right-color: rosybrown;border-bottom-color: aqua;border-left-color: violet;给四个边的边框设置宽度border-top-width: 5px;border-right-width: 6px;border-bottom-width: 7px;border-left-width: 8px;四个边框的样式solid:单实线double:双实线dotted:点dashed:虚线border-top-style: dashed;border-right-style: dotted;border-bottom-style: double;border-left-style: groove;有简写属性格式(将四个边的颜色/宽度和样式进行简写)border-color:border-width:border-style: border:特点:默认的方向 上右下左某一边没有设置颜色/宽度/样式,会补齐对边的颜色/宽度/样式边框四个角的弧度:border-radius: 5px;高度和宽度:width: 150px;height: 150px;
CSS背景样式属性
background-color:背景颜色background-color: darkgray; */background-image:背景图像这个图像尺寸没有屏幕这么大,图像出现x轴和y抽重复background-image: url(#); */background-repeat:设置图像是否重复以及如何重复repeat:x轴 /y轴重复(默认值:跟图像的分辨率尺寸相关)repeat-x:x轴重复repat-y:y轴重复no-repeat:不重复background-repeat: no-repeat;background-position:背景图像的起始位置浏览器中显示的位置 left ,center ,right图像位置 top,center,bottombackground-position: left top ;背景附着: fixed背景图像固定,不会随着页面滚动而滚动scorll:会随着其余部分滚动而滚动background-attachment: scroll;background的简写属性:background:background-color background-image background-repeat backgound-position；
CSS列表样式
list-style-type 设置列表项的标记类型disc:默认值 实心圆点circle:空心圆点square:实心小正方形none:去掉列表项的标记list-style-type: none;让列表项的内容，水平排列：display: inline;list-style-image:自定义列表前面的标记类型list-style-image: url();
CSS表格
border-collapse 属性设置是否将表格边框折叠为单一边框：collapse:合并
CSS盒子模型（框模型）
控制div边距
万物皆盒子! 就是通过div将一个大的页面划分成很多块;每一个块里面存储很多html元素,然后在通过css样式控制视图控制div内边距padding: 20px 0 0 40px;padding-top: 30px;padding-right: 30px;padding-bottom: 30px;padding-left: 30px;简写：（对应上右下左）padding: 300px 0 0 400px;控制div外边距margin-top: 30px;margin-right: 30px;margin-bottom: 30px;margin-left : 30px;简写：（对应上右下左）margin: 100px 0 0 200px;
CSS盒子模型的使用_注册页面
以下为具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>注册页面</title><!--盒子模型:将任意的标签都可使用div包起来--><style>body{background: #FAEBD7;}/* 修饰外面大的div样式 */.div1{border:1px solid black;width: 400px;height: 400px;/* 外边距的简写属性 *//* margin-left: 400px;margin-top: 120px; */margin: 260px 0 0 725px;background: url(img/intel轮播图2.jpg);/* 边框四个角为圆角 */border-radius: 5px;}.div2{margin: 50px 0 0 100px;}.div3{margin: 50px 0 0 100px;}.div4{margin: 50px 0 0 83px;}.div5{margin: 50px 0 0 100px;}.div6{margin: 30px 0 0 160px;}div{color: orangered;}</style></head><body><div class="div1"><form><div class="div2">用户名：<input type="text" placeholder="请输入用户名" /></div><div class="div3">密  码：<input type="password"placeholder="请输入密码"/></div><div class="div4">确认密码：<input type="password" placeholder="请再次输入密码"/></div><div class="div5">邮  箱：<input type="text" placeholder="请输入邮箱" /></div><div class="div6"><input type="submit" value="注册" /><input type="submit" value="登录" /></div></form></div></body></html>
CSS浮动
CSS浮动概念
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中(不占据一行空间,单独的浮块)，所以文档的普通流中的块框表现得就像浮动框不存在一样。
以下为具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS浮动属性</title><style>#div1{border: 1px solid red;background-color: blue;width: 300px;height: 300px;float: left;}#div2{border: 1px solid yellow;background-color: red;width: 300px;height: 300px;float: left;}#div3{border: 1px solid blue;background-color: yellow;width: 300px;height: 300px;float: right;</style></head><body><div id="div1">div1</div><div id="div2">dir2</div><div id="div3">dir3</div></body></html>
CSS浮动使用
以下为具体代码举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>浮动页面</title><style>.div_header{height: 25px;background-color: #000000;}/* 两个中间div加入一个空div,给class或者id */.div_blank{background-color: black;width: 100%;/* 清除浮动 clear属性:both:两边都不浮动(通用)clear:left左边不浮动/right:右边不浮动*/clear: both;}.div_header1{float: left;}.div_header2{float: right;}</style></head><body><!-- 大的主页 --><div class="div_header"><!-- 第一部分：导航栏1 --><div class="div_header1"><select><option>中国大陆</option><option>小日子</option><option>小棒子</option></select><a href="#">请登录</a><a href="#">请注册</a><a href="#">手机淘宝</a><a href="#">无障碍浏览</a></div><!-- 第二部分：导航栏2 --><div class="div_header2"><a href="#">我的淘宝</a><a href="#">购物车</a><a href="#">收藏夹</a><a href="#">商品分类</a><a href="#">免费开店</a></div></div><!-- 背景颜色 --><div class="div_blank"></div><div><input type="text" /><input type="submit" value="搜索" src="#" /></div></body></html>
一些简答题：
超链接标签的href可以指定某个url地址,请描述关于url地址协议如果是http协议,它的的执行流程?
以访问百度为例：href指定百度的url地址，向系统发送request请求，然后系统通过访问hosts文件寻找是否存在百度域名对应的IP地址，若找到，则访问此地址；若找不到，则通过调用网卡驱动联网访问DNS服务器，通过DNS服务器寻找百度服务器，找到百度的IP地址后，向超链接标签response响应,成功访问到百度。
表单提交的get和post有什么区别? 请描述。
在使用get方式提交时，提交的内容会显示在地址栏上，而使用post方式提交时，提交的内容不会显示在地址栏上，但使用浏览器的检查功能，可以查看到表单的数据。所以说，使用post提交相对于get提交安全。get提交的内容的数据量较小，如果超过会导致数据不完整；而使用post提交的数据是通过IO流传输，能够传输的数据量大。get是从服务器上获取数据，post是向服务器传输数据。
表单form的action和method是什么。
action的值为URL，是指定提交表单后，表单所到达的地址。method的值为get或者post，是指定表单提交的方式。-----------------------------------------------------------------------action属性是用来指定跳转后端服务器的地址。（url-统一资源定位符）url和uri的区别：（url是uri的子集）url是带上具体的协议 http：//域名：端口号/项目名称/登录接口，范围小uri （url的一部分 “/项目名称/登录接口”）没有明确的协议，范围大method属性是用来指定提交表单的方法。
input type=“button” 和 input type=“submit” 这两个都是按钮有什么不一样的地方?
input type="button"的按钮只是能够点击而input type="submit"的按钮可以点击，并且在点击后会提交input项的所有信息到后端的服务器上。
CSS是什么和它的作用是什么？
CSS是层叠样式表，作用是控制html元素，给html进行修饰，使其达到一种效果。
框架标签frame的src和name属性是什么？什么是farmeset框架集？
frame:框架标签一个frame包含一个html页面，src="链接的html页面地址"name="给页面所在框架起一个名称"frameset:框架集当整个结构有两个或者两个以上的html页面组成，必须使用框架集framesetrows:由上而下划分的每一个部分所占的权重百分比；在通过frame规定某一个html的页面位置cols:由左到右划分每一个部分所占的权重百分比
