一、HTML是什么？

html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。

普通文本：只包含文字。

富文本：图片，文字简单的样式。

超文本：可以连接到其他文档的文本（音频，视频，图片等）。
标记：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成 标记内容的语义。

作用：HTML是负责描述文档语义的语言。

注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。

2、HTML是负责描述文档语义的语言

html中，除了语义，其他什么都没有。

html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。
所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。

3、HTML的网络术语

网页：由各种标记组成的一个页面就叫网页。
- 网页是一个包含html标签的纯文本文件。
主页(首页) : 一个网站的起始页面或者导航页面。
标记： <p>称为开始标记，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：<p>内容</p>称为元素.
属性：给每一个标签所做的辅助信息。
xhtml：符合XML语法标准的HTML。

<!DOCTYPE html>
<!--文档声明类型，声明这是一个html5文件  -->
<html>
<!-- 当前网页 --><head><!-- 网页的头部，里面的内容是给浏览器看的，主要是一些网页的配置 --><title>我是一个标题</title>
</head><body><!--网页的的主体，里面的内容是给用户看的  --></body></html>

二、标签

1、计算机编码介绍

计算机，不能直接存储文字，存储的是编码。

计算机只能处理二进制的数据，其它数据，比如：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：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。

<!-- 设置文件的编码格式为UTF-8常见的编码格式：gb2312 只包含简体和一些特殊字符gbk  包含简体与繁体，还有古汉语文字，还有日本片假名 特殊字符。UTF-8 几乎包含所有人类语言。gb2312与UTF-8比较UTF-8更臃肿，加载更慢 gb2312 更小巧，加载速度更快同样显示5000个汉字，UTF-8会比gb2312多5kb。假如：你们公司做中文网页，追求网页的加载速度，要使用gb2312.你们公司做外贸，要显示一些外文，要使用uft-8。--><meta charset="UTF-8">

2、单、双标签

<!-- 标签格式：双标签 <标签名>标签体</标签名>单标签 <标签名 />注释： 用户不会看到，主要是给程序员看的，在页面中查看网页源代码可以看到、作用：1.说明当前代码的功能2.当前代码暂时不需要格式：--><!--  --><!-- 快捷键 ctrl+/-->

3.语法特性

（1）HTML对换行不敏感，对tab不敏感

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

（2）空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

（3）标签要严格封闭

标签不封闭是灾难性的。

<!-- 特性：空白折叠现象合理使用空格 换行 缩进 可以调高代码的可阅读性.-->张老师真帅！

4.h系列标签

h系列标签
作用：告诉浏览器这些内容是标题，给内容添加标题语义
容量级标签
什么是容量级标签？
几乎可以放置所有标签
什么是文本级标签？
只能放置文字，图片，超链接，表单元素等。
格式：

<h1></h1>
...
<h6></h6>

知识点：
1.级别依次降低，重要性也随之降低。
2.都会被加粗，字体从大到小。
3.会独占一行
4.h标签虽然是一个容器级标签，但是最好不要加嵌套关系。
5.h标签慎用，特别是h1标签。一个网页最多只能出现一个。会影响网站的SEO。

seo：网站在搜索引擎中的自然排名。
想要提高SEO：
1.交钱给百度按照点击量（按照IP，以及浏览时间）
2.页面代码要规范。

    <h1>题都城南庄</h1><h2>题都城南庄</h2><h3>题都城南庄</h3><h4>题都城南庄</h4><h5>题都城南庄</h5><h6>题都城南庄</h6>作者：崔户 去年今日此门中人面桃花相映红人面不知何处去桃花依旧笑春风

5.p系列标签

p标签作用：
给文本添加一个段落的语义。告诉浏览器，哪些文字是一个段落
格式：

    <p> 内容 </p>

知识点：
1.首尾都会换行。
2.特殊的文本级标签。只存放文字/图片/超链接。

    <h1>题都城南庄</h1><h3>作者：崔户</h3><p>去年今日此门中</p><p>人面桃花相映红</p><p>人面不知何处去</p><p>桃花依旧笑春风</p>你好啊，世界我不好

6.em、strong、delete、ins标签

em标签

作用：给文本添加一个强调的语义。
效果：斜体。

 <em>这上面是一首唐诗。</em>

strong标签

作用：给文本添加一个语气更强的强调作用。

<strong>上面是一句废话</strong>

del标签（delete ）：

作用：给文本添加一个删除的语义。
效果：文字中间添加了一条删除线。

<del>我被删除了</del>

ins标签
（insert 插入）
作用：给文本添加一个插入的语义。
效果：文字底部有一条底线。

 <ins>我是插入文本</ins>

7.hr标签

hr标签（少用）
作用：在网页中添加一个分割线
格式：<hr />
h：headline

    <h1>题都城南庄</h1><h3>作者：崔户</h3><hr><p>去年今日此门中</p><p>人面桃花相映红</p><p>人面不知何处去</p><p>桃花依旧笑春风</p>

8.sub、sup、pre标签

sub标签

b=bottom 底部
作用：定义下标字。

水分子：h<sub>2</sub>o

sup标签

作用：定义上标字。

勾股定理：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>

i标签

效果：显示斜体文本效果。 -->

<i>我是i标签</i>

pre标签：
将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）

<pre>去年今日此门中人面桃花相映红人面不知何处去桃花依旧笑春风
</pre>

9.标签属性

什么是标签属性？

对于人来说，性别，年龄，名字都是他的属性。
每一个标签都有自己特定的属性。

位置：双标签的开始标签中或单标签中。
格式：

