HTML超文本标记语言2
二、基本标签
1.文件标签（结构）
<html>
根标签
<head>
<title>页面标题（标签）</title>
</head>
<body>
页面所有内容
包括：
text=“文本颜色”
bgcolor=“背景颜色”
background=“背景图”
颜色属性的拓展：
1.单词：red，green，blue 2.rgb三原色：rgb（red，green，blue），rgb（0，0，0），值范围0-255 3.#000000（黑色），#FFFFFF（白色），#FF0000，值范围#000000-#FFFFFF
</body>
</html>
2.排版标签
1）<!-- 注释标签 -->
2）换行标签<br/>
3）<p>段落标签：文本内容-文字</p>
段与段之间会有空行
对齐方式属性align=（三个属性值取其一）“left/center/right”
4）水平线<hr/>
长width=""
高size=""
色color=""
对齐属性align同上
尺寸（长、高）的表示方法：1.百分百（随着页面大小变化而变化，占据百分比的比例） 2.像素（例如：100px）
3.文字标签
<font>
基本文字标签
属性：1.color颜色（属性值上面有说明） 2.face字体 3.size大小（max：7 min：1 default：3）
</font>
说到文字标签，可必须得拉上标题标签扯上一扯。
<h1>标题标签</h1>
随着阿拉伯数字的增加字体随之减小，粗字体，大小是内置，默认占一行
......
<h6>标题标签</h6>
4.块标签
<div>
行级块标签：占据一行
用处：div+css
</div>
其他行级标签：p、ol、li、dl、dt、dd、h1~h6、form、ul
<span>
行内块标签：占据一行内的一小块
用处：设置提示、文字样式
</span>
其他行内标签：a、strong、b、i、u、label、br、em
5.清单标签/列表标签
1)
<ul>无序列表</ul>
<li>
列表项
属性（type）=“disc/square/circle”
disc：实心圆（默认）
square:实心方块
circle：空心圆
</li>
小例子：
<ul>
<li>列表项</li>
</ul>
2)
<ol>有序列表</ol>
<li>
列表项
属性（type）=“数字/字母/罗马字”，start（首选项开始）=“数字”
</li>
小例子：
<ol>
<li>列表项</li>
</ol>
作用：实现菜单（横/纵）
去除小圆点：这是无序列表标签自带属性，在HTML中无法直接去除。方法：在CSS中的li标签添加list-style：none；
6.链接标签
<a>
链接标签
href=“跳转页面地址”
name=“名字，锚点”
锚点说明：锚点链接是网页制作中超链接的一种
target=“_self（自己，默认） _blank（新页面打开，保留之前页面）”
用途：1.页面跳转。如需跳转外网需要加协议（超文本传输协议）http：//。 2.访问锚点，跳转到：顶部/底部/中间。格式：#name=“值”
</a>
7.图片标签
<img "图片标签/不需手动关闭"
src：照片的位置
alt：图片说明
width=“1.百分比 2.像素”：宽
height=“1.百分比 2.像素”：高 border=“1.百分比 2.像素”：框
align=“top/middle/bottom/left/right”：对齐：图片和相邻文本的相对位置
/>
8.表格标签
重点：table、tr、td、th
<table>
<caption>表格标题，默认居中，一个表格一个标题</caption>
<thead>表格页眉，用于组合HTML表格的表头内容，页眉内部必须有tr标签</thead>
<tbody>定义表格主体，用于组合HTML表格主体内容</tbody>
<tfoot>页脚，用于组合HTML表格的表注内容</tfoot>
thead、tbody、tfoot分块加载显示，由头到身体再到脚
表格标签
border=“1.百分比 2.像素”：框
width=“1.百分比 2.像素”
align对齐方式
<tr>
行，可有一个或多个th
align表格行对齐，bgcolor背景色
td和th皆为单元格：td表格单元格，包含数据。th表头单元格，包含表头。
作用：表格样式、页面布局
<td>
align表格内容对齐、height、width、bgcolor
colspan设定列合并，rowspan设定行合并
</td>
<th>
定义表格的表头。默认居中加粗
</th>
</tr>
</table>
示例：
body的代码
`
<hr align="center" size="10" width="50%" color="red"></hr>
<p align="center">真<br/>漂亮！</p>
<!-- 文字标签 -->
<h1 align="center" >忆江南</h1>
<font color="bule" size="2" face="宋体">白居易<br/></font>
江南好，风景旧曾谙。日出江花红胜火，春来江水绿如蓝。能不忆江南？<br/>
江南忆，最忆是杭州。山寺月中寻桂子，郡亭枕上看潮头。何日更重游？<br/>
江南忆，其次忆吴宫。吴酒一杯春竹叶，吴娃双舞醉芙蓉。早晚复相逢？<br/>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 块标签 -->
<div style="background-color:red">贼厉害1</div>
<span style="background-color:yellow">111</span>
<span style="background-color:red">贼厉害2</span>
<div style="background-color:red">贼厉害3</div>
<!-- 列表标签 -->
<!-- 无序,这里的缩进只是为了更好叙述，并无实际意义 -->
<ul >
<li type="square">列表1</li>
<li type="circle">列表2</li>
<li>列表4</li>
</ul>
<ul>
<li type="circle">列表3</li>
<li>列表4</li>
</ul>
<!-- 有序 -->
<ol type="1" start="2">
<li>清单1</li>
<li>清单1</li>
<li>清单1</li>
<li>清单1</li>
</ol>
<ol type="I" start="2">
<li>清单2</li>
<li>清单2</li>
<li>清单2</li>
<li>清单2</li>
</ol>
<ol type="A" start="3">
<li>清单3</li>
<li>清单3</li>
<li>清单3</li>
<li>清单3</li>
</ol>
<ol type="a" start="4">
<li>清单4</li>
<li>清单4</li>
<li>清单4</li>
<li>清单4</li>
</ol>
<!-- 链接，第一个“基本”链接到我HTML1的小实验的网址了 -->
<a href="basic.html" target="_blank"><br/>基本</a>
<br/>
<a href="pieceLabel.html">我还是我</a>
<br/>
<a href="#top">顶部</a><br/>
<!-- 图片标签，图片取自网络，若有侵权，联系即删 -->
<img src="../images/1.jpg" alt="mm" width="800" height="900" border="20%" align="top" />
<br/>
<!-- 表格 -->
<table border="5" align="center" height="20%" width="10%" bgcolor="yellow">
<caption>各专业收费</caption>
<tr>
<td>专业</td>
<td>学费</td>
<td>住宿费</td>
</tr>
<tr>
<td>网络</td>
<td>5xxx</td>
<td>xxx</td>
</tr>
<tr>
<td>自动化</td>
<td>7xxx</td>
<td>yyy</td>
</tr>
<tr>
<td>会计</td>
<td>8xxx</td>
<td>jjj</td>
</tr>
</table>
`
图例：
注：未经同意请勿转载，仅作学习使用。以上有描述不正确之处，望大家能不吝指出，共同学习共同进步。谢谢
