html5
1.网页的基本结构
- 文档声明(doctype)
- 文档声明用来告诉浏览器当前网页的版本
- html5的结构声明<!doctype html>或<!Doctype HTML>
2.实体
-
在html中有些时候,我们不能直接写一些特殊符号
-
比如:多个连续的空格,字母两侧的大于小于符号
这时需要使用html中的实体(转义字符) 空格 >大于号 <小于号 ©版权符号
3.meta
-
meta主要设置网页中的一些元数据,元数据不是给用户看
–charset 指定网页的字符集
–name 指定数据的名称
–content 指定的数据内容1.页面关键字(表示网站的关键字,可指定多个,用逗号隔开) <meta name="keywords" content="your,zhu,haha" /> 2.页面描述(用于指定网站的描述) <meta name="description"这是一个不错的网站" />
4.语义化标签
1.块元素和行内元素
- 块元素(block element),在页面中独占一行
- 行内元素(inline element),在页面中不会独占一行
- 一般在块元素里面放行内元素
- p元素中不能放任何的块元素
2.标签
-
在网页html专门用来负责网页的结构
-
在使用html标签的时候,应该关注标签的语义,而不是样式
1)标题标签: h1~h6 一共六级标签 一般标签只使用到h1 ~ h3,h4 ~ h6很少用 2)p标签: 表示页面的一个段落 3)em标签: 表示语言强调的一个加重 4)hgroup标签: 用来为标题分组,可以将一组相关的标题同时放在hgroup 5)blockqute标签: 表示一个长引用 6)q标签 表示一个短引用
3.结构化语义标签
<header>元素描述了文档的头部区域,可有多个
<nav>标签定义导航链接的部分
<section>标签定义文档中的节
<article> 标签定义独立的内容
<aside>标签定义页面主区域内容之外的内容(比如侧边栏)
<figcaption>标签定义 <figure> 元素的标题
<figure>标签规定独立的流内容(图像、图表、照片、代码等)
<footer>元素描述了文档的底部区域,可有多个
div 没有语义,就是用来表示一个区块,目前来讲div是我们的主流布局元素
span 行内元素,没有任何语义,一般用于网页中选中文字
4.列表
在html中也可以创建列表,html列表一共有三种:
1.有序列表(使用ol标签来创建有序列表,li来表示列表项)
2.无序列表(使用ul标签来创建有序列表,li来表示列表项)
3.定义列表(使用dl标签来创建一个定义列表,
dt来表示定义内容,使用dd来对内容进行说明)
列表之间可以相互嵌套
5.超链接(a)
- 使用标签 a 来设置超文本链接
- href 属性描述了链接的目标
- 相对路径都会使用./表示当前文件所在目录../表示文件所在目录的上级目录
- 超链接的其他用法
target属性,用来指定超链接打开的位置
可选值:_self 默认值当前页面打开超链接
_blank 在一个新的页面中打开超链接
-在底部可以直接将href属性设为#,点击超链接可以回到顶部
-可以跳转到页面的指定位置,只需要href属性设为#目标元素的id
-可以使用javascript:;来作为href的属性,此时点击这个超链接什么都不会发生
6.图片标签(img)
- 图片标签用于向当前页面引入一个外部图片
- img元素属于替换元素(块和行内元素之间,具有两种元素的特点)
- 属性:
src 指定图片路径
alt 图片描述,默认不显示,有些浏览器图片无法加载时显示,
搜索引擎会根据alt中的内容来识别图片,不写不会被搜索引擎所搜索