当前位置：首页 > news >正文

一、HTML

news 2024/11/14 10:54:14

一、基础概念

1、浏览器相关知识

这五个浏览器市场份额都非常大，且都有自己的内核。

什么是内核：
内核是浏览器的核心，用于处理浏览器所得到的各种资源。
例如，服务器发送图片、视频、音频的资源，浏览器就需要使用内核来进行处理这些资源。内核处理完这些资源之后，我们才能看到页面。这五大浏览器都有自己的内核。

五大浏览器，四大内核。不在这五个之中的统称为其他浏览器。其他浏览器就是在上述的内核的基础上，加上了一些精美的UI界面，实用的小功能等等。

2、网页相关概念

一个网页由那几部分组成：
结构：HTML用于搭建网页的结构。
表现：CSS让结构都具有表现力
行为：JavaScript 让网页由交互的效果。

3、HTML是什么

全称：HyperText Markup Language
译为：超文本标记语言

超文本：可以理解为：暂时理解为 ’超级的文本‘，和普通文本比，内容更丰富。
标记：文本变成超文本，就需要用到各种标记符号
语言：每一个标记的写法、读音、使用规则，构成标记语言。

4、HTML发展史

二、HTML基础

1、 html标签：

标签又称元素，是html的基本组成单位。
标签名不区分大小写！但是推荐使用小写。
标签有单标签和双标签，单标签比较少！
标签也可以进行嵌套！

2、HTML属性：

1）用于给标签提供附加信息。
2）可以写在：其实其实标签或单标签中，形式如下：

3）有些特殊属性，没有属性名，只有属性值。
例如：<imput disabled>
4）注意点：
1、不同的标签，有不同的属性，也有一些通用的属性在任何标签中都能写。
2、属性名、属性值不能乱写。都是w3c规定好的
3、属性名、属性值，都不区分大小写，但推荐小写。
4、双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号
5、标签中不要出现同名属性，否则后写的会失效，

3、HTML基本结构：

1、在网页中，点击鼠标右键，选择检查，可以查看某段具体代码
2、检查和查看网页源代码的区别：

查看网页源代码看到的是：程序员编写的源代码。
检查看到的是：经过浏览器处理后的源代码
备注：日常开发中，检查用的最多

3、网页的基本结构如下：

1、想要呈现在网页中的内容写在body标签中
2、head标签中的内容不会出现在网页中
3、head标签中的title标签可以指定网页的标题。
4、图示：

4、HTML注释

1、特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
2、作用：对代码进行解释和说明
3、写法：

<marquee loop="1" > hello world! </marquee>

4、注释不可以嵌套

5、HTML文档声明

1、作用：告诉浏览器当前网页的版本
2、写法：
旧写法：要依网页所用的HTML版本而定，写法有很多，具体写法请参考：W3C官网-文档声明。

新写法：

<!DOCTYPE html> 生命这个就代表这个代码是h5版本的。

3、注意：文档声明，必须在网页的第一行，且在html标签的外侧。

6、HTML字符编码

1、计算机对数据的操作：
存储时，对数据进行：编码
读取时，对数据进行：解码
2、编码、解码，会遵循一定的规范 -- 字符集
3、字符集有很多，常见的有：

ASCII：大写字母、小写字母、数字、一些符号，共计128个。
ISO 8859-1:在ASCII基础上，扩充了一些希腊字符等，共计是256个。
GB2312:继续扩充，收录了6773个常用汉字，682个字符
GBK：收录了的汉字和符号达到20000+，支持繁体中文。
UTF-8:包含世界上所有的语言，所有文字与符号。-- 很常用

4、使用原则：
原则1：存储时务必使用合适的字符编码，否则无法存储，数据会丢失！
原则2：存储时采用哪种方式编码，读取时就采用哪种方式解码。否则数据会错乱，乱码。

5、总结：
平时写代码时，统一采用UTF-8编码最稳妥。
为了让浏览器在渲染html文件时，不犯错误，可以通过meta标签配合 charset属性指定字符集：

<head>

<meta charset="UTF-8"/>
</head>

7、HTML设置语言

长按 shift + 网页左上角刷新按钮，可以强刷页面。

1、主要作用：让浏览器显示对应的翻译提示，有利于搜索引擎优化。
2、具体写法：

<html lang"zh-CN">

3、扩展知识：lang属性的编写规则

第一种写法(语言-国家/地区)：
zh-CN：中文-中国大陆（简体中文）
zh-TW：中文-中国台湾（繁体中文）
zh：中文
en-U：英语-美国
en-GB：英语-英国

第二种写法（语言-具体种类）以不推荐使用：
zh-Hans：中文-简体
zh-Hant：中文-繁体

w3School上的说明：语言代码参考手册
w3c官网上的说明：略