一、HTML标签
(一) 标签
[1].标题标签
-
在一个网页中,h1标签最重要,并且一个.html文件中只能出现一次h1标签,其他都随意
-
h5~h6不经常使用。
<h1></h1> ~<h6></h6>
[2].文本修饰标签
-
两个都可以对文本进行强调,strong比em更强烈
-
strong和em是具备语义化的,而b和i不具备语义化
-
插入文本一般是配合删除文本来使用
<strong>和<b>:加粗 <em>和<i>:斜体 <sub> :上标 <sup>:下标 <del>:删除文本 <ins>:插入文本
[3].图片标签和图片属性
-
宽高要进行添加,这样当网速不好,图片没有加载好的时候,图片占的位置也会被保留
-
标签:<img >
属性- src:引入图片地址
- alt:图片不出现时的提示语
- title:在鼠标放在元素上时的提示信息
- width
- height
[4].文件引入路径
- 相对路径是针对当前文件的路径
[5].跳转链接
- 单标签<a>
href: 链接
target:可以改变链接打开的方式,默认情况下,就是在当前页面打开_self,新窗口打开_blank - 单标签<base>
<base>标签在head进行设置target属性,可以控制整个页面链接的打开方式
[6].跳转锚点
-
实现一:
在<a> 的href属性中添加#和 跳转到的位置的id -
实现二:
在<a> 的href属性中添加#和跳转到的位置上面添加的<a>中的name
[7].特殊符号
[8].无序列表
- <ul>和<li>之间是不能有其他标签的
<ul> <li>
[9].无序列表
-
有序列表用的非常少,经常使用的是无序列表,无序列表可以代替有序列表
<ol><li>
[10].定义列表
<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述
[11].表格标签
- tbody可以出现多次,thead、tfood只能出现一次
<table> <caption>:表格标题 <th>:定义表头 <tr> <td> 语义化标签:<thead>、<tbody>、<tfood>
[12].表格标签
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式
[13].表格扩展
添加单线:border-collapse:collapase
隐藏空单元:empty-cells:hide
斜线分类:border/rotate
列分组:colgroup / col
[14].表单标签
-
select 的size=”3”表示显示3个
-
select的multiple表示选择多个
<form> <input> <textarea> <select> <option> <label>
[15].<iframe>
- <iframe>元素创建包含另一个文档的内联框架(即行内框架)
- 应用场景:数据传输、共享代码、局部刷新、第三方介入等
[16].换行
-
br标签表示换行操作,而wbr标签表示软换行操作
-
如果单词太长,或者担心浏览器在错误的位置换行,那么您可以使用wbr元素来添加Word Break Oppprtunity(单词换行时机)
单标签:<br>
单标签:<wbr>
[17].热点图
-
area元素永远嵌套在map元素内部。
-
area元素可定义图像映射中的区域
-
area元素的href属性定义区域的URL,shape属性定义区域的形状,coords属性定义热区的坐标
<map> 单标签<area>
[18].视频音频标签 H5
-
被嵌套标签<soure src=”” type=””>可以引用多个视频音频,供浏览器选择
-
默认控件不显示,可通过controls属性进行显示
-
loop属性是否循环
-
autoplay是否自动播放
<video> <audio>
[19].link标签
<link rel=”stylsheet” type=”text/css” href=””>
添加icon
<link rel=”icon” type=”/image/x-icon” href=””>
在自己的网页进行dns解析
<link rel=”dns-prefetch” href=””>
[20].meta标签
网页描述
<meta name=”description” content=”’>
网页关键字
<meta name=”keywords” content=””>
选择网页渲染内核
<meta name=”renderer” content=”webkit”>
使ie使用更高级的版本进行渲染
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
3秒后刷新
<meta http-equiv=”refresh” content=”3” >
设置网页失效的时间
<meta http-equiv=”expires” content=”时间” >
(二) H5新语义化标签
[1].页眉header
- 就像DIV标签元素一样可以多次使用,不同地方可以使用id或class设置不同样式。
[2].页脚footer
也就是说footer元素跟header元素很类似,可以为整体页面的单独架构元素(表示页面页脚),也可以作为部分元素内的架构元素(表示部分的页脚)。
[3].主体main
main标签是HTML5新出的一个标签,它是用来表达document中的body的主要内容,但不能在一个document中有多个main,不能在article,aside,footer,header或者nav中包含main。
[4].标题组合hgroup
- 在html中,<hgroup>标签是使用来对网页或区段的标题进行组合,即对网页或区段中连续的<h1>~<h6>元素进行组合。
- <hgroup>标签只是对标题进行组合,而对标题的样式没有影响。
- <hgroup><h2>标题1<h2/><h2>标题2<h2/>……</hgroup>
- 如果文章有标题和子标题,就可以使用<hgroup>标签。通常情况下,文章只有一个主标题是不需要使用<hgroup>标签的。
[5].导航nav
-
nav标签的功能,这里和header类似并没有指定必须是主导航,也可以是页面其它部分的子导航。
<nav> <ul> <li> <a href="#html5">HTML5文章介绍</a> </li> <li> <a href="#css3">CSS3文章介绍</a> </li> <ul> </nav>
[6].独立的内容article
是使用来定义独立于文档且有意义的来自外部的内容,比如:一些投稿文章、新闻记者的文章,或者是摘自其它博客、论坛的信息等。
[7].辅助信息的内容 aside
-
被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名次解释,等等
<article> <h1>…</h1> <p>…</p> <aside>…</aside> </article>
-
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。
<aside> <h2>…</h2> <ul><li>…</li><li>…</li> </ul> <h2>…</h2> <ul><li>…</li> <li>…</li></ul> </aside>
[8].区域section
- 用于定义文章中的章节(通常有标题段落内容)
- 用于定义文档中特定内容块,可视为一个区域分组元素,用来给页面上的内容分块。
- section元素的作用就是给内容分段,给页面分区。
- section元素和div元素的区别,div强调在形式上的独立性,section强调的是内容上的独立性
[9].arcticle元素和section元素
- 不同点:
- div充当容器的角色,用来设置某一块的总体属性(一个div里面可能包含多个section);
- article元素更强调内容的独立性
- section元素更强调内容的关联性
- article元素是独立完整的内容,section元素是对页面内容分块
- 相同点
- 本质上都是带有语义div块元素
- 分别可以看成
和
[10].描述图像或视频figure
- <figure>标签规定独立的流内容(图像、图表、照片、代码等等)。
- figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。它是一种元素的组合,可带有标题(可选)。figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响。
[11].描述图像或视频的标题部分figcaption
- <figcation> 标签定义 figure 元素的标题(caption)。
- “figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
二、标签分类
(一) 按类型
[1].块block
- div、p、ul、li、h1 …
特性:- 1.独占一行
- 2.支持所有样式
- 3.不写宽度的时候,会占满父元素
- 4.所占区域是一个矩形
[2].内联inline
- span、a、em、strong、img …
特性:- 1.用多少占多少空间
- 2.不支持,width、height,某些方向的margin、padding不支持
- 3.不写宽的时候,宽度由内容决定
- 4.内联标签之间会有空隙,原因:由内连标签代码之间的换行产生的,可以对父容器设置font-size:0;内联标签的font-size:设置正常大小
<span>213</span> <span>456</span>
[3].内联块inline-block
- input、select …
- 特性
1.支持width、height,并且用多少空间,占多少空间
2.标签之间也有空隙
(二) 按内容分类
www.w3.org/TR/html5/dom.html
(三) 按显示划分
- 替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容
- img、input
- 通过属性来显示标签内容
- 非提换元素:将内容直接告诉浏览器,将其显示出来。
- h1