HTML5标签知识整理

html 结构

head title base meta link body

单标签

1
2
3
4
hr  线  
br  换行
img  <img src = ""  lalt =“文字”/>
base  meta

双标签

1
2
3
4
5
6
7
8
a  超链接  href ="路径"  title ="提示" 
p 段落
strong       b
em   i
ins  u
del   s
sup   sub 
h1-H6

列表

1
2
3
有序列表 <ol> <li> </ol>
无序列表<ul> <li> </ul>
自定义列表<dl> <dt></dt><dd><dd></dl>

表格

1
2
3
4
5
<table width="700" height="500" border="2" align="center" cellspacing="0" cellpadding="0"> </table>
<caption>表格标题</caption>
<thead><tr align="center"><th>表头</th> </tr></thead>
<tbody><tr align="center"><td>内容</td><tr><tbody>
合并单元格  合并两行:rowspan合并两列:colspan 同时删除要被合并的单元格

css属性

vertical-align 对齐方式

1
vertical-align : baseline |top |middle |bottom 
1
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
1
2
3
4
去除图片底侧空白缝隙
解决方法：
给img vertical-align:middle | top等等。  让图片不要和基线对齐
给img 添加 display：block; 转换为块级元素就不会存在问题了。

表格线合并 border-collapse:collapse;

HTML5语义标签

1
<header></header>

代表网页头部或者文章头部
在一个页面内没有限制header出现次数，可以在不同的内容区块上分别加header标签
在header标签中可以至少包含一个标题标签 也可以包含logo或导航元素

1
<footer></footer>

代表网页底部或者文章底部

1
<nav></nav>

代表网页导航，并不是所有的导航都要被放进nav标签中，只需要将主要的放入即可。
应用场景：传统导航条、侧边栏导航、翻页操作。

1
<article></article>

代表页面中独立完整的内容区域。它可以是博客中的文章、帖子、用户的回复，它可以有自己独立的标题、页脚。

1
<aside></aside>

表示当前页面附属信息部分，可以包含侧边栏、广告、以及其他类似的有区别于主要内容的部分

1
<main></main>

表示网页的主体内容，内容对于文档来说应当是唯一的，它不应包含在网页中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。main标签在IE高版本中不识别，IE高版本又不识别IE条件注释，所以需要单独处理

1
2
3
<figure>
	<figcaption></figcaption>
</figure>

用于定义图片+标题或者图片+标题+描述。

1
< title></title>

简短、描述性、唯一（提升搜索引擎排名）。

 搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中

常用标签

1
<div></div>

 通用容器：div——块级通用容器；span——短语内容无语义容器。 

1
<hn></hn>

h1~h6分级标题，用于创建页面信息的层级关系。 

1
<q></q>

文字段落

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
 <caption> 支出统计 </caption>
  <thead>
    <tr>
      <th> 娱乐项目 </th>
      <th> 项目支出 </th>
    </tr>
  </thead>
 <tbody>
   <tr>
     <td> 聚餐 </td>
     <td>200 元 </td>
   </tr>
 </tbody>
</table>

表格标签

1
<br>

换行标签

1
<html>

定义 HTML 文档。 

1
<body>

定义文档的主体。 

1
<!--...-->

定义注释。 

1
<i>

定义斜体文本。

表单

1
<form>

定义供用户输入的 HTML 表单。 

1
<input>

input属性

type属性

text单行文本

password密码

radio单选按钮

checkbox复选框

button普通按钮

submit提交按钮

reset 重置按钮

image图像形式

file文件域

其他属性

name属性控件名称

value属性默认文本

size属性显示宽度

checked属性默认被选中项

maxlength属性最多字符数

lable标签

1
2
3
4
5
6
方法1:<label> male <input type="radio" name="sex" value="male">   </label>

方法2:<label for="male">Male</label>

<input type="radio" name="sex"  id="male">

定义输入控件。 

1
<textarea>

显示行数

1
2
3
4
5
6
<textarea cols="每行中的字符数" rows="显示的行数">

  文本内容

</textarea>

防止拖拽文本域resize

resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。

1
<textarea  style="resize: none;"></textarea>

定义多行的文本输入控件。 

1
<button>

定义按钮。 

1
<select>
1
2
3
4
<select>
  <option>选项1</option>
  ...
</select>

selected默认选中项

定义选择列表（下拉列表）。 

1
<optgroup>

定义选择列表中相关选项的组合。 

1
<option>

定义选择列表中的选项。 

1
<label>

定义 input 元素的标注。

框架

1
<frame>

定义框架集的窗口或框架。 

1
<frameset>

定义框架集。 

1
<noframes>

定义针对不支持框架的用户的替代内容。 

1
<iframe>

定义内联框架。

图像

1
<img>

定义图像。 

1
<map>

定义图像映射。 

1
<area>

定义图像地图内部的区域。 

1
<canvas>

定义图形。 

1
<figcaption>

定义 figure 元素的标题。 

1
<figure>

定义媒介内容的分组，以及它们的标题。

音频/视频

1
<audio>

定义声音内容。 

1
<source>

定义媒介源。

1
<video src="video/chrome.mp4" controls poster="images/poster.jpg" loop autoplay muted></video>

视频标签

在谷歌高版本中，默认禁用了自动播放，只要将视频的声音禁掉，视频就可以自动播放了，video标签的播放器的样式，在不同的浏览器中表现形式不一致，只能隐藏不能修改他原有的样式

controls 显示播放控件

poster 在视频播放前视频中显示的图片

loop 循环播放视频

muted 静音，在自动播放时，音量被禁止

autoplay 自动播放

H5C3
#H5C3
HTML5标签知识整理
http://www.dwyblog.cn/2019/06/08/HTML5CSS3知识整理/
作者
幸福来敲门
发布于
2019年6月8日
许可协议