1. 标题标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!-- h1------h6 -->
<h1 align="leff">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3 align="right">
<font color="red">三级标题</font>
</h3>
</body>
</html>2. 文本的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<b>加粗文字</b>
<br>
<i>斜体文字</i>
<br>
<s>带有删除线的文字</s>
<br>
<u>带有下划线的文字</u>
<br>
<h1>一行标题</h1>
<!-- 下划线 -->
<hr color="aqua" width="80%" align="left" size="1">
</body>
</html>3. 文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<font size="" color="">默认的文字显示</font>
<kbd>用粗体等宽字体显示文字</kbd>
<var>用较小的固定宽度显示字体</var>
<dfn>用于名词解释，斜体显示</dfn>
<em>强调文字</em>
<address>模拟信封上的字体</address>
<strong>加强文字</strong>
<font size="" color="">默认的文字大小</font>
<big>比默认字号大一号</big>
<small>比默认字号小一号</small>
<code>以等宽字体显示计算机程序代码
int a=100;
int b=200;
</code>
<br>
<font size="7" color="blue">
CO<sub>2</sub>
<br>
2<sup>3</sup>
</font>
<hr >
<b>长恨歌</b>
<br>
作者：白居易
<br>
汉皇重色思倾国，御宇多年求不得。<br>
杨家有女初长成，养在深闺人未识。<br>
天生丽质难自弃，一朝选在君王侧。<br>
回眸一笑百媚生，六宫粉黛无颜色。<br>
<hr >
<!-- pre 保持我原来的排版 -->
<pre>
长恨歌_百度汉语
作者：白居易
汉皇重色思倾国，御宇多年求不得。
杨家有女初长成，养在深闺人未识。
天生丽质难自弃，一朝选在君王侧。
回眸一笑百媚生，六宫粉黛无颜色。
春寒赐浴华清池，温泉水滑洗凝脂。
侍儿扶起娇无力，始是新承恩泽时。
云鬓花颜金步摇，芙蓉帐暖度春宵。
春宵苦短日高起，从此君王不早朝。
承欢侍宴无闲暇，春从春游夜专夜。
</pre>
</body>
</html>4. 背景标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!--bgcolor="aquamarine" 页面的背景颜色
background="img/coder10.jpeg" 设置页面的背景的图片
绝对路径：带有盘符号的详细路径
相对路径：不带有盘符号，彼此相对来说
-->
<body bgcolor="aquamarine" background="img/coder10.jpeg">
</body>
</html>5. 图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>插入图片</h1>
<!--
src="img/2.jpg" 图片的路径
width="200px" 图片的宽
height="200px" 图片的高
border="2" 边框
alt="图片加载失败" 图片加载失败时的文字提示
title="美女" 鼠标移动上图片有个提示
-->
<img src="img/2.jpg" width="200px" height="200px" border="2" alt="图片加载失败" title="美女">
<br>
<img src="img/10.jpg" >
<img src="http://www.westos.org/img/1.png" width="100px" height="200px" >
</body>
</html>6. 列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Html学习大纲</h1>
<!-- 无序列表 type="square" 可以设置列表项前面的几何图形-->
<ul type="square">
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
</ul>
<!-- 有序列表 -->
<h1>Html学习大纲2</h1>
<!-- type="A" 有序列表的序号类型，可以取数组，字母 -->
<ol type="1" start="1">
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>什么是喜欢</dt>
<dd>喜欢就是比爱少一点点</dd>
<dt>什么是爱</dt>
<dd>爱是比喜欢多一点点</dd>
</dl>
<h1>Html学习大纲</h1>
<!-- 无序列表 type="square" 可以设置列表项前面的几何图形-->
<ul type="square">
<li>Html 概念的介绍
<ol type="1" start="1">
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
</ol>
</li>
<li>Html 概念的介绍
<ul>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
</ul>
</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
<li>Html 概念的介绍</li>
</ul>
</body>
</html>7. 段落标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>xxxxxxxxxxx</h1>
<hr >
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<img src="https://...." >
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</body>
</html>8. 转义字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>这是 <">>一个标题文字</h1>
<h1>¥</h1>
<img src="img/zhuanyi.png" >
</body>
</html>9. 超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 超链接标签可以进行页面之间的跳转 -->
<!-- 跳到别的网站 -->
<a href="https://www.baidu.com">进入百度</a>
<a href="https://www.163.com">进入网易</a>
<!-- 自己网站的页面跳转
href="index.html" 链接的地址
target="_blank" 新建一个窗口打开 默认值
target="_self" 在自身窗口打开
-->
<a href="index.html" target="_blank">进入我们自己的首页</a>
<a href="2.文本的标签.html" target="_self">进入我们自己网站的页面</a>
<a href="#">空链接</a>
</body>
</html>10. 锚点标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 定义一个锚点 -->
<a name="top"></a>
<h1>xxxxxxxxx</h1>
<hr >
<p>
<a href="#dibu">跳到底部</a>
</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<img src="https://..." >
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p align="left">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<hr >
<img src="https://..." >
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<img src="https://..." >
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p align="left">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<!-- 锚点，给锚点起个名字 -->
<a name="dibu"></a>
<!--跳到顶部的锚点 -->
<p>
<a href="#top">跳到顶部</a>
</p>
</body>
</html>11. 表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<!-- 表格标签最早用于页面布局
table 表格
tr 表示行
td 单元格
-->
<!--
align="center" 表格的对齐方式，左中右
border="1" 表格的边框粗细
bordercolor="red" 边框颜色
cellspacing="0" 边框的间隙 不要间隙给成0
cellpadding="0" 单元格里面的容和单元格的内间距
width="800px" 表格宽 可以给百分比
height="400px" 表格高 可以给百分比
background="img/coder8.jpg8" 背景图片
bgcolor="antiquewhite" 背景颜色
-->
<h1 align="center">学生信息表</h1>
<table background="img/coder8.jpg8" bgcolor="antiquewhite" align="center" border="1" bordercolor="red" cellspacing="0" cellpadding="0" width="800px" height="400px">
<!-- <caption>
<h3>学生信息表</h3>
</caption> -->
<tr height="30px">
<!-- <th> 作为表头单元格 可以让内容加黑加粗，并居中对齐-->
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th width="400px">手机</th>
</tr>
<!--align="center" 可以使用在行上，也可以使用在单元格 -->
<tr align="center" bgcolor="yellowgreen">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>13999996666</td>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>13999996666</td>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>13999996666</td>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td bgcolor="blueviolet">男</td>
<td>13999996666</td>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>13999996666</td>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
<td align="left">13999996666</td>
</tr>
</table>
</body>
</html>12. 合并单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table align="center" border="1" bordercolor="red" cellspacing="0" width="50%" height="500px">
<tr>
<!-- colspan="2" 左右合并 -->
<td colspan="2">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td colspan="3">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<!-- rowspan="2" 上下合并 -->
<td rowspan="2">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td rowspan="2">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>13. 合并的单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table align="center" border="1" bordercolor="blue" cellspacing="0" width="500px" height="300px">
<tr>
<td>Data</td>
<td colspan="3">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td rowspan="2">Data</td>
</tr>
<tr>
<td>Data</td>
<td colspan="2">Data</td>
</tr>
</table>
<hr>
<br>
<br>
<br>
<table align="center" border="1" bordercolor="red" cellspacing="0" cellpadding="0" width="500px" height="600px">
<tr>
<td rowspan="5" width="200px" height="500px">
<img height="500px" width="200px" src="img/u1096790207581763790fm11gp0.jpg" >
</td>
<td width="300px">商品名称:手机</td>
</tr>
<tr>
<td>
<font color="blue">商品价格</font>
</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr height="100px">
<td colspan="2" align="right">
<button type="button">加入购物车</button>
</td>
</tr>
</table>
</body>
</html>14.可以采用表格来布局但是现在不推荐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" width="100%" height="120px">
<tr>
<td width="200px"></td>
<td width="80px">
<img src="img/logo.png">
</td>
<td>
</td>
<td width="600px">
<font size="5">西部开源欢迎你!</font>
</td>
<td width="50px"><img src="img/phone1.png" width="50px" height="50px"></td>
<td>
<font size="5" color="">029-86699937 88262419</font>
</td>
<td width="200px"></td>
</tr>
</table>
<table bgcolor="#3E89FC" border="0" cellspacing="0" width="100%" height="100px">
<tr>
<td>
<font size="4" color="white">
首页
课程中心
教育体系
新闻资讯
学习资料
Linux企业化</font>
</td>
</tr>
</table>
<table border="0" width="100%" height="650px">
<tr>
<td><img height="650px" src="img/banner4.jpg" width="100%"></td>
</tr>
</table>
</body>
</html>15. 表格嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table align="center" border="1" cellspacing="0" bordercolor="red" width="500px" height="600px">
<tr height="100px">
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr height="400px">
<!-- 在单元格里面，嵌套表格 -->
<td width="100px">
<table height="100%" width="100%" border="0" cellspacing="" cellpadding="0">
<tr>
<td>1.Data</td>
</tr>
<tr>
<td>2.Data</td>
</tr>
<tr>
<td>3.Data</td>
</tr>
<tr>
<td>4.Data</td>
</tr>
<tr>
<td>5.Data</td>
</tr>
<tr>
<td>6.Data</td>
</tr>
<tr>
<td>7.Data</td>
</tr>
</table>
</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>16. 表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 align="center">注册用户</h1>
<!-- 表单就是让用户和服务器进行数据的交互 -->
<!--
action="#" 表单提交的后台地址
method="get" 提交方式 get post
-->
<!--input 表单项，必须要提供 name属性 作为键 value 作为值
type="text" 表单项的的类型，比如是文本框，密码框，单选框
给后台提交时，就会以键值的形式来提交
例如： username=zhangsan&password=123456
placeholder="请输入用户名" 输入框默认的提示内容
required="required" 输入框必须填写内容
maxlength="10" 内容长度最大10个字符
-->
<center>
<form action="#" method="get">
用户名：<input type="text" name="username" value="" placeholder="请输入用户名" required="required" maxlength="10" />
<br>
密码：<input type="password" name="password" value="" placeholder="请输入密码" required="required" maxlength="10" />
<br>
<!--
几个单选框作为一组，要互斥，你必须把name属性值设置为一样，这样的话一次只能选一个
checked="checked" 默认选中
-->
性别:<input type="radio" name="sex" value="1" checked="checked" />男 <input type="radio" name="sex" value="0" />女
<!-- 你可以点击字，也可以勾选上 -->
<input id="yao" type="radio" name="sex" value="2" />
<label for="yao">妖</label>
<br>
生日：<input type="date" value="" />
<br>
<!-- 多个复选框name属性值要一样，作为一组
checked="checked"默认选中项
-->
爱好:<input type="checkbox" name="hobby" value="lanqiu" checked="checked" /> 篮球
<input type="checkbox" name="hobby" value="zuqiu" checked="checked" /> 足球
<input type="checkbox" name="hobby" value="ppq" id="pp" />
<label for="pp">乒乓球</label>
<br>
<!--
selected="selected" 默认选中项
-->
学历：<select name="xueli">
<option value="">--请选择你学历--</option>
<option value="youeryuan">幼儿园</option>
<option value="xiaoxue">小学</option>
<option value="zhongxue">中学</option>
<option value="daxue" selected="selected">大学</option>
</select>
<br>
个人描述：
<textarea rows="5" cols="30" name="desc">
请输入备注内容
</textarea>
<br>
数量:<input type="number" name="count" id="" value="1" min="1" max="10" />
<br>
上传文件：<input type="file" name="photo" />
<br>
<!-- 提交按钮和重置按钮，不需要写name属性
input 表单项
type="submit" 表单项的类型 submit 就是提交按钮类型，你一点击，就会往后台提交表单
-->
<!-- -->
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</form>
</center>
</body>
</html>17. 框架标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- 框架标签，可以将页面切割成独立的几部分，每一部分，可以引用单独一个HTML页面
注意：框架标签不能和body同时使用
rows="25%,*" 上下分割
-->
<frameset rows="25%,*" border="1" bordercolor="red">
<!-- 上面的一部分 -->
<!-- noresize="noresize" 不要让用户能够拖动框架 -->
<frame src="top.html" noresize="noresize"/>
<!-- 下面的一部分 -->
<!-- <frame src=""/> -->
<frameset cols="25%,*">
<!-- 左边的连接 -->
<frame src="left.html" noresize="noresize"/>
<!-- 右边主体部分 给主体部分的框架，起个名字
scrolling="auto" 滚动条的设置 auto yes no
-->
<frame name="content" src="http://www.westos.org" noresize="noresize" scrolling="auto"/>
</frameset>
</frameset>
</html>18. 画中画标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 使用iframe标签在页面嵌入视频 -->
<iframe
width="500px"
height="500px"
src="//player.bilibili.com/player.html?aid=886410537&bvid=BV1KK4y1p7M4&cid=288792143&page=1"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true">
</iframe>
<iframe src="//player.bilibili.com/player.html?aid=13248989&bvid=BV1ox411n7eY&cid=21802553&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>19. 音视频标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- html4提供的 -->
<embed src="mp3/怨苍天变了心%20方季惟.mp3" autostart="true" loop="true" height="120px" width="600px">
<embed src="mp4/video.mp4" autostart="true" loop="true" height="600px" width="600px">
<hr >
<!-- html5提供的音视频标签 -->
<audio src="mp3/怨苍天变了心%20方季惟.mp3" loop="loop" autoplay="autoplay" controls="controls">
当前浏览器不支持audio
</audio>
<hr >
<video src="mp4/video.mp4" width="800" height="800" autoplay="autoplay" controls="controls">
</video>
<video src="mp4/mi.mp4" width="800" height="800" autoplay="autoplay" controls="controls">
</video>
</body>
</html>20. 行标签和块标签以及行内块标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
行标签：标签，不会默认占据一行的位置，他的内容实际有多宽就占据多宽 b s i a font
块标签：标签，会占据一整行的位置 h1--h6 ul li
行内块标签：不会默认占据一整行，但是他可以使用块标签CSS属性。
-->
<b>文本加粗的标签，他是一个行标签</b> <b>文本加粗的标签，他是一个行标签</b> <b>文本加粗的标签，他是一个行标签</b>
<h1>abc</h1>
<font size="7" color="red">font 标签也是行标签</font> <font size="7" color="red">font 标签也是行标签</font>
<ul>
<li>asdfasdf </li>
<li>asdfasdf </li>
</ul>
<button type="button">一个按钮</button>
<button type="button">一个按钮</button>
<button type="button">一个按钮</button>
</body>
</html>21. 行标签块标签行内跨标签的特点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*CSS 对 行标签进行宽高的设置不起作用 ，对上下间距设置不起作用*/
font{
height: 500px;
width: 500px;
margin-top: 300px;
/* 行标签设置左右间距时生效的 */
margin-left: 500px;
}
/* CSS 设置宽高，和上下左右间距，都生效 */
h1{
margin-top: 1000px;
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<font>行标签</font><font>行标签</font>
<h1>块标签</h1>
</body>
</html>22. 行内块的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
height: 600px;
width: 500px;
margin-top: 50px;
margin-left: 50px;
}
</style>
</head>
<body>
<!-- button 属于行内块标签，不会占据一整行，但是会对设置宽高，上下左右间距，都会生效 -->
<img src="img/1.jpg" > <img src="img/1.jpg" >
</body>
</body>
</html>23. 行内块标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* */
button{
height: 200px;
width: 300px;
margin-top: 50px;
margin-left: 50px;
}
img{
height: 600px;
width: 200px;
margin-top: 150px;
margin-left: 250px;
}
</style>
</head>
<body>
<!-- button 属于行内块标签，不会占据一整行，但是会对设置宽高，上下左右间距，都会生效 -->
<button type="button">一个按钮</button><button type="button">一个按钮</button>
<img src="img/1.jpg" > <img src="img/1.jpg" >
</body>
</body>
</html>24. 纯净的块标签和行标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
font-weight: 900;
}
</style>
</head>
<body>
<!-- 所谓的不纯净，就是指这个标签会默认自带一些样式，比h1 你会对文字加黑加粗字号变大 -->
<h1>不是一个纯净的块标签</h1>
<ul>
<li>asdfasdfasdf</li>
<li>asdfasdfasdf</li>
</ul>
<!-- 有一个纯净的块标签 div 他的样式由我们使用CSS来控制 -->
<div id="">
abc
</div>
<div id="">
abc
</div>
<b>不纯净的行标签</b>
<hr >
<b>asdfasdfsd</b>
<s>阿斯顿发送到发斯蒂芬</s><s>阿斯顿发送到发斯蒂芬</s>
<!-- 一个纯净的行标签span -->
<span>纯净的行标签</span><span>纯净的行标签</span>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
