HTML课堂笔记二

二、HTML的语法

1、实体（转义字符）

用于书写特殊符号 (字母两侧的大于小于号、连续空格)

格式： &实体的名字；

例：nbsp：空格;gt：大于号；lt：小于号；copy：版权符号

2、meta

主要用于设计网页元数据（不是给用户看）(写在head标签里）

空元素，所以一定有开始标签，一定没有结束标签

 例:charset:网页字符集
    name:指定数据名称
    content:  指定数据的内容（值）

格式：meta name=’ ’ content=’ ’

常见的name：
1、 keywords:网页关键字（用于网页分类）可用时指定多个关键字，关键字间用“，”隔开（参考京东网页源码）
2、 description:指定网页描述（会显示在搜索引擎的搜索结果中）
注：title标签里的内容，会作为搜索结果的超链接上的文字显示
3、equiv：设置http协议（网页跳转）

格式：meta http-equiv="refresh" content=“时间；跳往哪的地址”

3、语义化标签

分工：
css:表现，关注样式
html:网页结构，关注标签语义

1、块元素：在页面中独占一行
用来在网页中对页面进行布局
例：h1—h6(重要性递减）
h1在网页中的重要性仅次于title（网页中一般只有一个）

例：h1-h6
    p：段落
    phgroup：为标签分组，将一组相关的标题同时放入到hgroop
    blockquote：表示一个长引用（知乎）
    br：换行

2、行内元素：不会读占一行 用来包裹文字

例：em：用于表示语音语调的加重（表现为“斜体”）
    strong：表示重要内容（表现为“加粗”）
    q：引用短语</p>

注：一般情况下会在块元素中放行内元素（基本都能放），但不会在行内元素中放块元素

p元素中不能放块元素
注意：网页最终由浏览器解析，会自动修正不符合规范的内容

例：标签写在根元素外部
    p元素中嵌套了块元素
    根元素中出现六楼除head和body以外的子元素</p>

3、结构化标签
header：网页头部
main：主题（网页中只有一个）
footer：网页或某一部分的底部
nav：网页中的导航（不一定有）
aside：跟主体相关的内容，但不属于主体内容
article：文章
section：表示分区分块，以上标签不能表示时使用
div：无语义，可用来表示区块（目前主要的布局元素）
span：行内元素，无语义，一般用于选中文字

4、列表

• 有序列表（前面带数字）
• ol标签创建
• 无序列表（前面带黑点）
• ul标签创建（使用较多）
• 定义列表
• dl标签创建
  dt表示定义的内容
  dd对内容进行解释说明 一个dt可以有多个dd说明 列表之间可以互相嵌套（更往里缩进）

5、超链接
让页面跳转到其他页面或是当前页面的其他位置
用a标签来定义超链接
超链接是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
属性： href：指定跳转的目标路径

• 值可以是外部网站地址 也可以是一个内部网页地址（在同一目录下）

6、相对路径
（1）一般使用.或..开头
（2）./表示当前文件所在的目录(path) （可省略不写，若不写./也没有../就相当于写了./）
（3）../表示当前文件所在目录的上一级目录（“/”隔开文件夹目录）（走出当前目录）

7、超链接的其它用法
（1）target属性，用来指定超链接打开的位置
（2）可选值： _self 在当前页面中打开超链接 _blank 在新的页面中打开超链接
（3）lorem：自动生成英文
（4）将href属性设置为#(开发中做展位符使用），点击链接后网页不会跳转，会转到当前页面的顶部
（5）javascript作为href的属性，点击不会发生什么id属性（唯一不重复的）
 (6)id属性（唯一不重复的）
每个标签都可以添加一个id属性
id属性就是元素的唯一标识，同一页面中不能出现重复的id属性（优先实行）
id属性基本以字母开头且区分大小写
将href属性设置#目标元素的id属性值就可以跳转到网页任意位置