<meta>标签在<head>标签内,主要用于设置网页的元数据
charset设置网页的字符集
name指定的数据的名称
content指定的数据的内容
keywords表示网站的关键字,可以同时指定多个关键字,多个关键字之间用,隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
description表示网站的描述
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
title标签的内容会作为搜索结果的超链接上的文字显示
块元素(block element):在页面中独占一行的元素,在网页中一般通过块元素对页面进行布局
标题标签:h1到h6重要性依次递减,h1在网页中的重要性仅次于title标签,一般情况下一个页面中只有一个h1(hgroup标签用来为标题分组,将一组有关联的标题同时放到hgroup标签中)
p标签表示页面中的一个段落
blockquote标签表示一个长引用
行内元素(inline element):在页面中不独占一行的元素,行内元素主要用来包裹文字
em标签用于语音语调的加重
strong标签表示强调,重要内容
q标签表示一个短引用
一般情况下会在块元素内放行内元素,而不会在行内元素内放块元素
块元素中基本上什么都可以放
p元素不能放任何的块元素
浏览器在解析时会自动对不符合规范的内容进行修正,例如把标签放在了根元素外面
布局标签(结构化语义标签):以下标签均为H5新增
header表示网页的头部
main表示网页的主体,一个网页只会有一个main
footer表示网页的底部
nav表示网页的导航
aside和主体相关的其他内容(侧边栏)
article表示一个独立的文章
section表示一个独立的区块,上边的标签都不能表示时使用section
div没有语义,就用来表示一个区块,目前是最常用的标签
span行内元素,没有语义,一般用于在网页中选中文字
有序列表用ol标签创建,li表示列表项
无需列表用ul标签创建,li表示列表项
定义列表用dl标签创建,dt表示定义的内容,dd对内容进行解释说明
列表之间可以互相嵌套
<a>标签
href属性表示要被访问的链接,当设置为#时回到顶部,值为javascript:;页面不跳转
target属性指定超链接打开的位置
_self 默认值,在当前页面打开超链接
_blank 在一个新的页面打开超链接
每个标签都可以有id属性,href设置为#目标元素的id属性值可以跳转到页面目标元素的位置
<img>标签
img标签是一个自结束标签,属于替换元素(块和行内元素之间,具有两种元素的特点)
图片的格式
jpeg(jpg):支持颜色较丰富,不支持透明,不支持动图;一般用来显示照片
gif:支持的颜色较少,支持简单透明,支持动图;颜色单一的图片,动图
png:支持颜色丰富,支持复杂透明,不支持动图;颜色丰富,复杂透明图片(专为网页而生)
webp:是谷歌新推出的专门用来表示网页中图片的一种格式;它具备以上所有的优点,而且文件特别小;缺点是兼容性不好
base64:将图片使用base64编码,将其转换为字符,通过字符的形式来引入图片;一般用于需跟网页一起加载时
效果一样用小的;效果不一样,用效果好的
<audio>标签
audio标签用来向页面中引入一个外部的音频文件,默认不允许用户自己控制播放停止
属性:
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放,如果设置了autoplay则在打开页面时就会自动播放,但目前大多数浏览器都不支持自动播放
loop 音乐是否循环播放
除了使用src来指定路径以外,还可通过source来指定,举例如下:
<audio>
浏览器不支持,请升级游览器!
<source src="">
<source src="">
</audio>
相比直接使用src属性来讲,source可写文字提醒,以及写多个文件路径,但只使用其中一个,当第一个可用时后续不再起作用,这样可以提高兼容性
<video>标签
video标签用于引入一个视频文件,使用方式跟audio基本一致