一、基础概念
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官网上的说明:略
8、HTML标准结构
在vscode中,输入 ! 再回车可以直接生成标准结构:
<!DOCTYPE html> <!-- 文档声明,代表这是h5页面 -->
<html lang="zh-CN"> <!-- 设置语言为中文,可以在设置红调整该选项 -->
<head><meta charset="UTF-8"> <!-- 设置字符编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 暂未用到,跟移动端网页有关 --><title>这是一个标题</title> <!-- 标题,在网页上面显示的网页名称 -->
</head>
<body><h1> hello world! </h1>
</body>
</html>
9、开发者文档学习网站
推荐 MDN:https://developer.mozilla.org/zh-CN/
可以查看相关html标签!