HTML基础（web到HTML标签）
一、认识WEB
「网页」主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。
「浏览器」是网页显示、运行的平台。
「浏览器内核」(排版引擎、解释引擎、渲染引擎)
Web标准
「构成」👉 结构标准，表现标准和行为标准
结构标准用于对网页元素进行整理和分类(HTML)
表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)
行为标准用于对网页模型的定义及交互的编写(JavaScript)
「Web标准的优点」👇
易于维护：只需更改CSS文件，就可以改变整站的样式
页面响应快：HTML文档体积变小，响应时间短
可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别
设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名
二、HTML初识
HTML初识
「HTML」(Hyper Text Markup Language):超文本标记语言
「所谓超文本，有2层含义：」
因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
「HTML骨架格式」
<!-- 页面中最大的标签 根标签 -->
<html>
<!-- 头部标签 -->
<head>
<!-- 标题标签 -->
<title></title>
</head>
<!-- 文档的主体 -->
<body>
</body>
</html>
「团队约定大小写」
HTML标签名、类名、标签属性和大部分属性值统一用小写
「HTML元素标签分类」
常规元素(双标签)
空元素(单标签)
<标签名> 内容 </标签名>
<html></html> 双标签，一个开始一个结束
<br/> 单标签
👇
空元素(单标签)
<标签名 />
「HTML标签关系」
嵌套关系父子级包含关系。
并列关系兄弟级并列关系。
如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。
文档类型
用来说明你用的XHTML或者HTML是什么版本。告诉浏览器按照HTML5标准解析页面。
页面语言lang
lang指定该html标签内容所用的语言
<html lang="en">
en 定义语言为英语 zh-CN定义语言为中文
lang的作用
根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
字符集
是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
UTF-8是目前最常用的字符集编码方式
让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。
<meta charset="UTF-8" />
「meta viewport的用法」
通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口
meta有两个属性name 和 http-equiv
name属性的取值
keywords(关键字) 告诉搜索引擎，该网页的关键字
description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。
viewport(移动端的窗口)
robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引
author(作者)
generator(网页制作软件）
copyright(版权)
http-equiv有以下参数
http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容
content-Type 设定网页字符集(Html4用法，不推荐)
Expires(期限) ,可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
Pragma(cache模式),是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
Refresh(刷新),自动刷新并指向新页面。
cache-control（请求和响应遵循的缓存机制）
HTML标签的语义化
方便代码的阅读和维护，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
「拓展」 标签：规定页面上所有链接的默认 URL 和设置整体链接的打开状态
<head>
<base href="http://www.baidu.com" target="_blank">
<base target="_self">
</head>
<body>
<a href="">测试</a> 跳转到 百度
</body>
HTML常用标签
常用标签
- 排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。
标题标签h(h1~h6)
段落标签p,可以把 HTML 文档分割为若干段落
水平线标签hr
换行标签br
（段落标签会有隔行，换行标签没有）
div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。
（div，一行只能放一个，理解为大盒子
span一行多个，理解为小盒子）
b和strong 文字以粗体显示
i和em 文字以斜体显示
s和del 文字以加删除线显示
u和ins 文字以加下划线显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>标题标签</h1>
<p>段落内容</p> <p>段落内容</p>
<strong>粗体</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>
<a href="http://www.220hu.com" target="-blank">chaolianjie</a>
</body>
</html>
- 图像标签
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML不支持页面百分比） | 设置图像的宽度 |
| height | 像素（XHTML不支持页面百分比） | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
注意：
- 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 采取 键值对 的格式 key=“value” 的格式。
链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target="_self" 默认窗口弹出方式
target="_blank" 新窗口弹出
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。 |
src 和 href 的区别
一句话概括:src 是引入资源的 href 是跳转url的
- src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
- src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
- href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
注意：
- 外部链接 需要添加 http:// www.baidu.com
- 内部链接 直接链接内部页面名称即可 比如
< a href=“index.html”> 首页 - 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
- 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
锚点定位：通过创建锚点链接，用户能够快速定位到目标内容。
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的）
<a href="#two">
注释标签
<!-- 注释语句 -->
快捷键是： ctrl + /
或者 ctrl +shift + /
团队约定：注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
这是几天学的内容的集成，做了一个小页面。
（纪念白酒死去的一周😭）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>试试水</title>
</head>
<body>
<!--是一个简单的页面，放有图片，外部链接和锚点链接-->
<h1 id="top">白酒跌死我了</h1><a href="https://baike.baidu.com/item/%E4%B8%8A%E6%B5%B7%E8%AF%81%E5%88%B8%E7%BB%BC%E5%90%88%E6%8C%87%E6%95%B0/9556996?fromtitle=%E4%B8%8A%E8%AF%81%E6%8C%87%E6%95%B0&fromid=2839288&fr=aladdin" target="-blanket">上证指数</a><br>
1.<a href="#baijiu">白酒是什么 ？</a><br>
2.<a href="#haojiu">有什么好酒</a><br>
<h3 id="baijiu">白酒是什么</h3>
<p>白酒，外文名：Baijiu（Chinese Baijiu） [1] ，是中国酒类（除了果酒、米酒外）的统称，又称烧酒、老白干、烧刀子等。</p>
<img src="微信图片_20200831203202.jpg" height="420" width="600">
<p>中国白酒具有以酯类为主体的复合香味，以曲类、酒母为糖化发酵剂，利用淀粉质（糖质）原料，经蒸煮、糖化、发酵、蒸馏、陈酿和勾兑而酿制而成的各类酒。而严格意义上讲，由食用酒精和食用香料勾兑而成的配制酒则不能算做是白酒。白酒主集中在长江上游和赤水河流域的贵州仁怀、四川宜宾、四川泸州三角地带有着全球规模最大、质量最优的蒸馏酒产区，分别为中国三大名酒的茅五泸，其白酒产业集群扛起中国白酒产业的半壁河山。<a href="#top">返回置顶</a></p>
<h3 id="haojiu"> 有什么好酒</h3>
<p>1、贵州茅台baidu600519(白酒行业龙头)
贵州茅台酒股份有限公zhi司，上交所主板上dao市，白酒行业zhuan当之无愧的龙shu头企业，国内知名白酒品牌，当前公司股价810元排A股第一，主营业务为茅台酒系列产品的生产与销售、饮料/食品/包装材料的生产、销售等等。</p>
<p>2、五粮液
宜宾五粮液股份有限公司，深交所主板上市，白酒行业的老二，国内知名白酒品牌，当前公司股价86.66元，主营业务为酒类产品及相关辅助产品的生产经营。</p>
<p>3、泸州老窖
泸州老窖股份有限公司，深交所主板上市，白酒行业知名品牌，总部位于四川南部的泸州，泸州享有“酒城”美誉，酿酒历史可追溯至秦汉时期。</p>
<p>4、酒鬼酒
酒鬼酒股份有限公司，深交所主板上市，白酒行业知名品牌，总部位于湖南吉首，酒鬼、湘泉都是中国驰名上飚，以“浓、清、酱”三香闻名。<a href="#top">返回置顶</a></p>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
