引言
我们浏览网页看到的一些内容,实际上都是由HTML标签组成的,页面的结构就是由HTML标签组成的。
1 HTML语法规范
标签关系:包含与并列关系
2 HTML基本结构标签
标签名 | 定义 | 说明 |
<html></html> | HTML标签 | 页面中最大的标签,我们称之为根标签 |
<head></head> | 文档的头部 | 注意head标签中我们必须设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容,页面内容基本都是放到body里面的 |
3 HTML结构中的各个标签含义
3.1 文档类型声明标签
<!DOCTYPE>文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>这句代码的含义就是:当前页面采用的是HTML5版本来显示页面
[注]
<!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前
<!DOCTYPE>不是一个html标签,它就是文档类型声明标签
3.2 lang语言种类
lang用来显示当前文档显示的语言
1. en定义语言为英语<html lang='en'>
2. zh-CN语言为中文
3.3 字符集
字符集(characterset)是多个字符的集合,以便计算机能够识别和存储各种文字,在<head>标签中,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
<meta charset="UTF-8">
[注]
<meta charset='UTF-8'>是必须写的代码,否则可能引起乱码,一般情况下,统一使用UTF-8编码。
4. HTML常用标签
4.1 标签语义
根据标签的语义,在合适的地方给一个最为合理的标签,可以让该页面结构更清晰
4.2 标题标签
<h1>-<h6>
特点:
1. 加了标题标签的文字会变粗,从h1-h6字体依次变小,h1字号最大
2. 一个标题独占一行
4.3 段落标签和换行标签
段落标签<p></p>
[注]
将文字包装在段落标签中之后,段落和段落之间有空隙,文字之间用段落隔开
换行标签<br />
标签语义:强制换行
特点:
1. <br />是单标签
2. <br />标签只是简单的开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
4.4 文本格式化标签
在网页中,有时需要为文字设置粗体,斜体或下划线等效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示
语义 | 标签 | 说明 |
加粗 | <strong></strong> <b></b> |
更推荐使用<strong>标签加粗,语义更强烈 |
倾斜 | <em></em> <i></i> |
更推荐使用<em>标签,加粗语义更强烈 |
删除线 | <del></del> <s></s> |
更推荐使用<del>标签加粗,语义更强烈 |
下划线 | <ins></ins> <u></u> |
更推荐使用<ins>标签,语义更强烈 |