-
HTML5标签语义化
- 标签名代表了标签中内容的意思,让正确的标签干正确的事情,如标题使用标题标签
- 结构化标签
- HTML5新增了哪些标签
- header 头部标签
- nav 导航链接部分
- main 页面主要内容,它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
- section 定义文档中的节(section、区段)
- article 定义页面独立的内容区域
- aside 定义页面的侧边栏内容
- footer 定义section或document的页脚
- 什么是标签的语义(面试)
- 去掉css样式也能很好体现HTML结构
- 用户体验:title属性,alt属性
- 针对特殊群体(读屏机器,SEO等)
- 后期维护及更新
- 有利于搜索引擎优化
- HTML5新增了哪些标签
-
a标签
- 什么是超链接
- 概念:从当前页面跳转到另一个页面,或当前页面的不同区域,或另外的网站
- 分类
- 外部链接:从当前网站跳转到其他网站
- 内部链接:从当前项目里,跳转到不同文件
- 锚点链接:在当前页面里,不同区域之间跳转
- a标签(双标签)
- 作用:a标签定义一个超链接
- 基本语法:<a 属性=”属性值”>标签内容</a>
- 属性
- href属性:定义需要跳转的目标地址(url),url:统一资源定位符
- name属性:定义锚点的名称
- target属性:表示在哪个窗口打开url地址
- _blank:新建窗口打开
- _self:在当前窗口打开(默认值)
- 注意:
- a标签是行内元素,并且是一个双标签(必须写内容才能看到a标签)
- 重点掌握href属性
- 绝对路径与相对路径
- 绝对路径:绝对路径以协议(http://、https://)或者以“/”作为前缀
- 相对路径:以文件本身所在的目录为参照,进行路径的定位
- 同一级文件之间跳转
- ./: 表示当前目录进行定位,可以不写
- /目录名: 表示进入目录
- 不同目录文件之间的跳转
- ../: 表示返回上一层目录,可以使用多个../来表示返回多级
- 同一级文件之间跳转
- 什么是超链接
目录
-
img标签
- 作用:网页中嵌入图像
- 语法:<img src=”引入图像的地址(url)” alt=””>
- 属性
- 必选
- src: 表示引入图像具体地址
- alt: 表示图像加载失败时显示的文字(1.用户体验,2.seo设置关键字)
- 可选
- width: 表示图像宽度
- height: 表示图像高度
- title: 图片说明(鼠标hover上图像时显示)
- 必选
注意:
宽度和高度任意设置一个值时,图像会进行等比例缩放
img标签是一个行内标签,是一个单标签(自关闭),可置换标签
img标签可以支持多种格式图片(jpg,bmp,png,gif)
-
扩展
- audio标签:定义网页中加入声音
- 语法:<audio src=”音乐文件路径url” autoplay=”autoplay”>
- audio标签:定义网页中加入声音
您的浏览器不支持audio标签
</audio>
-
-
- 属性:
- src: 表示声音的地址url
- autoplay: 表示自动播放
- controls: 表示播放控件
- muted: 输出时静音
- preload: 音频在页面加载时加载,并预备播放
- 支持三种音频格式:ogg,mp3,wav等
- 属性:
-
注意:audio标签是html5中新标签,可能在某些低版本浏览器中不支持,需要加上提示文字。
-
- video标签:定义网页中加入视频
- 语法:<video src=”视频文件路径url” autoplay=”autoplay”>
- video标签:定义网页中加入视频
您的浏览器不支持video标签
</video>
-
-
- 属性:
- src: 表示播放视频的url
- controls: 表示播放控件
- autoplay: 自动播放
- width: 设置播放器宽度
- height: 设置播放器高度
- poster: 表示海报
- 支持的格式:ogg,MPEG4,WebM等
- 属性:
- source标签:主要用于audio和video标签支持的格式文件进行选择性播放
- 语法:<source src="资源地址url" type="资源类型">
-
注意:src的值为资源地址,type的值为资源的类型。可以指定多个资源,浏览器将自动选择支持的资源进行播放。
常用的类型:
用于视频:
- video/ogg
- video/mp4
- video/webm
用于音频:
- audio/ogg
- audio/mpeg
-
列表标签
- 概念:列表主要用于制作网页中数据列表或导航
- 分类:
-
无序列表(ul):列表项之间属于并列关系
- 语法:<ul>
-
<li>内容部分</li>
</ul>
-
-
- 说明:
- li标签表示列表的列表项,一个列表里面可以放多个列表项
- ul标签表示定义无序列表,并没有实际作用
- 注意
- ul>li 结构固定,必须配合使用,并且ul是一个块级元素
- 如果需要嵌套标签,都放在li里面
- li前面默认有小圆点(标志)
- 默认样式后期在项目中要去掉(style=”list-style:none”)
-
有序列表(ol):表示有顺序或重要性的列表
- 语法:<ol>
- 说明:
-
<li>内容部分</li>
</ol>
- 说明:
- ol标签表示定义有序列表,表示一个列表区域
- li标签表示列表的列表项,一个列表里面可以放多个列表项
- 注意
- ol>li结构固定,必须配合使用(块级标签)
- li标签里面可以嵌套任何标签(包括自身)
- 有序列表ol上的type属性可以设置li前面的编号
- 常见type属性值:
- A 代表列表项前面显示的是大写字母;
- a表示显示小写字母;
- I代表用大写罗马数字显示;
- i代表用小写罗马数字显示。
- 默认情况下显示数字;
- 定义列表(dl):定义了定义列表
- 语法:<dl>
- 注意
<dt>名词或概念</dt>
<dd>对名词或概念的解释或说明</dd>
</dl>
-
-
-
- 说明:
- dl标签表示定义定义列表的区域,并没有实际效果
- dt标签表示名词或概念
- dd标签表示对名词或概念的解释或说明
- 注意:
- dl>dt,dd结构固定,必须配合使用
- dt标签和dd标签里可以嵌套任何标签
- dl标签默认有样式一般配合css进行修饰
- 说明:
-
-