目录
前言
概念
html的基本使用
标签语法：
标签的关系：
1.父子关系：
2.兄弟关系：
3.祖先后代关系：
解析一下网页开发结构中语句含义
实体
标签的分类
搭建框架应该遵循的规范
前言
学习html，我们要先下载代码编辑器，目前使用较多的软件为HBuilderX,以及VS Code等。在接下来的学习中我们使用VS Code来进行学习。
常用快捷键1、shift+! :快速生成网页开发结构（英文状态下）
回车后即可出现如图代码，我们称之为“网页开发结构”
常用快捷键2、ctrl+/：生成注释，一些与代码无关的内容写在注释里不会对编译造成影响
概念
在前端中有html,css,js这些语言是什么作用呢?
html语言：搭建页面的结构 --- 相当于盖房子
css语言：修饰页面 -- 相当于给房子装修
js语言：实现页面交互 -- 例如满足逻辑条件点击跳转（登录验证）相当于智能家居
html的基本使用
学习html就是学习各种标签，常用的标签大概有30-40种
标签语法：
单标签（自闭和标签）：<标签名> 或者<标签名/>
双标签：<开始标签名></结束标签名>
标签的关系：
1.父子关系：
直接包含和被包含的关系
父标签（父元素）—> 子标签（子元素）例如：html与head
2.兄弟关系：
拥有共同的父元素
例如：head和body，他俩都有html这个父亲，而在上图网页开发结构中，head在body的上面所以head为兄标签（兄元素），body为弟标签（弟元素）因为编译从上往下
3.祖先后代关系：
直接或间接包含于被包含的关系，祖先后代关系也包含父子关系
祖先标签（祖先元素）
后代标签（后代元素）
例如html和meta，head
标签的完整写法：
<开始标签名 属性名="属性值" 属性名="属性值" .....></结束标签名>
解析一下网页开发结构中语句含义
<!DOCTYPEhtml>-- 声明标签：文档是html类型，告诉浏览器按html规范编译防止乱码
html标签又叫根标签 是所有标签的祖先标签，所有的代码都必须放在html里面，并且一个html文件只能有一个html标签。
lang属性="en属性值" lang属性：配置编写代码的语言 en属性值：英文,默认就是英文
<html lang="en">
head标签 主要用来配置网页的基本信息，例如页面标题栏标题，配置网页的描述信息，关键字等等 配合浏览器收录页面
<head>
meat标签本身没有作用，但它可以配置不同的属性于属性值，从而起到不同的作用
charset属性="UTF-8属性值" ，防止出现乱码 charset属性：指定字符集，是一种密码本，UTF-8属性值：万国码。密码本的一种
编码：将页面文本、图片等内容编译成计算机所能识别的语言
解码：将计算机储存的语言还原成页面的文本和图片等内容
乱码：编码和解码用的不是同一个标准
<metacharset="UTF-8" />
配置完美视口，主要用于移动端开发
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
配置网页的描述信息，也可帮助浏览器进行检索
<meta
name="description"
content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"
/>
<!-- 配置网页的搜索关键字，也可以帮助浏览器进行检索 -->
<meta
name="keywords"
content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺"
/>
<title>百度一下>-- title标签，配置页面标题，是html标签中语义最重的标签，可以帮助提高浏览器搜索
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">--配置标题图标
</head>
<body></body>-- body标签：书写网页主体内容，主要给用户看的
</html>
实体
1、什么是实体？
html语言会提前征用一部分字符（关键字），它用了，程序员就不能直接使用
如果程序员需要，只能用一些额外的字符去替代，这些额外的字符，我们就称之为实体
2、实体语法
&实体的名字;
3、常见的实体有哪些
标签的分类
形式分：单标签：meta····· 双标签：html，head，body····
特点分：
块标签：主要用来搭建网页结构框架
1、独占一行
2、可以设置宽高（大小）
3、如果宽度未设置，它的宽度是父元素的100%
如果高度没设置，高度是被内容撑开的
常用的块标签：h1-h6,p,center,div,ul,ol,li,header,main,footer，side,section······
行内标签：用来包裹具体内容
1、不会独占一行
2、不可以设置宽高
3、宽高是被内容撑开的
常用的行内标签：a,em,strong,i,span,del·····
行内块标签：特殊的标签，具有自己独有的功能
1、兼具块标签行内标签的特点，不会独占一行，可以设置宽高
2、标签与标签之间具有大概3像素左右的间距
常用的行内块标签：img，input，button·····
搭建框架应该遵循的规范
（1）块标签可以包裹任意标签
（2）行内标签一般只包含文字，不能包含块标签
（3）块标签只有一个特殊的标签，p标签只能包裹文字，不可以嵌套块标签
（4）行内标签内有一个特殊的标签，a标签，它可以包裹任意标签
