HBuilder X基础标签讲解以及用法

<!--字体标签 font-->

<!--color:颜色size:字体大小(一般写(1~7))face:字体样式(记事本里拥有的字体样式)-->

<font color="#f00" size="6" face="">你好</font>

<!--字体标签 嵌套/应用-->

<h1>

<font color="#f00" size="6">全球</font>安全

</h1>

<!--字形标签加粗 <b>XXX</b>倾斜 i下划线 u-->

<b>HELLO</b>

<i>HELLO</i>

<u>HELLO</u>

<!--嵌套注：越在内层越要先结束！-->

<b><i><u>HELLO</u></i></b>

<!--无序列表 ul列表项标签 li-->

<!--属性 type(有三个值：disc:实心 circle:空心 square:实心正方形)-->

<h2>商店中的商品如下：</h2>

<ul>

<li type="disc">苹果</li>

<li type="circle">华为</li>

<li type="square">联想</li>

</ul>

<!--有序列表 ol列表项标签 li-->

<!--属性 type(有五个值：1 a A i I)-->

<!--属性 start 表示编号起始值-->

<h2>销售月度排行榜：</h2>

<ol type="" start="100">

<li>苹果</li>

<li>华为</li>

<li>联想</li>

</ol>

<h1>列表嵌套：以hl为例</h1>

<ul>

<li>国际新闻

<ul>

<li>体育

<ul>

<li>NBA

<ul>

<li>科比

<ul>

XXX冠军

</ul>

</li>

<li>詹姆斯</li>

</ul>

</li>

<li>NBAA</li>

</ul>

</li>

<li>娱乐</li>

</ul>

</li>

<li>国内新闻

<ul>

<li>体育</li>

<li>娱乐</li>

</ul>

</li>

</ul>

<!--定义列表 dl 通常用于名词解释dt:名词 dd:译-->

<dl>

<dt>HTML:</dt>

<dd>超文本传输协议</dd>

<dd>超文本传输协议</dd>

</dl>

<!--超链接 ahref 必须存在 表示链接地址-->

<!--基本写法：-->

<!-- <a href="链接的目标地址">文字或图片</a> target:表示链接目标的显示方式

_blank:在新开的窗口显示 title:表示链接的描述文本-->

<a href=" https://www.baidu.com/?tn=15007414_12_dg"><b><font color="#f00" size="6">百度</font></b></a>

<!--链接到其它页面-->

<a href="X.html" target="_blank" title="第二个页面">第二个页面</a>

<!--如何返回上一层..-->

<br>

<!--下载形链接压缩将要下载的文件(ese) -->

<!--规范 新建一个新目录将要下载的文件(MP3) 传输到该目录 目录名/文件名-->

<a href="aaa/">下载文件</a>

<!--书签式链接-->

<!--oneZhang.html为文件路径 #one为在进入的文件路径里定义的标签-->

<h1>小说的目录</h1>

<a href="oneZhang.html#one" target="_blank">第一章</a>

<br>

<a href="oneZhang.html#two" target="_blank">第二章</a>

<br>

<a href="oneZhang.html#tree" target="_blank">第三章</a>

<hr color="#f00">

<!--图标标签 img （无结束标签-->

<!--属性 src:必须的 表示图片地址

width/heigth：图片的宽和高，像素为单位；

border：图片边框，像素为单位；

title：鼠标在图片上方时显示的描述文本；

alt：当图片加载失败时，在图片位置显示的文本；

align：图片与周围文本的排列方式，取值：left（图片在左，文字在右环绕）、right；

hspace：图片水平方向左右的留白；

vspace：图片垂直方向上下的留白。

-->

<img src="img/A.gif" width="500" height="400" title="二次元" alt="加载失败" vapace="50">

<hr color="#f00">

<!-- 图片超链接 -->

<h1> 超链接图片 </h1>

<a href="oneZhang.html" target="_blank">

<img src="img/A.gif" width="500" height="400" title="二次元" alt="加载失败" vapace="50">

</a>

<hr color="#f00">

<!--音频标签 audio 5版本 arc:路径（.opg/.mp3）-->

<!--src：音频文件的路径；

controls：控制条；

autoplay：自动播放；

loop：重复播放次数；

muted：是否静音。

-->

<audio src="Music/AAA.mp3" controls="controls"

autoplay="autoplay" loop="loop">

当前浏览器不支持audio

</audio>

<!--第二种写法-->

<audio controls="controls">

<source src="Music/AAA.mp3" type="audio/mp3">

当前浏览器不支持audio

</audio>

<hr>

<!--视频标签 video-->

<!--width/height：视频的宽和高；

preload：是否进行视频预加载，取值：none、metadata或auto，分别表示：

none值表示不进行预加载；

metadata表示只预加载媒体的元数据（媒体字节数、第一帧、播放列表、持续时间

等）;

auto表示预加载全部视频或音频。

poster：视频封面图片。

其它属性与audio类似。

-->

<!--第一种写法-->

<!--

<video src="music/01.mp4" controls="controls"

muted="muted"

preload="auto" poster="img/dingdang.jpg"

width="800" height="">

当前浏览器不支持 video直接播放.

</video>

-->

<!--第二种写法-->

<!--

<video width="800" height="">

<source src="myvideo.mp4" type="video/mp4">

<source src="myvideo.ogv" type="video/ogg">

<source src="myvideo.webm" type="video/webm">

当前浏览器不支持 video直接播放。

</video>

-->

<hr color="#f00">

<!--表格标签:table 表标题:caption 行:tr 列标题:th -->

<!--table标签的关键属性：border:边框 cellspacing单元:格间距（常设为0）

cellpadding:单元格边距（常设为0）align:表格的水平对齐方式-->

<table border="1" bordercolor="#f00"

width="200" height="200" bgcolor="#d99" align="center"

cellspacing="0" cellpadding="0"><!--两行两列表格-->

<caption>表格标题</caption><!--表格标题标签-->

<!--tr标签的关键属性：

align：水平对齐

valign：垂直对齐方式（top、middle、bottom，分别表示上中下）

height：行的高度-->

<tr align="center" bgcolor="#ad2" height="30" valign="middle"><!--第一行-->

<!--tr是表示一列单元格里的全部 td则为一个单元格(属性与tr类似)-->

<!--align和valign：与tr类似

width：列的宽度

rowspan：跨行合并

colspan：跨列合并-->

<td>1</td><!--在行里有列第一列(单元格)-->

<td>2</td>

<!-- <th>学号</th> 列标题 文字加粗 居中-->

</tr>

<tr><!--第二行-->

<td>3</td>

<td>4</td>

</tr>

</table>

<hr color="#f00">

<!--表格合并-->

<table border="1" cellspacing="0" width="400" height="200">

<tr>

<td>

1

</td>

<td>

2

</td>

</tr>

<tr>

<td colspan="2">

3

</td>

</tr>

</table>

<hr size="5" color="#f00">

<table border="1" cellspacing="0" width="400" height="300">

<tr>

<td colspan="4"></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td rowspan="3"></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td colspan="2" rowspan="2" ></td>

</tr>

<tr>

<td></td>

</tr>