HTML基础之概念与常用标签
文章目录
- 什么是HTML
- 网页
- 常用的浏览器及其内核
-
- 常用的浏览器
- 浏览器内核
- Web标准
-
- 为什么需要Web标准
- Web标准的构成
- HTML、CSS、JavaScript之间的关系
- HTML的版本
- HTML路径
- HTML的标签
-
- 标签的结构
- 标签的分类
- 标签的属性
- 标题标签
- 段落标签
- 水平分隔线标签
- 换行标签
- 文本样式标签
- 文本格式化标签
- 文本语义标签
- 特殊字符
- 下标标签
- 图像标签
- 超链接标签
- 背景标签
- 滚动标签
什么是HTML
●HTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。
●HTML不是一种编程语言，而是一种标记语言。
●标记语言是一套标记标签。
所谓超文本，有两层含义：
- 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
网页
●网页是图片、链接、文字、声音、视频等元素组成，其实就是一个html文件（后缀名为html）。
●网页生成制作：有前端人员书写HTML文件，然后浏览器打开，就能看到了网页。
●HTML：超文本标记语言，用来制作网页的一门语言，由标签组成的。比如：图片标签、链接标签、视频标签等。
常用的浏览器及其内核
常用的浏览器
浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。
浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| chrome/Opera | Blink | chrome/opera浏览器内核。Blink其实是Webkit的分支 |
Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际著名的标准化组织。
为什么需要Web标准
由于不同的浏览器解析出来的效果可能不一致，它们显示页面或者排版就有些许差异，开发者常常需要为多版本的开发而艰苦工作。
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：
- 让Web的发展前景更广阔。
- 内容能被更广泛的设备访问。
- 更容易被搜寻引擎搜索。
- 降低网站流量费用。
- 使网站更易于维护。
- 提高页面浏览速度。
Web标准的构成
●主要包括结构（现阶段主要学习HTML）、表现（现阶段主要学习CSS）和行为（现阶段主要学习JavaScript)。
●Wed标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
HTML、CSS、JavaScript之间的关系
●HTML用于定义网页的结构,对网页元素进行整理和分类——>结构类似身体,构成人的骨架、器官
●CSS用于描述网页的样子，设置网页元素的版式、颜色、大小等外观样式——>表现类似外观装饰，构成人的肉身皮相
●JavaScript用于控制页面元素，指网页模型的定义及交互的编写，是一种实现与后端的交互的行为——>类似行为动作，是人的灵魂，可以对外界刺激做出反应，构成一个活生生的人
HTML的版本
HTML路径
相对路径：以.或…或文件夹、文件开头
绝对路径：以盘符、/ 开头
HTML的标签
标签的结构
：表示当前的html文件是html5的文档(html5的规范)
： lang表示开发语言，en定义语言为英语，zh-CN定义语言为中文
：charset表示使用的字符集。常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
: 页面的根标签，页面中最大的标签
：头部标签，页面的常规信息，在head标签中我们必须要设置的标签是title
：主体标签，页面的主体信息，元素包含文档的所有内容
标签的分类
- 双标签：既有开始标签又有结束标签
<开始标签> 内容 - 单标签：只有一个标签，不成对出现
<标签名 />
标签的属性
设置标签的特征
<标签名 属性名1=“属性值” 属性名2=“属性值”> 内容
标题标签
<hn>内容hn> n的取值从1到6，数字越小字体越大，并且自动加粗、自动换行段落标签
<p> 内容 p> 表示一段内容，可以自动换行水平分隔线标签
<hr color="颜色" size="粗细" width="宽度"/>换行标签
<br /> （浏览器不识别回车换行符）文本样式标签
<font size="字体大小" color="字体颜色" face="字形"> 内容 font> 可以设置内容的字体大小、颜色、字形文本格式化标签
<b> 内容 b> / <strong> 内容 strong> --> 推荐使用 字体加粗
<i> 内容 i> / <em> 内容 em> --> 推荐使用 斜体
<u> 内容 u> / <ins> 内容 ins> --> 推荐使用 下划线
<s> 内容 s> / <del> 内容 del> --> 推荐使用 删除线文本语义标签
<mark> 内容 mark> 高亮显示
<cite> 内容 cite> 引用标签特殊字符
(1)空格： -- 浏览器不识别空格字符，因此需要使用
(2)小于： <
(3)大于：>
(4)版权符号：©
(5)注册商标：®
(6)摄氏温度：°
(7)乘号：×
(8)除号：÷
(9)平方：²
(10)立方：³下标标签
<sub> 内容 sub>图像标签
<img src="图像文件全名" />
例如：<img src="./images/6.png" />
<img src="图像的名称" alt="图像加载异常时的提示信息" width="宽度" height="高度" border="边框线" vspace="垂直间距" hspace="水平间距"/>关于路径：
- 相对路径：从文件当前位置开始的路径
例如： demo/004.html - 绝对路径：从磁盘根目录开始的路径
例如： E:\前端\2021-4-3\demo\004.html
关于斜杠： - 反斜杠(’’)：在windows操作系统中以双反斜杠(’\’)作为路径分隔符
- 斜杠(’/’)：是Linux操作系统下的路径分隔符
例如：E:/前端/2021-4-3/demo/004.html - ‘./’ ：当前目录(当前文件夹)
- ‘…/’：表示当前目录的上一级目录
超链接标签
<a>a> 可以进行页面跳转- 文字超链接
<a href="网页的地址"> 文字 a>- 图像超链接
<a href="网页的地址"><img src="图像名" />a>背景标签
<body bgcolor="颜色值"> 设置页面背景颜色
<body background="图像名"> 设置页面背景图像滚动标签
- 图像滚动
<marquee behavior=" " direction=" ">
<img src="图像路径" width=" " height=" ">
marquee>●direction属性表示滚动方向，取值有4个：left、right、up、down
●behavior属性表示滚动的速度，数字越小速度越快
2. 文字滚动
<marquee behavior="" direction="">
<font color="" size="" face="">滚动的文字font>
marquee>