HTML初相识-开发者社区

前言

概念

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属性值：英文,默认就是英文

head标签主要用来配置网页的基本信息，例如页面标题栏标题，配置网页的描述信息，关键字等等配合浏览器收录页面

<head>

meat标签本身没有作用，但它可以配置不同的属性于属性值，从而起到不同的作用

charset属性="UTF-8属性值" ，防止出现乱码 charset属性：指定字符集，是一种密码本，UTF-8属性值：万国码。密码本的一种

编码：将页面文本、图片等内容编译成计算机所能识别的语言

解码：将计算机储存的语言还原成页面的文本和图片等内容

乱码：编码和解码用的不是同一个标准

<metacharset="UTF-8" />

配置完美视口，主要用于移动端开发

配置网页的描述信息，也可帮助浏览器进行检索

<meta

name="description"

content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"

<meta

name="keywords"

content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺"

<title>百度一下>-- title标签，配置页面标题，是html标签中语义最重的标签，可以帮助提高浏览器搜索

</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标签，它可以包裹任意标签