标签：02 编码 01 网页 标签 gb2312 HTML UTF
HTML简介、01标签介绍、路径问题、列表
一、 课件
1、HTML的概述：
html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。
普通文本：只包含文字。
富文本：图片，文字简单的样式。
- 超文本：可以连接到其他文档的文本（音频，视频，图片等）。
- 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成 标记内容的语义。
- 作用：HTML是负责描述文档语义的语言。
注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。
HTML是负责描述文档语义的语言
html中，除了语义，其他什么都没有。
html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。
所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。
比如，面试的时候问你，h1标签有什么作用？
- 正确答案：给文本增加主标题的语义。
- 错误答案：给文字加粗、加黑、变大。
2、HTML的历史
我们专门来对XHTML做一个介绍。
XHTML介绍：
XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。
XHTML的主要目的是为了取代HTML，也可以理解为HTML的升级版。
HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。
XHTML与HTML4.0的标记基本上一样。
XHTML是严格的、纯净的HTML。
我们稍后将对XHTML的编写规范进行介绍。
3、HTML的网络术语
- 网页 ：由各种标记组成的一个页面就叫网页。
- 网页是一个包含html标签的纯文本文件。
- 主页(首页) : 一个网站的起始页面或者导航页面。
- 标记：
<p>称为开始标记 ，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。 - 元素：
<p>内容</p>称为元素. - 属性：给每一个标签所做的辅助信息。
- xhtml： 符合XML语法标准的HTML。
- dhtml：dynamic，动态的。
javascript + css + html合起来的页面就是一个dhtml。 - http：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，ftp：文件传输协议。
4、HTML的编辑工具
- NotePad：记事本。
- EditPlus：语法高亮显示。技巧： 根据颜色判断单词是否出错 （不是100%）。不好的地方：没有代码提示。
- UltraEdit：根据颜色判断单词是否出错，可以显示2进制数据。
- Sublime Text：新一代的代码编辑器（用的人很多）。
- dw(dreamweaver，专业工具) ：建立WEB站点和应用程序的专业工具。它将布局功能、开发工具、代码编辑组合在一起。有代码提示。
PS：后缀名不能决定文件格式，只能决定文件打开的方式。
5、计算机编码介绍
计算机，不能直接存储文字，存储的是编码。
计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们定义一套规则来表示。假如：A用110表示，B用111表示等。
ASCII码：
美国发布的，用1个字节(8位二进制)来表示一个字符，共可以表示2^8=256个字符。
美国的国家语言是英语，只要能表示0-9、a-z、A-Z、特殊符号。
ANSI编码：
每个国家为了显示本国的语言，都对ASCII码进行了扩展。用2个字节(16位二进制)来表示一个汉字，共可以表示2^16＝65536个汉字。例如：
中国的ANSI编码是GB2312编码(简体)，对6763汉字进行编码，含600多特殊字符。另外还有GBK(简体)。
日本的ANSI编码是JIS编码。
台湾的ANSI编码是BIG5编码（繁体）。
GBK：
对GB2312进行了扩展，用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。
Unicode编码(统一编码)：
用4个字节(32位二进制)来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000
UTF-8(Unicode Transform Format)编码：
根据字符的不同，选择其编码的长度。比如：一个字符A用1个字节表示，一个汉字用2个字节表示。
毫无疑问，开发中，都用UTF-8编码吧，准没错。
中文能够使用的字符集两种：
- 第一种：UTF-8。UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
- 第二种：GBK（对GB2312进行了扩展）。gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。
字库规模： UTF-8（字全） > gb2312（只有汉字）
重点1：避免乱码
我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码！（重点）。
当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： 文件→ set File Encoding to → Chinese Simplified(GBK)。
重点2：UTF-8和gb2312的比较
保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
总结：
- UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
- gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
列出2个使用情形：
1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。
2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。
我们亲测：
- qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
- 新华网藏语频道，使用的是UTF-8，保证字符集的数量。
对了，我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到me标签中的charset属性即可。
那么，我们为什么可以查看网页的源代码呢？因为这个打开的网页已经存到我的临时文件夹里了，临时文件夹里的html是纯文本文件，纯文本文件自然剋以查看网页的源代码了。
二、知识点：各种标签的介绍
1. DOCTYPE标签
<!DOCTYPE html>
<!-- 文档声明类型 声明这是一个html5文件。 -->
<html>
<!-- 当前网页 -->
<head>
<!-- 网页的头部，里面的内容是给浏览器看的，主要是一些网页的配置。 -->
<title> 我是title</title>
</head>
<body>
<!-- 网页的主体，里面的内容都是给用户看的。 -->
</body>
</html>
-
DOCTYPE：声明文档类型，声明这是一个html5文件。
-
标签head中的内容：网页的头部，主要是一些网页的配置。（主要是给浏览器看的）
-
标签body中的内容：网页的主体。（里面的内容都是给用户看的）
2.html标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 设置文件的编码格式为UTF-8
- 常见的编码格式：
（1） gb2312 只包含简体和一些特殊字符
（2） gbk 包含简体与繁体，还有古汉语文字，还有日本片假名 特殊字符。
（3）UTF-8 几乎包含所有人类语言。 - gb2312与uft-8 比较
（1） uft-8 更臃肿，加载更慢 gb2312 更小巧，加载速度更快
（2） 同样显示5000个汉字，uft-8会比gb2312多5kb。
假如：
你们公司做中文网页，追求网页的加载速度，要使用gb2312.
你们公司做外贸，要显示一些外文，要使用uft-8。
3.标签的基本分类
（1）双标签
格式：<标签名>标签体<标签名>
（2）单标签
格式：<标签名 />
4.注释的使用
-
注释：用户不会看到，主要是给程序员看的。在网页中查看网页源代码可以看到注释。
-
作用：
（1）说明当前代码的功能。 （2）当前代码暂时不需要。
-
格式：<！- -
- -> -
快捷键：ctrl+/
5.空格语法特性
空白折叠现象。合理使用空格、换行、缩进，可以提高代码的可阅读性。
6.h系列标签
- 格式：
<h1>题都城南庄</h1>
<h2>题都城南庄</h2>
<h3>题都城南庄</h3>
<h4>题都城南庄</h4>
<h5>题都城南庄</h5>
<h6>题都城南庄</h6>
- 作用：告诉浏览器这些内容是标题，给内容添加标题语义。
- h系列标签是容器级标签。
- 什么是容器级标签？：几乎可以放置所有标签。
- 什么是文本级标签？：只能放置文字、图片、超链接、表单元素等。
- h标签知识点：
（1）级别依次降低，重要性也依次降低。
（2）都会被加粗，h1~h6字体从大到小.
（3）会独占一行。
（4）h标签虽然是一个容器级标签，但最好不要加嵌套关系。
（5）h标签慎用，特别是h1标签。一个网页最多只能出现一个。会影响网站的SEO。
SEO：网站在搜索引擎中的自然排名。
想要提高SEO排名：
（1）交钱给百度，按照点击量收费。（按照IP，浏览时间）
（2）网页代码要规范。
7.p标签
- 格式：
<h1>题都城南庄</h1>
<h3>作者：崔户</h3>
<p>去年今日此门中</p>
<p>人面桃花相映红</p>
<p>人面不知何处去</p>
<p>桃花依旧笑春风</p>
- p标签作用：给文本添加一个段落的语义。（告诉浏览器，哪些文字是一个段落）
- 知识点：
（1）首位都会换行。
（2）特殊的文本级标签，只存放文字/图片/超链接。
8.其它标签（hr标签、em标签、strong标签、del标签、ins标签、sub标签、sup标签、i标签、pre标签）
（1）hr标签
- hr标签是一个单标签。
- 格式：< hr />
- 作用：在网页中添加一个分割线。
（2）em标签
- 作用：给文本添加一个强调的语义。
- 效果：斜体。
（3）strong标签
- 作用：给文本添加一个语气更强的强调作用。
- 效果：加粗。
（4）del标签
- delete
- 作用：给文本添加一个删除的语义。
- 效果：文字中间添加了一条删除线。
（5）ins标签
- insert 插入
- 作用：给文本添加一个插入的语义。
- 效果：文字底部有一条底线。
<body>
为<em>喜迎双十一</em>，本店特举办“<strong>优惠大促</strong>”活动，<del>原价3999</del>，
<ins>现价只需1999</ins>，快来抢购吧！
</body>
</html>
（6）sub标签
- 作用：定义下标字。
水分子：h<sub>2</sub>o
（7）sup标签
- 作用：定义上标字。
勾股定理：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
（8）i标签
- 效果：显示斜体文本效果。
（9）pre标签
- 作用：将保留其中（html文档中pre标签内）所有的空白字符(空格、换行符)，原封不动的输出结果。（告诉浏览器不要忽略空格和空行）
9.标签属性
什么是标签属性？
对于人来说，性别，年龄，名字都是它的属性。每一个标签都有自己特定的属性。
-
属性位置：双标签的开始标签中或单标签中。
-
格式：
<标签名 属性名=“属性值”></标签名>
<标签名 属性名=“属性值”> -
知识点：
（1）.属性名与标签名中间用空格隔开，与其他属性也用空格隔开。
（2）.属性名与属性值用=连接，中间不能有空格。
（3）.属性值必须用双引号包括起来。
（4）.一个标签内，可以有一个或多个属性。
10.img标签
- image的缩写
- 单标签
- 作用：在当前页面中引入一个外部的图片。
- 可插入的图片类型：jpg、png、gif
<img src="../img/2.jpg" alt="这是党妹" height="500px" title="把你爪子拿开">
- src：source的缩写，来源。表示图片的来源或路径。是img标签的必须的属性。
- alt：当前图片的说明。当图片资源加载不出来的时候才会显示出来。搜索引擎会根据alt的内容收录图片。
- width：指定图片的宽度。属性值是数字，单位是px（像素）。
- height：指定图片的高度。属性值是数字，单位是px（像素）。
- （1）若不指定图片的宽高，浏览器会根据图片本身的宽高去加载图片。
- （2）若想要等比例缩放图片，只需要指定图片的宽或者高，浏览器会根据图片本身的宽高比例，自动计算剩下的宽或高。
- title：标题。当鼠标悬停时显示的内容。
11.路径问题
- 相对路径和绝对路径
- 相对路径： 从当前文件出发，查找目标文件。
（1）同级查询 。当前文件与目标文件在同一个文件夹下。 只需要在src中写入文件的全称即可。src=“图片全称”
（2）子级查询。 当前文件与目标文件的父文件夹在同一个文件夹下。 src=“文件夹1/文件夹2…/图片全称”
（3）父级查询。 当前文件的父文件夹与目标文件在同一个文件夹下。 …相当于上一级文件夹。.相当于当前文件夹
例如：相对路径
<img src="../1.jpeg" alt="">
<img src="./img/1.gif" alt="">
- 绝对路径
（1）从盘符出发，查找目标文件。
（2）以https或者http开头的网络路径也是绝对路径的一种。
例如：绝对路径
<img src="F:\云梦山\代码\img\2.jpg" alt="">
<img src="https://inews.gtimg.com/newsapp_bt/0/12850987582/1000" alt="">
<img src="3.jpeg" alt="">
- 注意点：
（1）.企业开发中，尽量使用相对路径和网络地址形式的绝对路径。绝对路径的本地形式可移植性不好。在部署到服务器或与别人共同开发时，可能会出现问题。
（2）.尽量使用反斜杠去书写路径。因为有些系统比如linux，它不支持使用正斜杠去书写路径。
12.列表（ol标签、ul标签、dl标签）
1.ol标签
- order list 有序列表
- ol标签作用：定义一个有序列表。 给网页的内容添加一个有序列表的语义。
- li 标签作用：定义一个列表项。
- 格式：
格式：
<ol>
<li></li>
<li></li>
<li></li>
</ol>
- 知识点：ol标签不常用。
- 属性 type：排序的类型
1 阿拉伯数字： 默认值
a 英文字母
A 大写的英文字母
i 罗马数字
I 大写的罗马数字 - 属性start：定义从哪里开始排序。
- 使用场景：
百度热搜：
<ol>
<li>嫦娥五号完成月球钻取采样及封装</li>
<li>黄之锋涉非法集结被判13.5个月</li>
<li>丁真妈妈回应儿子入职国企</li>
<li>胡锡进回应被举报“有俩私生子”</li>
<li>澳总理:不会削弱与中国人民友谊</li>
</ol>
喜欢的电影排行榜：
<ol type="1" start="2">
<li>肖申克的救赎</li>
<li>海上钢琴师</li>
<li>时间规划局</li>
<li>复仇者联盟</li>
<li>暮光之城</li>
</ol>
2.ul标签
- unorder list 无序列表
- 作用：定义一个无序的列表。 容器级标签
- li：list item 列表项。 容器级标签
- 格式：
格式：
<ul>
<li></li>
</ul>
- 应用场景：
主要是用来放置一些功能和样式相同，只是描述不同的元素。
1.导航栏
2.新闻列表 - 注意点：
1.ul和li标签是一个组合。一起使用，不能单独使用。
2.ul标签中不要包含其他标签。
3.li中可以嵌套其他标签 甚至可以嵌套ul和ol
<ul>
<li>肖申克的救赎</li>
<li>海上钢琴师</li>
<li>
小时代系列
<ul>
<li>小时代1</li>
<li>小时代2</li>
<li>
<ol>
<li>小时代3.1</li>
<li>小时代3.2</li>
<li>小时代3.3</li>
</ol>
</li>
</ul>
</li>
<li>复仇者联盟</li>
<li>暮光之城</li>
3.dl标签
-
自定义列表
有三个标签参与：dl dt dd
dl：定义一个定义列表。
dt：定义标题（列表项）
dd：对标题的说明和解释 -
嵌套关系：dl>dt+dd
-
格式：
格式：
<dl>
<dt></dt>
<dd></dd>
</dl>
-
知识点：
1.dt与dd是同级
2.一个dt可以用多个dd来解释。
3.dd是解释上面最近的一个dt。 -
应用场景：
需要对列表项进行解释说明时。
eg：京东侧边导航栏。
<dl>
王者荣耀英雄介绍
<dt>鲁班七号</dt>
<dd>射手</dd>
<dd>脆皮</dd>
<dd>提款机</dd>
<dt>马超</dt>
<dd>战士</dd>
<dd>突进</dd>
<dt>阿珂</dt>
</dl>
标签：02,编码,01,网页,标签,gb2312,HTML,UTF 来源： https://blog.csdn.net/weixin_53125613/article/details/110482438
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。