HTML常用标签整理

前端基础概念

网页的基本组成部分：文字、图片、超链接、视频、音频

五大浏览器和渲染引擎：IE浏览器、火狐浏览器、谷歌浏览器、Safari浏览器、欧朋浏览器

web标准：html（结构）+ css（样式）+ js（行为）

HTML全称（hypertext markup language）译为超文本标记语言，其译文代表了HTML的含义，它和其他编程语言不同的是，HTML不是一门真正意义上的编程语言，而是一种标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构搭建。

排版系列标签

<h1>标题1</h1>、<h2>标题2</h2>      标题标签，文字都有加粗、变大，h1~h6逐渐递减

<p>段落标签</p>       段落之间有默认的间隙，独占一行

<hr />        水平线标签，单标签，在网页中显示一条水平线

<br />        换行标签，单标签，强制换行

文本格式化标签

<b>加粗标签</b>        加粗        <strong></strong>语义更强

<u>下划线标签</u>        下划线        <ins></ins>语义更强

<i>倾斜标签</i>        倾斜        <em></em>语义更强

<s>删除线标签</s>        删除线        <del></del>语义更强

媒体标签

<img src="图片的路径" alt="替换文本" title="图片的标题" width="图片宽度"/>        图片标签

<audio src="音频路径" autoplay="自动播放" loop="循环播放">音频标签</audio>        音频标签

<video src="视频路径" controls="播放的控件" loop="循环播放">视频标签</video>        视频标签

链接标签

<a href="网址路径" target="设置跳转方式" >链接标签</a>        链接标签

列表标签

（1）ul无序列表，每一项放在li标签里

<ul>

        <li>每一项</li>

        <li>每一项</li>

</ul>       

（2）ol有序列表，每一项放在li标签里

<ol>

        <li>每一项</li>

        <li>每一项</li>

</ol>       

（3）dl自定义列表，里面只能放dt和dd标签

<dl> 

        <dt>小标题</dt>

        <dd>每一项</dd>

</dl>

表格标签

table标签表示表格整体，tr每一行，td每一个单元格，th表示表头，合并属性rowspan、colspan

<table border="边框" cellspacing="单元格外边距" cellpadding="单元格内边距">
            <tr><th>Header</th></tr>
            <tr><td>Data</td></tr>
</table>

表单标签

<input />        input标签可以通过type属性值的不同，表现不同的形态

（1）文本框

<input type="text" value=" " name="告诉后台发出去的数据是什么含义" placeholder="占位符"/>

value为用户输入的数据，如何提前在代码中设置好了，相当于是内容的默认值

（2）密码框

<input type="password" value=" " name=" " />

（3）单选框

 <input type="radio" value=" " name=" " checked=" " />

（4）多选框

<input type="checkbox" value=" " name=" " checked=" " />

（5）文件选择框

<input type="file" multiple="多文件选择" />

（6）表单按钮

<input type="submit" value="注册" />        提交按钮

<input type="reset" value="重填" />        重置按钮

<button></button>        button标签可以通过type属性的不同，表现不同的形态

（1）普通按钮

<button type="button">普通按钮</button>

（2）提交按钮

<button type="submit">提交按钮</button>

（3）重置按钮

<button type="reset">重置按钮</button>

下拉菜单，select为整体，option为每一项

<select name="">
    <option value=""></option>
</select>

<textarea rows=" " cols=" "></textarea>        文本域标签，用于输入大段文字

<label></label>        label标签，用于绑定文本和表单标签的关系

无语义布局标签

<div></div>      div标签独占一行，宽度默认是占满一行，高度默认由内容撑开

<span></span>        span标签一行中可以显示多个，宽度和高度默认都是由内容撑开

字符实体表示

&nbsp;        空格

&gt;        大于号

&lt;        小于号