HTML标签案例

HTML基本结构
1.开始标签
2.文件头部标签
3.文件标题标签

常用特殊符号

特殊符号	符号码
“	&quot
>	&gt
&	&amp
©	&copy
<	&lt
®	&reg

标题字标签

<h1> 标题内容 <h1>

修饰文字标签

1.	<strong> 粗体文字</strong>
2.	<em> 斜体文字 </em>
3.	<u> 带下划线文字 </u>
4.	<sup> 上标标签 </sup>
5.	<sub> 下标标签 </sub>  

例如：

修饰字体标签

<font size="字号"  color="字体颜色"  face="字体"> 文字内容 </font>

例如：

    <!-- 注：颜色可为16进制颜色代码 -->
 <font size="5"  color="red"  face="verdana"> 文字内容(字体大小5，颜色为红色) </font>          <br>   
 <font size="-1" color="blue"  face="verdana"> 文字内容(字体大小-1，颜色为蓝色) </font>

例：

段落标签<P>

	<!-- 注:单独使用<P>标签来划分段落 -->
	<p> 段落文字 </p>

取消文字换行标签<nobr>

    <!-- 注：使用后，当浏览器宽度不够，会出现滚动条 -->
    <nobr> 不换行显示文字 <nobr>

修饰段落的对齐属性align

<p align=""></p>

    <!-- 注：想要段落左对齐或右对齐或居中 -->
    <p align="center">我在中间</p>
    <p align="left">我在左边</p>
    <p align="right">我在右边</p>

保留原始排版标签<pre>

    <!-- 注：例在vscode中对大多数标签都是是忽略空格的 -->
    <pre>保留的排版样式</pre>

例：

   <pre>
        0000
    00        000    
     0        0
       0 0 0
    </pre>

显示为：

        0000
    00        000
     0        0
       0 0 0
    

插入图片标签<img>

<img src="图片地址">

属性	说明
src	图像的源文件
border	边框
alt	提示文字
vspace	垂直间距
width ，height	高度，宽度
hspace	水平间距

列表的主要标签

标签	描述
<ul>	无序列表
<ol>	有序列表
<dir>	目录列表
<dl>	定义列表
<menu>	菜单列表
<dt> <dd>	定义列表标签
<li>	列表项目标签

注：常见li标签
链接标签<a href>

 <!-- href后面接需要跳转的URL地址 -->
 <a href="URL"> 链接元素 </a>  

例如：

 <a href="https://www.baidu.com/"> 跳转百度点击这 </a>   

HTML中的表格

绘制表格
HTML中表格一般通过3个标签来建立

例：他们的之间的一般关系

标题单元格

    <!-- 注：value为标题内容 -->
    <caption> value <caption> 

设置表格的宽度和高度

   <table width=value height=value> </table>

例：

设置表格的边框色

<table bordercolor=value>  </table>

例：

设置表格的对齐方式

    <!-- 注：value取值为left right center  -->
    <table align="value"> </table> 

例：

设置表格的背景颜色

    <!-- 注：可用颜色名称或十六进制颜色值-->
    <table bgcolor="value"> </table> 

设置表格的背景图片

    <!-- 注：value图片的地址-->
    <table background=value></table> 

例：

行标签<tr>属性
<tr>标签的属性用于设定表格中每一行属性
1.设置行的高度

        <!-- 注：设置行高度只对本行有效 -->
        <tr height="value"></tr>

2.设置行的边框颜色

<tr bodercolor=value> </tr>

3.设置行的背景颜色

<tr bgrcolor=value> </tr>

4.设置行的水平位置

        <!-- 注：表格对齐方式 -->
        <tr align=value> </tr>  

例：你看td标签随内容改变相应表格大小

5.设置行的垂直位置

    <!-- 注：value为top，middle，bottom -->
    <tr valign=value> </tr> 

单元格标签<td>属性
注：<td>与<table>属性十分相似，但table用来框出一个整体
同理：
属性：width 、height、 border 、align（水平）、 valign（垂直）、bgcolor 、background等等等等
1.设置单元格的水平跨度

    <!-- 注：用于水平合并单元格 -->
    <td colspan=value> 

例：

2.设置单元格垂直跨度

    <!-- 注：用于垂直合并单元格 -->
    <td rowspan=value>  

例：

总结：表头标签<th>属性

标签	描述
Align	设置单元格内容的水平对齐位置
Valign	设置单元格内容的垂直对齐位置
Bgcolor	设置单元格的背景颜色
Background	设置单元格的背景图片
Width	设置单元格的宽度
Height	设置单元格的高度
Rowspan	设置单元格的水平跨度
Colspan	设置单元格的垂直跨度