HTML 标签（小白入门版）
2020/10/31 第一版
<!doctype html>
<html lang="en"><!--html 根标签-->
<head><!--head 标签 头标签 保存网页中最重要的东西 -->
<!--这些信息我们在网页看不见 -->
<!--头标签里有很多子标签-->
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>HTML基础元素展示</title>
</head>
<body style="background-color: white;"><!-- body标签 是网页的身体，就是写类容的地方-->
<!--
这里是注释
-->
<!--
在HTML 中提供了标题标签 <h1>--<h6>
hn 标签的特点：
1.字体加粗
2.自动换行，并且行与行之间有一定间距
-->
<h1>我是标题1</h1>
<!--
<hr/> 标签在HTML 页面创建一条水平分隔线，用于定义内容中的主题变化
size属性：水平线的高度，单位为像素(px)
noshade属性：没有阴影，取值noshade，表示显示纯色
-->
<hr size = "7"/>
<h2>我是标题2</h2>
<hr size = "5" noshade="noshade"/>
<h3>我是标题3</h3>
<hr/>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<!--
字体标签<font>:字体，字体大小，颜色，尺寸
color属性：修改颜色 有两种形式
(1)单词名字
(2)#RGB
R 取值00-ff
G 取值00-ff
B 取值00-ff
例如：
#ff0000 红
#00ff00 绿
#0000ff 蓝
face属性：字体库
size属性：文字的大小，1-7 ，7最大
-->
<font size="1" color="red">字体标签</font>
<font size="2" color="orange">字体标签</font>
<font size="3" color="yellow">字体标签</font>
<font size="4" color="green">字体标签</font>
<font size="5" color="blue">字体标签</font>
<font size="6" color="purple">字体标签</font>
<font size="7" color="#0000ff">字体标签</font>
<!--
段落标签：<p></p> 为文字分段落
特点：上下有一定的空白
换行标签 :<br/>
-->
<!--
格式化标签
<b> :加粗
<i>：倾斜
-->
<br/>
<b>
<i>格式化标签(先加粗，后倾斜)<i/>
</b>
<p>
<i>
<b>格式化标签（先倾斜再加粗）</b>
</i>
</p>
<!--
列表标签：
<ul></ui>：无序列表
<ol></ol>：有序列表
列表标签中必须有列表项
<li></li>
ol 与 ul 的区别：
ol 每一个列表项有一个序号
ul 每一个列表项都是一个图案
ol 与 ul 的共同属性：
type属性：设置有序列表的序号 和 无序列表的图案
ol中的取值：1 a A i I
ul中的取值：circle(空心圆圈) disc(空心黑点) square(小方点)
-->
<ul type="circle">
<li>无序标签列表项</li>
<li>无序标签列表项</li>
<li>无序标签列表项</li>
</ul>
<ul type="disc">
<li>无序标签列表项</li>
<li>无序标签列表项</li>
<li>无序标签列表项</li>
</ul>
<ul type="square">
<li>无序标签列表项</li>
<li>无序标签列表项</li>
<li>无序标签列表项</li>
</ul>
<ol type="I">
<li>有序标签列表项</li>
<li>有序标签列表项</li>
<li>有序标签列表项</li>
</ol>
<ol type="i">
<li>有序标签列表项</li>
<li>有序标签列表项</li>
<li>有序标签列表项</li>
</ol>
<ol type="A">
<li>有序标签列表项</li>
<li>有序标签列表项</li>
<li>有序标签列表项</li>
</ol>
<ol type="a">
<li>有序标签列表项</li>
<li>有序标签列表项</li>
<li>有序标签列表项</li>
</ol>
<ol type="1">
<li>有序标签列表项</li>
<li>有序标签列表项</li>
<li>有序标签列表项</li>
</ol>
<!--
超链接标签：可以被点击，点击之后可以跳转至别的网页
<a>内容</a>
href：被点击之后跳转到一个网页
target：跳转后的目标位置
取值：_self: 在本页面打开超链接的网页
_blank：在空白页面打开超链接网页
framename:在指定的框架里打开
-->
<a href="https://www.baidu.com" target="_blank">百度</a><br/>
<a href="#" target="_self">超链接标签</a><br/>
<!--
表格标签：<table></table>
width：宽度 单位px
height：高度 单位px
align：整个表格在网页中显示位置
居中center
左对齐left
右对齐right
bgcolor:整个表格的背景颜色
行标签：<tr>
单元格：<td>
表头：<th></th> 单元格自动加粗 居中
-->
<table border="1px" width="400px" height="200px">
<tr align="center">
<th>表格标签</th>
<th>高度 宽度</th>
<th>位置</th>
</tr>
<tr align="center">
<td>行标签</td>
<td>单元格</td>
<td>表头</td>
</tr>
<tr align="center">
<td>背景颜色</td>
<td>8</td>
<td>9</td>
</tr>
</table></br>
<!--
合并单元格
<td>两个属性
rowspan:跨行合并，具体值为跨几行
colspan：跨列合并，具体值为跨几行
-->
<table border="1px" width="400px" height="200px" bgcolor="yellow">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!--
-->
<!--
-->
<!--
-->
<!--
-->
</body>
</html>
还在学习中,会不定时更新
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
