HTML常用标签大全
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
内容
</body>
</html>布局标签
<nav>导航</nav>
<header>
头部区域
</header>
<section>
区块标签
</section>
<footer>
尾部区域
</footer>figure 独立的流内容（图像、图表、照片、代码等等）。
article独立的文章内容
aside 侧边栏标签
div 块元素经常与 CSS 一起使用，用来布局网页
文本样式标签和转义字符
标题
<h1>1</h1>
<h2>2</h1>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>样式标签
<b>加粗</b>
<i>倾斜</i>
<s>删除线</s>
<u>下划线</u>
<font size=2>字体大小</font>
<font color="#fa8072">字体颜色</font>
<hr> 水平线
格式化标签
<br/> 换行
<center> </center> 居中
<span></span> 行标签(没有换行)
<kbd></kbd> 定义键盘码
<p></p> 行标签(自带换行)
<pre></pre> 块标签不解析内容
<code></code> 行标签不解析内容
<var></var> 定义变量以上很多都是语义化的,需要自行定义样式
转义字符
< <
> >
空格
© ©
® ®
™ ™列表标签和表格标签
列表
<!--无序列表-->
<ul>
<li>a</li>
<li>b</li>
</ul>
<!--有序列表-->
<ol>
<li>a</li>
<li>b</li>
</ol>
<!--自定义列表 没有圆点和需要-->
<dl>
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>..
</dl>
表格
<!-- cellspacing属性是单元格之间的空隙 cellpadding属性是控制整个单元格的大小 border 是边框粗细 align="center" 居中 left左 right右 style="text-align: center" 字体居中 其他的就需要使用css来控制了 -->
<table cellspacing="0" style="text-align: center" border="1px" >
<tr >
<th>标题</th>
<th>标题2</th>
</tr>
<tr>
<td>1</td>
<td >1</td>
</tr>
<tr>
<td >1</td>
<td>1</td>
</tr>
</table>
表单标签
<form> 表单
<label> 聚焦
<input> 输入框
<select> 选择框(下拉框)
<textarea> 文本域
对表单更详细的介绍可以在我博客里找
内联框架标签
<iframe src=”地址” width=” ” height=”” ></iframe>
iframe常用属性:
1.frameborder:是否显示边框，1(yes),0(no)
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.width:框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称
5.scrolling:框架的是否滚动。yes,no,auto。
6.src：连接页面的地址，可以使用本地址，也可以使用网络地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制，IE10+支持简单来说就是在HTML内部在嵌套一个HTML
超链接和锚链接标签
超链接
<a href="https://home.firefoxchina.cn/">火狐</a>
- _blank：另起一个窗口打开新网页 ；
- _self：在当前窗口打开新的网页链接（默认）;
- _parent：在iframe框架中使用，平时等同于_self ；
- _top：等同于_self；
- alt 图片加载失败显示
- title 鼠标悬浮提示
说明：a标签除了href属性和target="_blank"属性这两个常用属性外，还有很多属性，比如：download、name、rel等等属性。不常用就不介绍了，有兴趣的朋友可以自行研究一下。
锚链接
什么是锚链接 ?
锚链接就是点击超链接跳转到指定位置
在简单来说就跟目录一样 目录显示第2页 22行 那么我就跳转到第二页22行
1.在本页面跳转
通过 href=/#xx 找到 对应 <a id=xx 位置 或者name=xxx
方法一.在本页面 定位准确 跳转
[<a href="#reg"> 新用户注册帮助</a>]<br>
[<a href="#du"> 用户登录帮助</a>]<br>
<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="reg">新用户注册</a></h2>
<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="du">用户登录</a></h2>
<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>可以试试感觉
2.跳转到其他页面指定位置
index.html
[<a href="index_a.html#reg" target="_blank" > 新用户注册帮助</a>]<br>
[<a href="index_a.html#du" > 用户登录帮助</a>]<br>index_a.html
<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="reg">新用户注册</a></h2>
<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="du">用户登录</a></h2>
<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>可以试试感觉
3.跳转内联框架指定位置
通过 target页面跳转到指定name的内联框架中的锚链接
index.html
[<a href="index_a.html#reg" target="if_a" > 新用户注册帮助</a>]<br>
[<a href="index_a.html#du" target="if_a"> 用户登录帮助</a>]<br>
<iframe name="if_a" src="index_a.html" width="700px" height="500px" ></iframe>index_a.html
<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="reg">新用户注册</a></h2>
<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="du">用户登录</a></h2>
<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>可以试试感觉
图片音频视频标签
图片
<img src=”图片地址” alt=”图片不显示时候的提示语句” title=”鼠标悬停提示文字” width=”图片宽px” height=”图片高px”/>
如果宽高不写就默认原图片大小
img 的其他属性:
hspace 和 vspace 属性可以设置图像周围的空间。 类似于设置外边距效果
hspace:左边和右边的文字与图像之间的间距 单位像素(px)
vspace:上面的下面的文字与图像之间的距离 单位像素(px)
align 属性定义了图像相对于周围元素的水平和垂直对齐方式。
align的值:left(左)、right(右)、top(上) 、middle(中) 和 bottom(下)。
left 和 right 值会把图像周围与其相连的文本转移到相应的边界中；
其余的三个值将图像与其相邻的文字在垂直方向上对齐视频
controls提供播放暂停音量控制 必须有
autoplay 自动播放。 (一般不要设置 会增加页面的加载速度) 有的游览器会拦截
preload 视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略属性。属性值
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频
(一般不要设置 会增加页面的加载速度)
loop 媒介文件完成播放后再次开始播放 重复播放
width=”宽度” height=”高度”
muted 视频的音频应该被静音
<video width="320" height="240" controls >
<source src="img/1.mp4" type="video/mp4">
您的浏览器不支持 video 属性。
</video>
游览器的不同 显示的 视频 播放按钮的样式也是不同的
source支持写多个 游览器 从上到下 识别最适合他的 视频类型
音频
controls 向用户显示控件，比如播放按钮。
autoplay 自动播放。 (一般不要设置 会增加页面的加载速度) 有的游览器会拦截
loop 每当音频结束时重新开始播放
preload 音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 属性值
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频
(一般不要设置 会增加页面的加载速度)
<audio controls autoplay loop>
<source src="img/无羁.mp3" type="audio/mp3" >
游览器不支持此播放器
</audio>
游览器的不同 显示的 视频 播放按钮的样式也是不同的
source支持写多个 游览器 从上到下 识别最适合他的 音频类型
视频和音频的js事件
play()播放
pause()暂停
load()重新加载
document.getElementsByTagName("audio")[0].play();
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_45203607/article/details/120234610
内容来源于网络，如有侵权，请联系作者删除！