HTML5_常用标签总结 img/ audio / video / table / list / form / input / select / textarea / fieldset / link

0x0000 常用文本标签

只使用 html5 还保留的标签

标签	作用
p	段落
pre	带格式段落
h数字	标题, 共七级
<hr/>	分割线, 注意要标准加上/
<br/>	换行, 注意要标准加上/
b	粗体
big	大号
em	加重
i	斜体
small	小号
sub	下标
sup	上标
ins	下划线
del	删除字

效果如下,

定义粗体文本。
定义加重语气。

定义小号字。
定义大号字。

定义斜体字。
定义着重文字

_{定义下标字。
^{定义上标字。}}
定义插入字。
定义删除字。

0x0001 <a> 超链接

属性	取值	作用
name	-	名字
href	url / #另一个超链接名字
target	_self, _blank, _top, 框架名

超链接里 可以包含图片, 使得图片也有超连接功能.

css修饰超链接实例 https://www.runoob.com/css/css-link.html

0x0010 <img> 图片

属性	取值	作用
align	top, bottom, middle, left ,right	图片位置
border	px	定义图像周围的边框。
hspace	px	图像水平空白
vspace	px	图像垂直空白
以上属性不推荐, 建议使用样式表	以上属性不推荐, 建议使用样式表	以上属性不推荐, 建议使用样式表
-	-	-
alt	-	代替图片的文字
src	url	图片的url
width	% / px	图像宽度
height	% / px	图像高度

css修饰图片实例 https://www.runoob.com/css3/css3-images.html

0x0011 音频相关多媒体标签

音乐播放

属性	取值	作用
src	url	位置
autoplay	-	自动播放
controls	-	显示控制按钮
loop	-	循环播放
muted	-	静音
preload	auto, metadata, none	控制加载视频

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

视频播放最佳解决方案

HTML5 + <object> + <embed>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object>
</video>

0x0100 <table> 表格

有关样式还是尽量用样式表吧, 这些属性不看也罢!

table属性	取值	作用
align(不赞成)	left, center, right	整个表格对齐方式
bgcolor(不赞成)	-	背景颜色
background(不赞成)	url	背景图片
cellpadding	% / px	单元格边与内容 空白
cellspacing	% / px	单元格之间 空白
frame	void above below hsides lhs rhs vsides box border	外侧边框哪个课件
rules	none groups rows cols all	内侧边框哪个可见
border	px	表格边框宽度
width	% / px	表格宽度
-	-	-
rowspan	数字	占几行
colspan	数字	占几列

表格相关标签	描述
caption	标题
tr	行
th	表头单元格
td	普通单元格
thead	页眉
tbody	主题
tfoot	页脚
colgroup	列组, 统一施加属性
col	列, span=数字, 表示覆盖列数

colgroup 和 col 示例

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

效果如下,

css修饰表格示例 https://www.runoob.com/css/css-table.html

0x0101 <list> 列表

注意ul的 type 属性 html5 已经弃用, 最好改用css!

相关标签	作用
ol	有序列表, type属性, 1, i, I, a, A
ul	无序列表, type属性: circle空心圆, disc空心圆, square实心方块
li	列表项目
dl	定义列表
dt	定义列表的项目
dd	定义列表的描述

css修饰列表实例 https://blog.csdn.net/cccBtrya/article/details/80398594

0x0110 <form> 以及输入框相关标签

0. <form>

属性	取值	作用
name	-	表单名字
action	url	向何处发送请求
method	get / post	发送请求
autocomplete	on / off	记忆功能
novalidate	novalidate	不对表单进行验证

1. <input>

使用css美化input

input{ /* input样式美化 */
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    padding: 13px 14px;
    width: 620px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Microsoft soft";
}
input:focus{ /* 聚焦发光 */
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

另一个版本的 … 先贴上 … 待总结 …

input{
  border: 1px solid #ccc;
  padding: 7px 0px;
  border-radius: 3px;
  padding-left:5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
input:focus{
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

2. <textarea>

<textarea rows="5" cols="20">
This is a text textare...
This is a text textare...
This is a text textare...
This is a text textare...
This is a text textare...
</textarea>

3. <select>

<select>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Opel</option>
  <option>Audi</option>
</select>

4. <datalist>

<input type="text" name="testList" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

5. <select> 与 <datalist> 区别

dataList 的表现很像是一个select下拉列表，但它只是提示作用，并不限制用户在input输入框里输入什么

select 标签创建了一个菜单。菜单里的选项通过option标签指定。一个select元素内部，必须包含一个option元素，

总的来说就是，它们都可以显示出一个下拉表单框，但是select标签只能在它提供的选项中选择，而datalist不仅可以让你选择，还可以让你自己输入其它的选项。

6. <fieldset>

<fieldset>
<legend>健康信息</legend>
  身高：<input type="text" />
  体重：<input type="text" />
</fieldset>

0x0111 <link> 连接标签

网页图标

<link rel="shortcut icon" type="image/x-icon" href="images/panda_test.ico"  />

外联式css文件

<link rel="stylesheet" type="text/css" href="mystyle.css" />

0x1000 <marquee> 跑马灯标签

属性	作用	取值
direction	方向	up, right, down, left
behavior	效果	scrol(默认循环滚动), slide(只滚动一次), alternate(来回交替滚动)
scrollamount	速度	像素值
scrolldelay	间隔	每次滚动间隔
loop	循环	默认为1

<marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" 
	onmouseover="this.stop()" onmouseout="this.start()">
	<p>content...</p>
</marquee>

0x1001 <details> 折叠框

点击则会展开内容

目前只有 chrome 和 safari 支持

summary是标题, 类似于表格的 caption

<details>
<summary>Click and open</summary>
<p>This is content...</p>
</details>

0x1010 <iframe> 新框架

frameset的替代品, 更加强大

在主文档里显示多个子文档

属性	值	描述
src	url	资源
srcdoc	代码	框架中使用的代码
name	-	框架名
scrolling	yes, no,auto	是否显示滚动条
frameborder	1, 0	是否显示框架边框
seamless	seamless	框架上去像是包含文档的一部分
width	-
height	-