一、了解 HTML 的基础概念
1. HTML 介绍
- Hypertext Markup Language :超文本标记语言。用来制作网页的一种标记语言
- HTML 是一种纯文本格式的文件,内部只能书写文字内容,不能添加图片、音频、视频等,但是在网页中给用户呈现的效果却包含了文字以外的内容,这种效果就是 HTML 语言区别于其他文件的不同之处
2. HTML的重要概念
- 超文本: 是超级文本的缩写,简单来说超文本就是用于链接另一个文本或多媒体内容的文本,比如链接到图片、 链接、音频、视频、程序等
- 标记: 又叫做标签(HTML tag),有特殊的书写规范,是写给浏览器的一种语法格式,结合普通的文字信息,实现特殊的语义或显示内容。在编辑器中可以编辑和查看,在浏览器中不显示
示例
HTML 的概念
超文本
是超级文本的缩写,简单来说超文本就是用于链接另一个文本或多媒体内容的文本,比如链接到图片、 链接、音频、视频、程序等
标记
又叫做标签(HTML tag),有特殊的书写规范,是写给浏览器的一种语法格式,结合普通的文字信息,实现特殊的语义或显示内容。在编辑器中可 以编辑和查看,在浏览器中不显示
点击跳转到拉钩教育
示例效果图
3. HTML 的功能
- 利用标记给普通的文本添加语义、描述超文本内容,搭建网页的基本结构
4. HTML 的语义化
- HTML文件中,如果没有使用特殊语义的标记,也可以实现网页显示效果,但是利用标记给普通的文字添加了不 同的语义,能够让网站的结构划分更加清晰
5. 语义化网页的优势
- 方便代码的阅读和后期维护
- 便于浏览器或是网络爬虫更好地解析网站内容
- 使用语义化标签有利于SEO搜索引擎优化,提高网站 的搜索排名
二、 HTML 版本规范
-
W3C:world wide web consortium,万维网联盟。专门发布和维护互联网的 规范和标准
现在基本都是用 HTML5 进行开发使用
三、HTML标签
- HTML 标记通常被称为 HTML 标签 (HTML tag)。标签在书写和使用过程中,必须遵循特定的语法
HTML标签语法
- 标签名必须书写在一对尖括号< >内部
- 标签分为单标签和双标签,双标签必须成对出现
双标签
单标签
- 双标签包含开始标签和结束标签,结束标签必须书写关闭符号/,单标签 也需要进行自封闭书写。在HTML5中,单标签可以不写关闭符号
错误写法: 正确写法:
四、HTML 元素
- HTML元素指的是从开始标签到结束标签的所有内容,包含开始标签、元素内容、结束标签
- 例如:双标签内部包含的纯文本内容,就是元素内容
这是一段文字内容
元素内容
- 元素内容可以是纯文本,也可以是其他的 HTML 元素。这种元素内容包含其他 HTML 元素的情况,我们可以称为嵌套,也就是 div 标签元素内部嵌套了 p 标签元素
div元素内部嵌套p元素
- 一个HTML元素div的内容可能是多个其他元素组成,例如 p 和 h1 ,此时我们习惯称 div 是 p 和 h1 的父级元素,p 和 h1 是div 的子级元素,而 p 和 h1 属于同级元素,这种嵌套关系可以有多层
div元素内部嵌套p元素
div元素内部嵌套的h1元素
- 单标签是不能添加元素内容的,可以称为空元素
标签级别
根据标签内部可以存放的元素内容不同,可以将双标签划分为两个级别
- 容器级:标签内部可以存放任意内容,包含容器级标签。比如 h1,div 等
这是 div 中的一级标题
这是 div 中的一个段落
- 文本级:标签内部只能存放文字或类似文字的内容,比如存放图片、表单元素等。比如 p 等
这是一个段落
错误示范 ↓
文本级标签内部只能存放文字或类似文字的内容
浏览器会自动解析为 ↓
文本级标签内部只能存放文字或类似文字的内容
HTML元素的特性
- 元素间对空格、换行、缩进等形成的空白不敏感,有无空白对在浏览器中加载 的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系
段落内容
段落内容
段落内容
↑↓等价于
段落内容
段落内容
段落内容
- 空白折叠现象:元素内容如果是文本,所有文字(类似文字内容)之间如果有 空格、换行、缩进等空白字符,在浏览器中加载时,连接在一起的空白会折叠成 一个空格显示,这就是空白折叠现象
HTML中所有文字内容之间的空 格、换
行、缩 进都会被折叠成一个空格显示
五、HTML 属性
HTML标签可以添加属性,属性可以提供 关于HTML元素的更多信息
HTML属性规范
- 书写位置:必须写在开始标签或者单标签之内,与标签名之间用空格进行分隔
段落1
段落2
段落3
- 属性包含:属性名(key)、属性值(value)。属性名与属性值之间的写法通常称做键值对写法,HTML 标签属性的键值对写法是 k= ” v ” 。XHTML 要求属性值必须在双引号内部
段落1
段落2
段落3
- 一个标签内可以设置多个不同的属性,属性与属性之间使用空格进行分隔,每个属性的键值对写法都是 k="v"
段落1
段落2
段落3
- 部分标签属性 k 可以设置多个属性值 v ,所有属性值 v 都必须写在同一对双引号内,值与值之间需要使用空格分隔
段落1
段落2
段落3
六、HTML 基本结构
- 基本骨架
- DTD
- 命名空间
- 字符集
1. 基本骨架
HTML文件最基本的四个标签,组成了网页的基本骨架,包括:、
、、 四组标签
网页标题
网页主体
标签
- 作用: 定义HTML文件的根元素,表示整个的HTML文档,所有的标签要书写在标签内部
标签
- 作用:用于存放
、、 、