Hypertext Markup Language:超文本标记语言, 是一种纯文本格式的文件,内部只能书写文字内容,不能添加图片、音频、视频等,但是在网页中给用户呈现的效果却包含了文字以外的内容,这种效果就是HTML语言区别于其他文件的不同之处。
HTML语义化
HTML文件中,如果没有使用特殊语义的标记,也可以实现网页显示效果,但是利用标记给普通的文字添加了不同的语义,能够让网站的结构划分更加清晰。
- 方便代码的阅读和后期维护
- 便于浏览器或是网络爬虫更好地解析网站内容
-
HTML规范版本
W3C:world wide web consortium,万维网联盟,专门发布和维护互联网的规范和标准。
HTML语法
标签
标签名必须书写在一对尖括号<>内部。
- 标签分为单标签和双标签,双标签必须成对出现。
- 双标签包含开始标签和结束标签,结束标签必须书写关闭符号/,单标签也需要进行自封闭书写。在HTML5中,单标签可以不写关闭符号。
标签级别
- 容器级:标签内部可以存放任意内容,包含容器级标签。比如
h1,div等。 - 文本级:标签内部只能存放文字或类似文字的内容,比如存放图片、表单元素等。比如
p等元素
HTML元素指的是从开始标签到结束标签的所有内容,包含开始标签、元素内容、结束标签。
- 元素内容可以是纯文本,也可以是其他的HTML元素。这种元素内容包含其他HTML元素的情况,称为嵌套。
一个HTML元素
div的内容可能是多个其他元素组成,例如p和h1,此时我们习惯称div是p和h1的父级元素,p和h1是div的子级元素,而p和h1属于同级元素,这种嵌 套关系可以有多层。<div><h1>Hello</h1><p>这是一个段落</p></div>
单标签是不能添加元素内容的,可以称为空元素。
- 元素间对空格、换行、缩进等形成的空白不敏感,有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。
空白折叠现象:元素内容如果是文本,所有文字(类似文字内容)之间如果有空格、换行、缩进等空白字符,在浏览器中加载时,连接在一起的空白会折叠成一个空格显示,这就是空白折叠现象。
属性
书写位置:必须写在开始标签或者单标签之内,与标签名之间用空格进行分隔。
- 属性包含:属性名(key)、属性值(value)。属性名与属性值之间的写法通常称做键值对写法,HTML 标签属性的键值对写法是 key=”value”。XHTML 要求属性值必须在双引号内部。
- 一个标签内可以设置多个不同的属性,属性与属性之间使用空格进行分隔,每个属性的键值对写法都是k=”v”。
- 部分标签属性 key 可以设置多个属性值 value,所有属性值v都必须写在同一对双引号内,值与值之间需要使用空格分隔。
注释
HTML 注释语法为<!-- 注释内容 -->, 注释只在源代码中可见,在浏览器窗口是不显示的。字符实体
规则:所有的字符实体和实体编号都是以&开头,以;结尾的。
注意:实体名称对大小写敏感!
建议1:使用实体名称,好处是名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。
建议2:不需要强制记忆所有的字符实体,只需要记忆常用的几个字符实体名称即可,其他可以通过手册进行查询。HTML结构
```html <!DOCTYPE html>
<a name="ei6ii"></a>## 基本骨架HTML文件最基本的四个标签,组成了网页的基本骨架,包括:<html>、<head>、<title>、<body>四组标签。1. <html> 标签,定义HTML文件的根元素,表示整个的HTML文档,所有的标签要书写在标签内部。1. <head> 标签, 用于存放 <meta> , <base> , <style> , <script> , <link>,用于对网页的设置,除了<title>,其他标签都不显示在浏览器上。1. <title> 标签1. 指定页面的标题1. 用于SEO优化1. 浏览器书签默认的网页标题4. <body> 标签 ,定义网页的主体部分,用于存放所有的HTML显示内容的标签<a name="DuQq1"></a>## DTD完整的HTML文件的第一行内容叫做文档定义类型,英文DocType Definition, 简称DTD,也称作文档声明类型,用于告知浏览器该网页使用的是哪个版本的HTML规范,让浏览器按照对应版本的HTML语法进行解析。 <br />目前 HTML5 用的是 `<!DOCTYPE html>`<a name="iz7Ob"></a>## 命名空间<html> 元素表示整个网页文档,在开始标签上设置了命名空间xmlns属性。```html<!--XHTML1.0 版本--><html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en"></html><!--HTML5 版本--><html lang="en"></html>
- xml:可扩展标记语言,使用在传输过程中的规范,被设计用来传输和存储数据,是html 的补充。
- xmlns:全称叫做XML NameSpace,NameSpace叫做命名空间,浏览器会将此命名空间 用于该属性所在元素内的所有内容。
- 元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准,避免出现标签名冲突,这个标准使用的就是一个固定的网址 http://www.w3.org/1999/xhtml 中的规范
xml:lang= “en” 和 lang= “en” 表示所有的标签元素内容的语言都是英语,lang= “ zh-cn” 表示中文(中国)
HTML常用标签
:::info 标签的作用是给标签内部的元素内容添加对应的语义,不负责文字的粗体、字号等样式。
样式是由Css设定的。
:::标题标签
标题(Heading),是通过
~
六个标签分别来对六个级别的标题进行定义的。
定义最大的标题,
定义最小的标题。
~
标签都是双标签,且是容器级标签。
段落标签
段落(paragraph)是通过
标签进行定义的。
标签是双标签,且为文本级标签。内部只能放置文本、图片、表单元素,或者废弃的 标签等。
换行标签
(breaking)标签是HTML中一个简单的换行符。
标签是一个单标签。在需要换行的位置可以使用
标签书写,但是
与文本格式化标签
<big>大号字体</big><small>小号字体</small><sub>下标字,subscript</sub><sup>上标字,superscript</sup><em>着重字体,斜体</em><i>斜体,italic</i><strong>加重语气,粗体</strong><b>粗体,bold</b><ins>插入字,下划线</ins><u>下划线</u><del>删除线</del>
图像标签
图像(image)由
标签定义
标签是单标签,作用是在指定的位置插入一张图片
常用属性为:
| src | 图片路径,可以是相对路径,绝对路径和网络路径 |
|---|---|
| width | 图片宽度 |
| height | 图片高度 |
| border | 边框属性 |
| title | 提示文本 |
| alt | 替换文本 |
超链接标签
- 在HTML中使用 标签可以创建链接,全称anchor。
- 为双标签,用于在指定的位置添加超级链接,提供用户进行点击和跳转。
- 标签可以实现两种跳转:跨页面跳转、页面内跳转。
- 页面内,
href="#id" - 跨页面,
href="example.html#id"
- 页面内,
- 常用属性为:
| href | hypertext reference,超文本引用,用于规定链接的目标地址 |
| —- | —- |
| target | 定义被链接的文档在何处跳转显示
- _self:默认值,表示跳转的页面在当前标签页打开,不会打开新的标签页
- _blank:空白的,表示跳转的页面在标签页打开
| | title | 提示文本 |
列表标签
- 无序列表标签,unordered list,定义一个无序列表的大结构
- 有序列表标签,ordered list,定义一个有序列表的大结构
- 标签,list item,定义列表的一项,
- 只能嵌套在
- 或
- 定义列表标签, 由三个标签组成完整的结构,包含
- 、
- 、
- dl:definition list,定义一个自定义列表的大结构
- dt:definition term,表示定义自定义列表中的一个主题或者术语
- dd:definition description,定义解释项,表示描述或解释前面的定义主题
音频使用
音频加载后不会自动显示播放器的控制条,需要使用 controls 属性进行设置,属性值也是 controls 。
视频标签
视频使用
标签进行定义- 标签是双标签,使用src属性设置视频的路径,同
布局标签
- 和 标签常用作布局工具,俗称盒子。
- 速成大盒子, 俗称小盒子
表格标签
表格需要三个标签,、、
- 里面
- 定义列表标签, 由三个标签组成完整的结构,包含
