本文详细介绍了HTML中的基础标签及其使用方法，包括段落、换行、列表、表格、表单等标签的应用技巧，并探讨了如何利用这些标签进行简单的网页布局。
<!DOCTYPE html>
<html>
<head>
<meta charsset="UTF-8">/*编码格式:utf-8、gbk(中文)*/
<title>名字</title>
</head>
<body>
<a name= "顶部"></a>
<p>段落标签</p>
<br/>换行标签
<hr/>水平线标签
<strong>加粗标签</strong>
<em>斜体标签</em>
"双引号";
空格符号
< <符号
>>符号
<img alt= "错误" src= "2.jpg" title="高清" height="300" width="500">
<!-- alt:如果找不到路径显示alt中的src:图片路径
height="高度"
title="鼠标移上去显示内容"
width="宽度"
-->
<a href= "#顶部" target= "_blank">回到顶部</a>
<!-- _blank是新建网页打超链接 -->
<!-- href:
1.http:// 直接跳到网站
2.#名字 调到标记
3.跳到另一个html
4.跳到另一个html的name #加name的值
="2.html#nam的值"
target:1。把href中跳转的内容在什么中打开_self _blank新窗口-->
<!-- 列表分类
有序列表<ol>
无序列表<ul>
定义列表 <dl>-->
<ul type="square">
<li>游戏</li>
<li>动漫</li>
<li>新闻</li>
</ul>
水的化学式：
<ol type= "A">
<li>H<sub>2</sub>o</li>
<li>HO<sub>2</sub></li>
</ol>
<ol>
<li>3<sup>3</sup></li>
<li>2<sup>3</sup></li>
<li>3<sup>5</sup></li>
</ol>
<!--定义列表：dl标签 dd子标签 dt子标签 -->
<dl>公司情况
<dd><h1>销售部</h1></dd>
<dt>王老板</dt>
<dd><h1>开发部</h1></dd>
<dt>春boy</dt>
</dl>
<!-- 表格table标签 子标签tr(代表一行) tr子标签td(代表一列)-->
<table border="1" style="border-color: red;">
<!-- border宽度 style颜色 -->
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</table>
<table border="2" style="border-color: red">
<tr>
<th>学生成绩</th>
<th>科目</th>
<th>分数</th>
</tr>
<tr>
<td rowspan="2">张三</td><!-- 占的格数 -->
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>数学</td>
<td>122</td>
</tr>
<tr>
<td colspan= "2">总成绩</td>
<td>212</td>
</tr>
</table>
<!-- 音频标签：audio
属性：src:文件路径
autoplay:自动播放
controls:播放 暂停 进度 -->
<audio src="" controls></audio>
<!-- 视频标签：video
属性：src:文件路径
controls:播放 暂停 进-->
<video src="" controls></video>
<!-- ifram 内联窗口标签
属性：src
height 高度
width 宽度-->
<a href= "2.jpg" target="标记">我的简介</a>
<iframe name = "标记" height="500" width="500"></iframe>
<!-- 页面布局 -->
<header>头</header>
<section >体</section>
<footer>尾部</footer>
<!-- <input type="text">:文本框 对于文本框来说value 是输入的值 一般不要value
用户民:<input type="text" maxlength= "10"><br/> maxlength 使长度不能超过10
<input type="password" name= "mima">:密码框 name:给密码取名字才可以被传的action接收
对于按钮来说 value只是按钮的名字
<input type="button" value="登录">:在这value:按钮的名字
<input type="reset" value="重置">:相当于按钮 value:按钮的名字 可以清空列表中的字
<input type="submit" value="提交">:将东西传到 action
method 提交方式
action 提交到什么地方
readonly 文本框只能读不能改
disabled 按钮不能按
required 不可为空
placeholder 可覆盖的提示信息-->
<!-- 表单 要form开头 -->
<form method="get" action=""> <!-- action 链接到 -->
用户民:<input type="text" maxlength= "10" name="name"><br/>
密 码 :<input type="password" maxlength= "6" name= "mima" required><br/>
<input type="button" value="注册">
<input type="button" value="登录">
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
<!-- 有placeholder="用户民" 就不要前面的 用户民-->
<form method="get" action="2.jpg">
姓名:<input type="text" maxlength="3" required placeholder="请输入"/><br/>
年龄:<input type="number" min= "1" max= "100" step="10" /><br/>
密码:<input type="password" maxlength="6" required/>
<br/>
性别:男<input type="radio" name="sex" checked/><!-- radio 选择标识 -->
女<input type="radio" name="sex"/>
<!-- <label for="nan">
男<input type="radio" name="sex" value="男" id= "nan"/>
</label>
<label for= "nv">
女<input type="radio" name= "sex" value="女" id= "nv">
</label> -->
<br/>
爱好:
篮球<input type="checkbox" name= hobby value="篮球" checked/><!-- checked 默认选择 checkbox 多选-->
足球<input type="checkbox" name= hobby value="足球" checked/>
羽毛球<input type="checkbox" name= hobby value="羽毛球" checked/>
<br>
邮箱:<input type="email"/>
<br/>
电话:<input type="'text" pattern="[1][38][0-9]{9}"><!-- pattern 规定格式 -->
<br/>
智商:<input type="range" min="0" max= "100" step="20"><!-- 滑块 -->
<br/>
学历:
<select name= "学历">
<option>高中</option>
<option>专科</option>
<option>本科</option>
</select>
<br/>
<input type="reset" value="清空">
<input type="submit" value="提交">
</form>
CSS表现:
<!--
css 的3种样式：
1.行内样式：<p style="color:red;">p标签</p>
2.内部样式：
<style type="text/css">
p{
color:red;
}
</style>
3.外部样式：<link rel="stylesheet" href="1.css"/> (引入css文件)
4.外部导入：
<style type="text/css">
@IMPORT url("1.css")
</style> (导入css文件)
标签选择器：div{} 选择所有div标签
id选择器：#id{} 选择id的值为?的标签
类选择器：.class{} 选择class的值为?的标签
id选择器>类选择器>标签选择器 一般我们用类选择器较多
后代选择器：div a{} 选择div下所有的a标签（儿子孙子等只要是后代都能选到）
子类选择器：div>a{} 选择div下的直接子类a标签（只能选儿子）
兄弟选择器：p+a{} 选择在p后面一个的a标签（同级）
兄弟通用选择器：p~a{} 选择只要在p后面的a标签（同级）
结构伪类选择器：
1.选择div下面的第一个p标签：div p:first-of-type{} 注：不用保证第一个必须是p标签
2.选择div下面最后一个p标签：div p:last-of-type{} 注：不用保证第一个必须是p标签
3.选择div下面第n个p标签：div p:nth-child(2){} 注：要保证div下面的第二个标签是p标签 才能选中 所以案例中选择不到
3.选择div下面第n个p标签：div p:nth-of-type(2){} 注：不用保证div下面的第二个标签是p标签 所以案例中能选择到第二个p标签
属性选择器：
1.选择div下面有name属性 的p标签： div p[name]{}
2.选择div下面name属性值为p1 的p标签： div p[name="p1"]{}
3.选择div下面name属性值以p开头 的p标签： div p[name^="p"]{}
4.选择div下面name属性值以2结尾 的p标签： div p[name$="2"]{}
5.选择div下面name属性值包含p 的p标签： div p[name*="p"]{}
<p font-size:10px>;
-->
<!-- <style type="text/css">
p{
width: 400px;
height:150px;
border-style: solid;/*显示边框 solid实线 dashed虚线 border-bottom:1px dashed;只显示下面的线*/
border: red 1px dashed;/*直接设置框架 虚实线 颜色 宽度 不需要顺序*/
/*设置文本效果*/
text-align: center;/*中心对齐*/
text-indent: 10px;/*右偏移*/
text-decoration:none;/*underline下划线 none空 装饰*/
text-shadow: blue 0px 0px 0px;
/* 颜色 右偏移 下偏移 模糊大小*/
/*设置背景格式*/
background-color: gray;/*颜色背景*/
background-image: url("3.jpg");/*用图片做背景*/
background-repeat: no-repeat;/*设置是否重复 no-repeat不重复*/
background-size:cover;
/* covre:图片填充整个框 contain:完美显示图片*/
background-position: 50% 50%;/*背景图片的坐标*/
background:-webkit-linear-gradient(top,blue,white)/*渐变 linear线性渐变
radial 圆形渐变*/
display: inline-block;/*使块元素不换行*/
border-radius: 0px 0px 0px 0px;/*使块元素的框架变圆*/
padding:0px ;/*设置内边距*/ 配合 box-sizing:border-box;/*防止撑大*/
margin:0PX 0PX;/*设置外边距 水平居中第二个px改为auto*/
/*如果超出框显不显示 在上一级写*/ overflow: auto;
box-shadow:inset 0px 0px 50px blue;/*盒子阴影 加 inset 是内阴影 不加inset 外阴影*/
/*左偏移 右偏移 模糊度 颜色*/
}
span {
/*设置字体*/
font-family: "楷体" ;/*字体类型*/
font-size: 30px;/*字体大小 */
font-style: normal;
/*字体风格: 斜体oblique 、 normal默认*/
font-weight: bold;/*变粗*/
line-height: 50px;/*行高*/
color:red;
font: oblique bold 30px "隶书";/*字体风格 字体粗线 字体大小 字体类型*/
}
img{
vertical-align: middle;/*设置图片前后面字的位置 top在上 middle在中间*/
}
a:HOVER {
color: red; /*鼠标放在上面的样子*/
}
a:ACTIVE {
color: blue;/*鼠标点击未释放的样子*/
}
li{
list-style:none;/*设置li前面的样式 使他没点*/
list-style-image: url("3.jpg");/*设置列表样式图片（前面一个小图片）*/
display:inline-block;/*块元素变行元素 inline:行类元素 block块元素*/
display:none;/*可隐藏*/
float: left; /*浮动 left左浮动 right 右浮动*/
alt+shift+a /*在内容前面或后面添加*/
}
/*边框塌陷的解决办法
clear:both;清除两侧的浮动
设置父级元素高度
浮动后面加空的div
父级加overflow
父级加伪类after :
.clear:after{
content:"
display:
clear:both;
}
定位:
position:relative;/*relative相对定位:相对自己之前的位置 absolute绝对定位:不保留之前的位置 fixed固定定位:相对浏览器的位置 */
left:50px;
top: 50px;
/*50vh 浏览器高度的50%*/
/*50vw 浏览器宽度的50%*/
z-index: 0;/*层次*/5
opacity: 0.5;/*透明 0~1*/
input:checked/*checked选择到才执行 focus/*点入文本框才执行*/*/
*/
a:HOVER {
background-color:green;
/*动画*/
transform:translate(120px,50px) scale(2,1) rotate(45deg) skew(20deg,0deg);
/*translate位移 scale 横向放大 纵向放大 rotate旋转 skew水平、垂直倾斜*/
/*调整动画*/
transition:all 2s ease 0.5s;
/*动画的变化类型 整过程执行2s 变化由快变慢 延迟时间*/
}
@keyframes 随便取名{
0%{background-color:green;/*不同百分百时干什么*/
transform:scale(2,2)}
50%{background-color:red;
transform:scale(1,1)}
100%{background-color:blue;
transform:scale(2,2)}
}
a:HOVER {
animation 是引用
animation:haha 5s ease-in-out infinite 2s;
/*执行动画的名字 执行时间 变化方式 执行方式 延迟时间*/
<marquee></marquee>/*轮播*/
</style>
</head>
<body>
<p>
回忆总想哭,<span>一个的太孤单.</span>
</p>
<p>
这段情千山万水却迷路了,<span> 千辛万苦的付出.</span>
</p>
<p>
最后放弃了归路,<span>爱到最后剩无助.</span>
</p>
-->
</body>
</html>
<html>
<head>
<meta charsset="UTF-8">/*编码格式:utf-8、gbk(中文)*/
<title>名字</title>
</head>
<body>
<a name= "顶部"></a>
<p>段落标签</p>
<br/>换行标签
<hr/>水平线标签
<strong>加粗标签</strong>
<em>斜体标签</em>
"双引号";
空格符号
< <符号
>>符号
<img alt= "错误" src= "2.jpg" title="高清" height="300" width="500">
<!-- alt:如果找不到路径显示alt中的src:图片路径
height="高度"
title="鼠标移上去显示内容"
width="宽度"
-->
<a href= "#顶部" target= "_blank">回到顶部</a>
<!-- _blank是新建网页打超链接 -->
<!-- href:
1.http:// 直接跳到网站
2.#名字 调到标记
3.跳到另一个html
4.跳到另一个html的name #加name的值
="2.html#nam的值"
target:1。把href中跳转的内容在什么中打开_self _blank新窗口-->
<!-- 列表分类
有序列表<ol>
无序列表<ul>
定义列表 <dl>-->
<ul type="square">
<li>游戏</li>
<li>动漫</li>
<li>新闻</li>
</ul>
水的化学式：
<ol type= "A">
<li>H<sub>2</sub>o</li>
<li>HO<sub>2</sub></li>
</ol>
<ol>
<li>3<sup>3</sup></li>
<li>2<sup>3</sup></li>
<li>3<sup>5</sup></li>
</ol>
<!--定义列表：dl标签 dd子标签 dt子标签 -->
<dl>公司情况
<dd><h1>销售部</h1></dd>
<dt>王老板</dt>
<dd><h1>开发部</h1></dd>
<dt>春boy</dt>
</dl>
<!-- 表格table标签 子标签tr(代表一行) tr子标签td(代表一列)-->
<table border="1" style="border-color: red;">
<!-- border宽度 style颜色 -->
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</table>
<table border="2" style="border-color: red">
<tr>
<th>学生成绩</th>
<th>科目</th>
<th>分数</th>
</tr>
<tr>
<td rowspan="2">张三</td><!-- 占的格数 -->
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>数学</td>
<td>122</td>
</tr>
<tr>
<td colspan= "2">总成绩</td>
<td>212</td>
</tr>
</table>
<!-- 音频标签：audio
属性：src:文件路径
autoplay:自动播放
controls:播放 暂停 进度 -->
<audio src="" controls></audio>
<!-- 视频标签：video
属性：src:文件路径
controls:播放 暂停 进-->
<video src="" controls></video>
<!-- ifram 内联窗口标签
属性：src
height 高度
width 宽度-->
<a href= "2.jpg" target="标记">我的简介</a>
<iframe name = "标记" height="500" width="500"></iframe>
<!-- 页面布局 -->
<header>头</header>
<section >体</section>
<footer>尾部</footer>
<!-- <input type="text">:文本框 对于文本框来说value 是输入的值 一般不要value
用户民:<input type="text" maxlength= "10"><br/> maxlength 使长度不能超过10
<input type="password" name= "mima">:密码框 name:给密码取名字才可以被传的action接收
对于按钮来说 value只是按钮的名字
<input type="button" value="登录">:在这value:按钮的名字
<input type="reset" value="重置">:相当于按钮 value:按钮的名字 可以清空列表中的字
<input type="submit" value="提交">:将东西传到 action
method 提交方式
action 提交到什么地方
readonly 文本框只能读不能改
disabled 按钮不能按
required 不可为空
placeholder 可覆盖的提示信息-->
<!-- 表单 要form开头 -->
<form method="get" action=""> <!-- action 链接到 -->
用户民:<input type="text" maxlength= "10" name="name"><br/>
密 码 :<input type="password" maxlength= "6" name= "mima" required><br/>
<input type="button" value="注册">
<input type="button" value="登录">
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
<!-- 有placeholder="用户民" 就不要前面的 用户民-->
<form method="get" action="2.jpg">
姓名:<input type="text" maxlength="3" required placeholder="请输入"/><br/>
年龄:<input type="number" min= "1" max= "100" step="10" /><br/>
密码:<input type="password" maxlength="6" required/>
<br/>
性别:男<input type="radio" name="sex" checked/><!-- radio 选择标识 -->
女<input type="radio" name="sex"/>
<!-- <label for="nan">
男<input type="radio" name="sex" value="男" id= "nan"/>
</label>
<label for= "nv">
女<input type="radio" name= "sex" value="女" id= "nv">
</label> -->
<br/>
爱好:
篮球<input type="checkbox" name= hobby value="篮球" checked/><!-- checked 默认选择 checkbox 多选-->
足球<input type="checkbox" name= hobby value="足球" checked/>
羽毛球<input type="checkbox" name= hobby value="羽毛球" checked/>
<br>
邮箱:<input type="email"/>
<br/>
电话:<input type="'text" pattern="[1][38][0-9]{9}"><!-- pattern 规定格式 -->
<br/>
智商:<input type="range" min="0" max= "100" step="20"><!-- 滑块 -->
<br/>
学历:
<select name= "学历">
<option>高中</option>
<option>专科</option>
<option>本科</option>
</select>
<br/>
<input type="reset" value="清空">
<input type="submit" value="提交">
</form>
CSS表现:
<!--
css 的3种样式：
1.行内样式：<p style="color:red;">p标签</p>
2.内部样式：
<style type="text/css">
p{
color:red;
}
</style>
3.外部样式：<link rel="stylesheet" href="1.css"/> (引入css文件)
4.外部导入：
<style type="text/css">
@IMPORT url("1.css")
</style> (导入css文件)
标签选择器：div{} 选择所有div标签
id选择器：#id{} 选择id的值为?的标签
类选择器：.class{} 选择class的值为?的标签
id选择器>类选择器>标签选择器 一般我们用类选择器较多
后代选择器：div a{} 选择div下所有的a标签（儿子孙子等只要是后代都能选到）
子类选择器：div>a{} 选择div下的直接子类a标签（只能选儿子）
兄弟选择器：p+a{} 选择在p后面一个的a标签（同级）
兄弟通用选择器：p~a{} 选择只要在p后面的a标签（同级）
结构伪类选择器：
1.选择div下面的第一个p标签：div p:first-of-type{} 注：不用保证第一个必须是p标签
2.选择div下面最后一个p标签：div p:last-of-type{} 注：不用保证第一个必须是p标签
3.选择div下面第n个p标签：div p:nth-child(2){} 注：要保证div下面的第二个标签是p标签 才能选中 所以案例中选择不到
3.选择div下面第n个p标签：div p:nth-of-type(2){} 注：不用保证div下面的第二个标签是p标签 所以案例中能选择到第二个p标签
属性选择器：
1.选择div下面有name属性 的p标签： div p[name]{}
2.选择div下面name属性值为p1 的p标签： div p[name="p1"]{}
3.选择div下面name属性值以p开头 的p标签： div p[name^="p"]{}
4.选择div下面name属性值以2结尾 的p标签： div p[name$="2"]{}
5.选择div下面name属性值包含p 的p标签： div p[name*="p"]{}
<p font-size:10px>;
-->
<!-- <style type="text/css">
p{
width: 400px;
height:150px;
border-style: solid;/*显示边框 solid实线 dashed虚线 border-bottom:1px dashed;只显示下面的线*/
border: red 1px dashed;/*直接设置框架 虚实线 颜色 宽度 不需要顺序*/
/*设置文本效果*/
text-align: center;/*中心对齐*/
text-indent: 10px;/*右偏移*/
text-decoration:none;/*underline下划线 none空 装饰*/
text-shadow: blue 0px 0px 0px;
/* 颜色 右偏移 下偏移 模糊大小*/
/*设置背景格式*/
background-color: gray;/*颜色背景*/
background-image: url("3.jpg");/*用图片做背景*/
background-repeat: no-repeat;/*设置是否重复 no-repeat不重复*/
background-size:cover;
/* covre:图片填充整个框 contain:完美显示图片*/
background-position: 50% 50%;/*背景图片的坐标*/
background:-webkit-linear-gradient(top,blue,white)/*渐变 linear线性渐变
radial 圆形渐变*/
display: inline-block;/*使块元素不换行*/
border-radius: 0px 0px 0px 0px;/*使块元素的框架变圆*/
padding:0px ;/*设置内边距*/ 配合 box-sizing:border-box;/*防止撑大*/
margin:0PX 0PX;/*设置外边距 水平居中第二个px改为auto*/
/*如果超出框显不显示 在上一级写*/ overflow: auto;
box-shadow:inset 0px 0px 50px blue;/*盒子阴影 加 inset 是内阴影 不加inset 外阴影*/
/*左偏移 右偏移 模糊度 颜色*/
}
span {
/*设置字体*/
font-family: "楷体" ;/*字体类型*/
font-size: 30px;/*字体大小 */
font-style: normal;
/*字体风格: 斜体oblique 、 normal默认*/
font-weight: bold;/*变粗*/
line-height: 50px;/*行高*/
color:red;
font: oblique bold 30px "隶书";/*字体风格 字体粗线 字体大小 字体类型*/
}
img{
vertical-align: middle;/*设置图片前后面字的位置 top在上 middle在中间*/
}
a:HOVER {
color: red; /*鼠标放在上面的样子*/
}
a:ACTIVE {
color: blue;/*鼠标点击未释放的样子*/
}
li{
list-style:none;/*设置li前面的样式 使他没点*/
list-style-image: url("3.jpg");/*设置列表样式图片（前面一个小图片）*/
display:inline-block;/*块元素变行元素 inline:行类元素 block块元素*/
display:none;/*可隐藏*/
float: left; /*浮动 left左浮动 right 右浮动*/
alt+shift+a /*在内容前面或后面添加*/
}
/*边框塌陷的解决办法
clear:both;清除两侧的浮动
设置父级元素高度
浮动后面加空的div
父级加overflow
父级加伪类after :
.clear:after{
content:"
display:
clear:both;
}
定位:
position:relative;/*relative相对定位:相对自己之前的位置 absolute绝对定位:不保留之前的位置 fixed固定定位:相对浏览器的位置 */
left:50px;
top: 50px;
/*50vh 浏览器高度的50%*/
/*50vw 浏览器宽度的50%*/
z-index: 0;/*层次*/5
opacity: 0.5;/*透明 0~1*/
input:checked/*checked选择到才执行 focus/*点入文本框才执行*/*/
*/
a:HOVER {
background-color:green;
/*动画*/
transform:translate(120px,50px) scale(2,1) rotate(45deg) skew(20deg,0deg);
/*translate位移 scale 横向放大 纵向放大 rotate旋转 skew水平、垂直倾斜*/
/*调整动画*/
transition:all 2s ease 0.5s;
/*动画的变化类型 整过程执行2s 变化由快变慢 延迟时间*/
}
@keyframes 随便取名{
0%{background-color:green;/*不同百分百时干什么*/
transform:scale(2,2)}
50%{background-color:red;
transform:scale(1,1)}
100%{background-color:blue;
transform:scale(2,2)}
}
a:HOVER {
animation 是引用
animation:haha 5s ease-in-out infinite 2s;
/*执行动画的名字 执行时间 变化方式 执行方式 延迟时间*/
<marquee></marquee>/*轮播*/
</style>
</head>
<body>
<p>
回忆总想哭,<span>一个的太孤单.</span>
</p>
<p>
这段情千山万水却迷路了,<span> 千辛万苦的付出.</span>
</p>
<p>
最后放弃了归路,<span>爱到最后剩无助.</span>
</p>
-->
</body>
</html>
扫一扫
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
