HTML基础

原创于 2025-12-20 18:26:05 发布 · 293 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

HTML的基本使用

html语言：搭建页面的结构 ---盖房子 css语言：修饰页面。 --装修房子 js语言：页面交互。 --智能家居

标签关系

父子关系

定义 : 直接包含和被包含关系

父标签(父元素)=包含=>子标签(子元素)

 <div> ==> 父标签(父元素)
   <p></p> ==> 子标签(子元素)
 </div>

兄弟关系

定义 : 拥有共同的父元素

兄标签(兄元素)

弟标签(弟元素)

 <body>
   <div></div> ==>兄元素
   <div></div> ==>弟元素
 </body>

祖先后代关系

定义 : 直接或间接包含关系祖先关系包含父子关系

 <html>  ==> 最大的祖先元素
   <head>  ==> 既是html的子元素 又是html的后代元素
     <mate>
     <title></title>
   </head>
   <body>
     <div></div>
   </body>
 </html>

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>

`<!DOCTYPE html>`

声明标签 : 主要告诉浏览器,程序员以何种规范来编辑页面的浏览器也会按照此规范去编译代码防止出现乱码

`<html lang="en">`

根标签 : 是所有标签的祖先元素所有的代码都要写在跟标签中

文件中有且只有一个跟标签

lang属性="en属性值"

lang属性 : 配置编写代码的语言

en属性值 : 英文(默认就是英文)

`<head>`

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

`<mate>`

mate ：本身是没有作用的，但它可以配置不同的属性和属性值，从而有不同的作用

`<mate charset="UTF-8">`

配置了charset属性[指定字符集]和UTF-8属性值[字符集:万国码] 达到==> 防止出现乱码的作用

`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

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

`<meta name="description" content="网页的描述信息">`

配置网页的描述信息便于浏览器检索

`<meta name="keywords" content="网页的搜索关键字如购物数码等">`

配置网页关键字便于浏览器检索

`<title>`

title标签: 标题, 配置网页页面标题的标题 是html标签中语义最重的标签 可以帮助浏览器提高搜索效率

配置标题图标

`<body>`

body标签: 书写网页主题内容主要写给用户看的

实体

实体是html语言提前征用的一部分字符(也叫关键字),由于字符(关键字)被征用,所以程序员不能使用

程序员要是想使用,只能用一些额外的字符去代替,这些额外的字符,被称之为实体

常用实体

空格:  大于号: > 小于号: < 版权符号: ©

更多实体:https://www.w3shool.com.cn/html/html_entities.asp

布局规则

1、块标签可以包裹任意标签即可以包裹块、行内、行内块

2、行内标签一般只包裹文字不可以包裹块标签

3、特殊的块标签p标签，段落标签一般也是只包裹文本不可以包裹块元素

4、特殊的行内标签a标签，可以包裹任意标签，除了它本身

html语言是一个弱类型语言，如果语法有错误，浏览器会有一个自动纠错的功能，但这种情况要尽可能避免

原因：

1、浏览器的纠错，会影响你的代码编译即降低了代码的运行效率

2、浏览器纠错的结果，可能不是你想要的

布局技巧

从整体到局部--> 从大到小-->从上到下-->从左到右

布局要求：有层次性、区块性、简洁

HTML基础

HTML的基本使用

标签

标签的分类

形式分类:

特点分类

标签关系

父子关系

兄弟关系

祖先后代关系

HTML基本结构的标签

`<!DOCTYPE html>`

`<html lang="en">`

`<head>`

`<mate>`

`<mate charset="UTF-8">`

`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

`<meta name="description" content="网页的描述信息">`

`<meta name="keywords" content="网页的搜索关键字如购物数码等">`

`<title>`

配置标题图标

`<body>`

实体

常用实体

布局规则

布局技巧

HTML基础

HTML的基本使用

标签

标签的分类

形式分类:

特点分类

标签关系

父子关系

兄弟关系

祖先后代关系

HTML基本结构的标签

<!DOCTYPE html>

<html lang="en">

<head>

<mate>

<mate charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="网页的描述信息">

<meta name="keywords" content="网页的搜索关键字如 购物 数码等">

<title>

配置标题图标

<body>

实体

常用实体

布局规则

布局技巧

`<!DOCTYPE html>`

`<html lang="en">`

`<head>`

`<mate>`

`<mate charset="UTF-8">`

`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

`<meta name="description" content="网页的描述信息">`

`<meta name="keywords" content="网页的搜索关键字如购物数码等">`

`<title>`

`<body>`