<标签名属性名=“属性值”></标签名>
<标签名属性名=“属性值”>
1.属性名与标签名中间用空格隔开，与其他属性也用空格隔开。
2.属性名与属性值用=连接，中间不能有空格。
3.属性值必须用双引号包括起来。
4.一个标签内，可以有一个或多个属性。

11.img标签

img标签
image的缩写
作用：在当前页面中引入一个外部的图片。单标签。
可插入的图片的类型：jpg,png,gif。
src：source的缩写，来源。表示图片的来源或路径。必须的属性。
alt：当前图片的说明。当图片资源加载不出来的时候，才会显示出来。搜索引擎会根据alt的内容去收录图片。
width：宽指定图片的宽度。属性值是数字，单位是px（像素）。
height：高指定图片的高度。属性值是数字，单位是px（像素）。
若不指定图片的宽高，浏览器会根据图片本身的宽高去加载图片、
若想要等比例缩放图片，只需要指定图片的宽或者高，浏览器会根据图片本身的宽高比例，自动计算剩下的宽或高。
title：标题当鼠标悬停时显示的内容。

    <!-- <img src="../img/1.gif"><img src="../img/1.jpeg"><img src="../img/5.png" alt=""> --><img src="../img/2.jpg" alt="这是党妹" height="500px" title="把你爪子拿开">

12.路径问题

1.相对路径

从当前文件出发，查找目标文件。
（1）同级查询当前文件与目标文件在同一个文件夹下。只需要在src中写入文件的全称即可。src=“图片全称”
（2）子级查询当前文件与目标文件的父文件夹在同一个文件夹下。 src=“文件夹1/文件夹2…/图片全称”
（3）父级查询当前文件的父文件夹与目标文件在同一个文件夹下。 …相当于上一级文件夹。.相当于当前文件夹
2.绝对路径

（1）从盘符出发，查找目标文件。
（2）以https或者http开头的网络路径也是绝对路径的一种。
注意点：

1.企业开发中，尽量使用相对路径和网络地址形式的绝对路径。绝对路径的本地形式可移植性不好。在部署到服务器或与别人共同开发时，可能会出现问题。
2.尽量使用反斜杠去书写路径。因为有些系统比如linux，它不支持使用正斜杠去书写路径。

    <!-- 绝对路径(本地) --><img src="E:\img\2.jpg" alt=""><!-- 绝对路径（网络）  --><!-- <img src="https://inews.gtimg.com/newsapp_bt/0/12850987582/1000" alt=""> --><!-- <img src="3.jpeg" alt=""> --><!-- 相对路径 --><img src="../img/1.jpeg" alt=""><!-- <img src="./img/1.gif" alt=""> -->

13.ol标签

ol order list 有序列表排行榜

作用：定义一个有序列表。给网页的内容添加一个有序列表的语义。
li 作用：定义一个列表项。
格式：

<ol><li></li><li></li><li></li>
</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>

14.ul无序列表、li列表项

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>

2020-12-02HTML及标签相关推荐

Quad Industries、Agfa等公司合作推出塑料12位RFID标签和带有丝印印刷电路的读出
Quad Industries.Agfa.imec和TNO宣布展出一款塑料12位RFID标签和带有丝印印刷电路的读出系统.该系统集成了一个屏幕印刷天线和印制触摸用户界面,可实现在曲面上读取.该公司报告 ...
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第一套) 附答案
由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git 请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢 ...
2020.12.17
2020.12.17 1.无重复字符的最长子串(leetcode3) 思路:使用滑动窗口机制设置右指针移动,其实就是一个队列,比如例题中的 abcabcbb,进入这个队列(窗口)为 abc 满足题目 ...
2020.12.15
2020.12.15 1.有向图判断是否有环对于图类问题,首先利用邻接表对图进行表示,如图所示:通常使用List<List>的格式存储表示. 在本题中,输入为[a,b]表示b指向a,所以 ...
刷题之旅2020.12.05
2020.12.05 1.前中后序递归/非递归实现一.使用栈模拟递归实现过程先序/中序 public List preinOrder2(TreeNode root){if(root==null ...
3. 什么是icmp?icmp与ip的关系_「2020.12.3」黄俊捷热搜被爆料？郭俊辰交往女朋友？为什么三只跨年不合体？郝富申和王俊凯关系？Naomi和alracco？...
"扒酱每日一爆料" 扒酱来了 ◆◆◆ [2020.12.3]虞书欣和小鬼有没有可能?周震南马伯骞的关系?<送你一朵小红花>有吻戏?仙剑里面的茂茂?美国留学回来在娱乐圈容 ...
STEMA 考试每日一练 2020.12.7 - 2021.11.30 试题及答案 - 刷题
2020.12.7 在以下几个选项中,正确的从小到大的排序是( ) A 地球<太阳系<可观测宇宙<银河系B 地球<太阳系<银河系<可观测宇宙C 太阳系<地球& ...
十一、“由专入分易，由分入专难。”（2020.12.18）
十一."由专入分易,由分入专难."(2020.12.18)
阿里IOT 应用托管部署 (2020/12/02)
当前时间: 2020/12/02 阿里更新迭代比较快, 不能保证文档的参考价值有多大 --------------------------------------------------------- ...
C语言错题集（指针2020/12/8）
C语言错题集(指针2020/12/8) 1.关于C语言指针的运算:指针只有加减操作,没有乘除操作.指针可以加常数.减常数:相同类型的指针可以相加.相减.(F) 指针之间可以相减,但不可以相加:两个同一 ...

2020-12-02HTML及标签