HTML常用标签总结

html

标题标签：h1-h6

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

段落标签

<p></p>

换行标签：

<br/>

文本格式化标签

粗体 <strong></strong>、<b></b>
斜体 <em></em>、<i></i>
删除线 <del></del>、<s></s>
下划线 <ins></ins>、<u></u>

div和span标签

<div></div>
<span></span>

图片标签

 <img src="" alt="替换文本" title="提示文本" width="200" height="200" border="10"/>

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示的文字
title	文本	提示文本。鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

路径

目录文件夹（普通文件夹）和根目录（打开目录文件夹的第一层）

相对路径

• 同一级路径 直接填入文件名字； 例如： src=“1.jpg”
• 下一级路径 /；
• 上一级路径 …/； 其中…/表示跳出当前文件夹

绝对路径

指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

超链接标签 anchor

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，必须
target	用于指定链接页面打开的方式，_self为默认值，_blank为新窗口打开

链接类型：外部链接、内部链接、空连接#、下载链接

• 锚点链接 #id名

注释标签和特殊字符

1. <!-- 注释字符 -->
   

2. 特殊字符

特殊字符	字符代码
空格符	&nbsp
小于号	&lt
大于号	&gt
和号	&amp
版权	&copy
注册商标	&reg

表格标签

<table>
    <thead>
        <tr>
            <th>表头单元格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>普通单元格</td>
        </tr>
    </tbody>	
</table>

 表格属性：align、border、cellpadding、cellspacing、width、height。
 表格结构标签 <thead></thead>、<tbody></tbody>
 合并单元格
    跨行合并：rowspan="合并单元格的个数"
    跨行合并：colspan="合并单元格的个数"

列表标签

无序列表

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

有序列表

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

自定义列表

<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
</dl>

表单标签

<form action="" method="" >
<!-- input输入表单元素-->
	<!-- type="属性值": text,password,radio,button,checkbox，file,hidden,image,reset,submit,text-->
	<label for="text">用户名</label><input type="text" name="username" value="请输入用户名" maxlength="6" id="text"></input>
	<input type="password" name="password" value="请输入密码" maxlength="6"></input>
	<!--单选按钮-->
	<input type="radio" name="sex" value="男" checked="checked"></input>
	<input type="radio" name="sex" value="女" ></input>
	<!--复选框-->
	<input type="checkbox" name="hobby" value="吃饭" id="nan"><label for="nan">男</label></input>
	<input type="checkbox" name="hobby" value="睡觉" checked="checked"></input>
	<input type="checkbox" name="hobby" value="打豆豆" ></input>
	<!--文件域-->
	上传文件：<input type="file"></input>
    <input type="file"></input>
    <input type="button" value="发送短信验证码"></input>
    <input type="reset" value="点击提交"></input>
	<input type="submit" value="点击提交"></input>
<!-- 下拉表单元素-->
	<select>
         <option selected="selected">河北</option>
         <option>天津</option>
         <option>北京</option>
	</select>
<!-- textarea文本域表单元素-->
	<!-- cols:每行多少字符，rows:几行-->
	<textarea cols="50" rows="4"></textarea>
</form>

注：学会查阅文档 推荐网址

百度、W3school（https://www.w3school.com.cn/）、MDN（https://developer.mozilla.org/zh-CN）

HTML5的新特性

1. 新增的语义化标签

<header></header>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<footer></footer>

2. video视频标签：支持mp4、webM、Ogg格式，尽量使用mp4格式

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels	设置播放器宽度
height	pixels	设置播放器高度
loop	loop	循环播放
preload	auto(预先加载视频) none(不应加载视频)	规定是否预加载视频，如果有了autoplay,就忽略该属性
src	url	视频url地址
poster	imgurl	封面图片
muted	muted	静音播放

3. audio音频标签：支持mp3、wav、ogg格式

​ 常见属性：autoplay、controls、loop、src。用法与video标签一致

4. input表单

   属性值：email、url、date、time、month、week、number、tel、search、color

5. 新增的表单属性
   required（必填）
   placeholder（提示信息）
   autofocus（自动聚焦属性）
   autocomplete（需要与name一起使用，值为off或者on）
   multiple（可以多选文件提交）