html5所有标签及其属性(html常用标签及属性)

介绍几个常用的HTML5标签

一、Html的基本结构：

!DOCTYPE html

html

head

meta ?charset=utf-8"

title/title

/head

body

网页的文本、图片等信息；

/body

/html

?二、Head部分：用于表示网页的元数据即描述网页的基本信息

其常用标签及属性有：

1、title标签：浏览器标签页显示的标题

2、meta标签：其常用属性

①charset:设置文档的字符集编码格式。HTML5中设置字符集编码：meta charset="UTF-8"

常见的字符集编码格式：

a.GB-2312:国标码，简体中文

b.GBK：扩展的国标码

c.UTF-8：万国码 Unicode 常用

②http-equiv属性:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：Content-Type(文档类型)?refresh(网页定时刷新)?set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）

③name属性：使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值：author（作者）?keywords（网页关键字）?description（网页描述） 这两个属性设置，网页必不可少。

3、link标签：链接网页图标（title前的小logo），其常用属性有：

①rel属性：声明链接文件的类型，此处选icon

②type属性：可以省略

③href属性：表示图片的路径地址

?三、body部分：网页的文本、图片等信息

标签的分类：

块级标签：显示为块，前后隔一行（自动换行）

行级标签：按行从左往右逐一显示。

1、 常见的块级标签：

①h1/h1......h6h6：标题标签，自动加粗，h1最大，h6最小。

②hr/：水平线标签，添加一条水平线。

③p/p:段落标签，

④br/:换行标签，

⑤blockquote//blockquote:引用标签，cite属性，表明引用的来源，一般引用网址

浏览器默认首行缩进。

⑥pre/pre:预格式标签，用于重载代码。浏览器默认显示样式：1、显示为等宽字体。 2、代码中的换行、

空格等元素能在浏览器中显示。

【补充】html 文件中空格的表示：nbsp;

2、 基于布局的块级标签

列表：无序列表、有序列表、定义列表

①有序列表：ol/ol 列表项：li/li

②无序列表：ul/ul 列表项：li/li

③定义列表（实现图文混排）:dl/dl

列表标题：dt一般只有一项/dt

列表描述项：dd可以有很多项/dd

3、组合标签：figure/figure用于显示图片及图片标题

他有两个子标签：img /图片

figcaption/figcaption图片的标题

例如：figure

img src="img/EZ.jpg" height="20%" width="20%" alt="探险家"/

figcaption探险家 伊泽瑞尔/figcaption

/figure

4、分区标签：div/div

?

5、常见的行级标签

1span（文本）:无实际意义，用于包裹某部分文字，修改特定样式，例如：

这是span style="color: red;font-size: 36px;"span/span中的文字

img（图片）：其常用属性：①src:表示引用图片的地址。

路径地址的写法：相对路径：以当前文件为最准，去寻找图片地址

a、与文件处于同一层的图片，直接写图片名

b、图片在当前文件下一层：文件名/图片名

c、图片在当前文件上一层：../图片名

绝对路径:盘符：/文件夹/图片名，但 是严禁使用

图片网址：网络上的图片链接，但是一般不用

②height和width：图片的高度和宽度。可以用CSS样式代替

③title：图片标。当鼠标指上之后显示的文字

④alt:当图片无法显示的时候，显示的文字

2em（倾斜强调）

3strong（加粗强调）

4b（加粗）

5i（倾斜）

Strong、em、b、i的区别

1、Strong、em都表示强调，Strong为粗体，em为斜体，而Strong的强调 程度逗比em高

2、Strong和b都能加粗，em和i都能倾斜，，但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。

6q（短引用）

7small/big（缩小/放大字体）：small和big分别是缩小和扩大字体，都可以多层嵌套直至上限或下限

8a（超链接）

1、href:超链接的路径，可以是网络链接，也可以是本地文件。

2、target:跳转页面打开的位置。_self自身页面，_blank新页面。

3、title:鼠标指在超链接上显示的名称。

4、Rel（被链接是当前的前/后一篇）:指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息：

rel="prev"被链接文档是当前文档的前一篇文 档，

rel="next"被链接文档是当前文档的后一篇文档,

rel="icon"被链接文档是当前文档的图标

rel="stylesheet"被链接文档是当前文档的样式表

5、Rev（当前是被链接的前/后一篇）

锚链接：

①本页面锚链接:a、设置锚点：a name="top"/a

b、跳转锚点：#name名

