本文详细介绍了HTML中的各种基础标签，包括文本标签如h1-h6、p、pre、code，以及图像标签img、超链接a、表格table、表单form和相关元素，还有CSS的基础样式属性如颜色、字体、边框和浮动等，展示了如何构建网页布局和交互形式。
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(省略不写)
http://www.baidu.com
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="http://www.baidu.com" target="_blank">进入百度</a>
<br/>
<a href="thunder://www.dytt8.net" target="_blank">高速通道-《米奇妙妙屋》</a>
<br/>
<a href="http://www.dytt8.net" 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>2012</td>
<td>张三</td>
<td>1班</td>
<td>80</td>
</tr>
<tr align="center">
<td>2013</td>
<td>李四</td>
<td>2班</td>
<td>98</td>
</tr>
<tr align="center">
<td>2014</td>
<td>王五</td>
<td rowspan="2">3班</td>
<td>100</td>
</tr>
<tr align="center">
<td>2015</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="https://world.taobao.com/wow/z/oversea/SEO-SEM/ovs-pc-login"
target="_blank">登录</a>
<a href="https://world.taobao.com/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.html
target="_blank">
<img src="./img/热门商品1.png">
</a>
<a href=product_info.html
target="_blank">
<img src="./img/热门商品2.png">
</a>
<a href=product_info.html
target="_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.....
其他标记
A
I
子标签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;">2023年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;">2023年7月13日19:57:32</p>
<body>
<!-- 2.内部样式 -->
<style>
p{
font-size:20px;
coloer:red;
text-decoration:none;
}
</style>
<body>
<p>2023年7月13日20:07:24</p>
</body>
<!-- 3.外部样式 -->
<!-- mycss.css -->
p{
font-size:20px;
coloer:red;
text-decoration:none;
}
<!-- css.html -->
<body>
<p>2023年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)鼠标未访问过的状态 link
2)鼠标经过这个元素的状态 hover
3)鼠标经过了并且点击在这个元素状态:active
4)鼠标访问的状态(上面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:属性指定字体的粗细
适当加粗:bold
font-size:字体大小
CSS之文本样式
文本样式:color
color: deepskyblue;
文本对齐方式:text-align
left:默认值 左对齐
center:居中
right:右对齐
文本装饰:text-decoration:
underline:设置下划线
overline:上划线
line-through中划线
none:去掉文本修饰
line-through
设置字母大写:uppercase/lowercase
text-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,bottom
background-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页面组成，必须使用框架集frameset
rows:由上而下划分的每一个部分所占的权重百分比；在通过frame规定某一个html的页面位置
cols:由左到右划分每一个部分所占的权重百分比
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