①页面间锚链接:a、在即将跳转页面的指定位置设置锚点

b、跳转锚点：页面地址.html#name名

a href="02_常见的块级标签.html#Hbuilder"页面间锚链接/abr/

功能性链接： mailto用于给指定邮箱发送邮件

file：///e:/aaa.png打开本地文件

tencent://message/?uin=1315618220 给指定QQ发送息

9s标签，有误文本：删除线

s这是S标签中的文字/sbr /

10cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用

cite这是cite中的文本/citebr /

11code:计算机代码，不保留代码格式

pre

code/code

/pre

12bdo:表示文本方向，属性：dir="ltr"表示从左往右，dir="rtl"表示从右往左

bdo dir="rtl"1234567/bdobr /

kbd:表示需要用户用键盘输入的内容，浏览器显示为等宽字体

请输入“kbdEsc/kbd”推迟系统br /

13sup:上标文本，sub:下标文本

xsub6/subbr /

? copy; 空格 nbsp;

? copy; 空格 nbsp;br /

14u:下划线

u这是下划线/ubr /

mark:高亮或标记文本，浏览器显示为黄色背景

markmark/markbr /

Html5新增的标签有哪些？

新增的结构标签：

1、header元素

表示页面中一个内容区块或真个页面的标题。

2、hgroup元素

表示对真个页面或页面中的一个内容区块的标题进行组合。

3、article元素?

表示页面中一块与上下文不相关的独立内容。比如一篇文章。

4、aside元素

表示article元素内容之外的、与article元素内容相关的辅助信息。

5、footer元素

表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

HTML5新规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求（比如 Flash），更优秀的错误处理，更多取代脚本的标记，HTML5 应该独立于设备开发进程应对公众透明 ;

HTML5?新特性：

新的特殊内容元素，比如 article、footer等，新的表单控件，比如 calendar、date、time、email、url、search；用于媒介回放的 video 和 audio 元素；用于绘画的 canvas 元素?

对本地离线存储的更好的支持。

html5新增了哪些标签？css3新增了哪些属性

h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。

- h5新增的标签

新增元素

说明

video ? ?表示一段视频并提供播放的用户界面 ?

audio ? ?表示音频 ?

canvas ? ?表示位图区域 ?

source ? ?为video和audio提供数据源 ?

track ? ?为video和audio指定字母 ?

svg ? ?定义矢量图 ?

code ? ?代码段 ?

figure ? ?和文档有关的图例 ?

figcaption ? ?图例的说明 ?

main ?

time ? ?日期和时间值 ?

mark ? ?高亮的引用文字 ?

datalist ? ?提供给其他控件的预定义选项 ?

keygen ? ?秘钥对生成器控件 ?

output ? ?计算值 ?

progress ? ?进度条 ?

menu ? ?菜单 ?

embed ? ?嵌入的外部资源 ?

menuitem ? ?用户可点击的菜单项 ?

menu ? ?菜单 ?

template ?

section ?

nav ?

aside ?

article ?

footer ?

header ?

- css3

css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

选择器

框模型

背景和边框

border-radius、box-shadow、border-image、

background-size：规定背景图片的尺寸

background-origin：规定背景图片的定位区域

background-clip：规定背景的绘制区域

文本效果（常用）

text-shadow：设置文字阴影

word-wrap：强制换行

word-break

css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range

2/3D转换

transform：向元素应用2/3D转换

transition：过渡

动画

@keyframes规则：

animation、animation-name、animation-duration等

用户界面（常用）

box-sizing、resize

css3新增伪类

：nth-child()

：nth-last-child()

：only-child

：last-child

：nth-of-type()

：only-of-type()

：empty

：target ?这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。

：enabled ?

：disabled

：checked

：not

HTML5新标签的新属性有哪些？

这里只是部分哦-------------article 标签定义外部的内容（外部内容如blog,news）。 使用后感觉和P差不多，语义化的标签。 aside 标签定义article以外的内容（可用做文章的侧栏）. 语义化的标签。 audio标签定义音乐。 支持三种格式,ogg,mp3,wav。 Safari仅支持MP3 and WAV 两种格式. canvas使用JavaScript在网页上绘制图形图像。 学好算法JS无所不能. （浏览器说：鸭梨很大）. command 定义按钮用的. 说实话,没用明白。 datalist 定义选项列表. 又是一个不知道咋用的标签。 details 用于描述某个文档部分的内容。 语义化的标签。 summary 定义details元素标题。 语义化的标签。