Web基础知识、 HTML快速入门

1272208556@qq.com

1、HTML + CSS + UI

2、Javascript

3、HTML5CORE + AJAX + Jquery

4、Bootstrap,Angular JS + 其他框架

1、HTML + CSS3BASIC + PRO + UI + PRO + CSS3CORE + PRO

======================================================

1、Internet

1、什么是Internet

是全球性计算机互联网络,是由若干终端(PC,移动端)以及特殊的传输介质而组成的一个网络结构

PC:Personal Computer

2、提供的服务

信息共享

Telnet : 远程连接

Email : 电子邮件

WWW : 万维网 www.baidu.com

BBS : 电子公告板，论坛

FTP : 上传和下载服务

3、实现技术

1、分组交换原理:数据通过数据包进行传递，到达目的地后，对数据包进行重组

2、TCP/IP 协议簇

2、WEB

1、什么是WEB

就是 WWW（World Wide Web）

w3c : www consortium 万维网联盟

2、能干什么

能够将各类的信息和服务进行连接，提供图形用户界面

信息:文字、图片、音频、视频

服务:Telnet, FTP , Mail , HTTP ...

3、万维网就是无数的文档集合（网页文档）,文档会驻留在世界（互联网）的任何一个角落

3、WEB的工作原理

WEB是基于Internet的多媒体信息服务系统

1、基于浏览器 / 服务器模式

B / S : Browser / Server

在服务器上，主要以网页的形式发布多媒体信息

2、由WEB服务器、浏览器、通信协议组成

3、WEB 相关技术

1、服务器端技术（后台）

PHP,JSP,ASP 。。。。。。

2、客户端技术(前端技术)

HTML,

CSS,

Javascript

=========================================================

1、HTML 入门

1、什么是HTML

HTML(Hyper Text Markup Language),超级文本标记语言

超文本:

标记 : 超文本都是由标记组成的

<a>

语言 : 包含自己独特的语法

HTML最终由浏览器负责解释

HTML总可以嵌入一些脚本语言编写的程序段:Javascript,VBScript

2、HTML版本

超级文本标记语言（第一版）

HTML2.0

HTML3.2

HTML4.0

HTML4.01

XHTML1.0

HTML5

3、标签(标记)

1、标签语法

1、必须使用尖括号扩起来

<a>,<div> ...

<A>,<a>

2、有封闭类型的标签，也有非封闭类型的标签

1、封闭类型

也称作双标记，则必须成对出现

<标记>文本内容</标记>

不同的标记，决定了"文本内容"的不同表现形式

eg:<a></a>,<p></p>,<div></div>

2、非封闭类型

也称作单标记、空标记

<标记>

或者

<标记/>

eg:

3、元素

标记就是元素，元素也称为标记

4、元素嵌套(标签嵌套)

标签之间相互嵌套，形成复杂的语法结构

<body>

<p>

<a></a>

</p>

</body>

5、属性

属性是出现在开始标记中的内容,作用是修饰元素

标准属性:每个元素都会具备的通用属性

id : 定义每个标签的唯一标识

title:提示文本

class:样式相关，类样式

style:样式相关，行内样式

操作1：定义一对p标签，id属性设置为program

多属性:

注意：多属性之间，排名不分先后

2、创建HTML文档

开发工具:任何一个文字编辑软件都可以开发HTML

EditPlus ：超级记事本

运行环境:任何一个浏览器都能运行HTML

Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera

超文本文件(HTML文档):

是一个以.html或.htm结尾的文档

3、文档结构

1、文档类型声明

声明使用的html版本和风格

<!doctype html>

2、html页面

1、文档根元素

每个文档有且仅有一对根元素 , html

2、在根元素的内部，包含两对子元素

1、head : 页面的头部内容

定义页面全局信息

包含:

<title></title> : 网页标题

2、body : 页面的主体内容

任何一个标签，都可能会出现在body中

3、head元素

1、声明网页标题

2、定义网页文本编码格式

默认:ISO-8859-1,只支持英文以及英文状态下的标点符号

utf-8:支持中英文,标点符号

3、... ...

4、body元素

属性:

text : 文本的颜色

bgcolor : 背景颜色

练习1:

1、为body添加两个属性，text，bgcolor

2、文本颜色 : 红色(red)

背景颜色 : 银色(silver)

3、在body中随意写上一段文本，观察页面显示效果

5、文本标记

1、特殊的文本

转义字符:

空格: 

< : < less than

> : > greater than

版权标识:©

2、文本标记

1、文本样式

<b>...</b> : 加粗文本

<i>...</i> : 斜体文本

<u>...</u> : 下划线

<s>...</s> : 删除线

<sup>...</sup> : 上标

<sub>...</sub> : 下标

2、标题元素

1-6级6个标题

<hn></hn> n:1-6

一级最大

六级最小

3、段落元素

提供了结构化文本的表现方式

语法:<p></p>

注意：

1、每对p标签单独成一个段落

2、段落与其他元素有垂直空白，段落间距

常用属性:

align : 水平对齐方式

取值:left center right

4、换行元素

在代码的任何位置处，实现回车的效果

<br />

5、水平线

又叫分割线

<hr />

属性:

1、size : 水平线的粗细，通常以像素(px)为单位

2、width: 宽度

3、align: 水平线的水平对齐方式

4、color: 颜色

6、分区元素

目的：为元素进行分组，多数用在布局中

块分区元素:<div></div> 层

行内分区元素:<span></span>

注意：

div ：主要用在布局上

span：修改其内部内容的样式

7、预格式化

保留源文档中的空格和回车

<pre>

文本内容

</pre>

3、注释

可以写在html源码中，但不被浏览器解释的文本

语法:

4、行内元素与块级元素

块级元素:默认情况下，块级元素独占一行，元素的前后都会自动换行 div,hn,hr,p

块级元素作用:布局

行内元素:默认情况，多个元素位于同一行，不会换行

span,文本标记... ...

行内元素作用:修改内部内容的样式

.昨日回顾

表单

主要功能：收集客户的信息。

表单的开发分两个部分：前台静态页面制作、后台PHP程序来处理。

用户名：<input type=“text”name=“username” />

密码：<input type=“password” name=“userpwd” />

</form>

Method提交方式

POST方法：提交大量数据、相对安全些、可以提交多样化的格式数据，提交的数据用户不可见。

GET方法：提交少量数据，安全性比较低、数据的格式比较单一，提交的数据显示在地址栏

Username=itcast

Userpwd=itcast

http://www.itcast.cn/register.php?username=itcast&userpwd=itcast

enctype：有两个值：普通的表单数据编码application/x-www-form-urlencoded”

上传文件时，数据编码multipart/form-data

框架

在框架定义页面，不能包含<body>及其子标记。<body>和<frameset>只能使用其中一个。

一个框架由框架集(frameset)和框架页(frame)构成。

<frameset>标记：定义框架的类型、大小、位置，主要定义框架的结构。

<frame>标记：指定窗口的默认页面、是否可以改变大小、是否出现滚动条。

</frameset>

<noframes></noframes>标记

含义：当浏览器不支持框架时，显示的提示信息。

<iframe></iframe>浮动框架

2.网页标准

一个网页由三个部分构成：结构、表现、行为。对应的标准也有三个，分别为XHTML、CSS、JS

3.CSS基础

CSS，Cascading Style Sheets层叠样式表，“级联样式表”、“样式表”。用户可以自己定义HTML元素的样式外观。

CSS样式表由多个CSS样式规则构成；

一个CSS样式规则，由选择器和样式格式声明语句构成，比如：选择器body或h1

选择器就是指给不同的HTML元素指定样式的一个名称；

格式声明语句，必须放在{}中；

一个格式声明语句，由“属性名:属性值”形式构成；比如：color:#FF000

每一条格式声明语句，必须以分号（;）结束；

CSS属性值，不需要加引号；

CSS的数值属性值，一般都要加单位px；比如：div{width:500px;}

CSS中不区分大小写，建议一般都用小写。

body{margin:0px;padding:0px;}

h1{color:#FF0000;}

</style>

4.CSS选择器

一、基本选择器

（1）通用选择器：将匹配所有的HTML元素，举例：*{margin:0px;padding:0px;}

注意：*在IE6不支持、门户网站会增加客户端负担

（2）标签选择器：所有的HTML标记，都可以做为CSS的选择器，它们是一一对应的关系

举例：h1{color:#FF0000;}

（3）类选择器：给一类HTML元素定义样式。每个HTML元素都有一个class的属性，在CSS中class的写法，是以“.”开头。

CSS样式写法：.news{color:#FF0000;}

HTML元素：

提示：类样式可以给任何HTML元素增加，只需要在HTML标记，增加一个class的属性即可。

（4）ID选择器，也就是说：每一个HTML元素，都有id属性，在CSS中id选择器的写法，是以“#”开头。

CSS样式的写法：#title{color:#FF0000;}

HTML元素：<span id=“title”></span>

提示：ID样式只能给某一个HTML元素增加样式，不能是多个同名ID。ID相当于身份证号，具有唯一性。

5.二、组合选择器

（1）多元素选择器（E,F,G,H）：同时匹配E\F\G\H元素。并列关系

举例：body,h1,p,a{margin:0px;padding:0px;}

（2）后代元素选择器（E F）：将匹配E元素下的所有F元素。（后代关系）

举例：div.news div.title{font-size:24px;}

说明：div.news表示，class=news的<div>元素

Div#news表示id=news的<div>元素

没有清除margin和padding之前的效果

去除margin和padding的效果

（3）子元素选择器(E > F)：将匹配E元素下的子元素F。（父子关系）

举例：.news>h2{color:#FF0000;font-size:24px;font-family:黑体;}

三、伪类选择器：主要是给链接的不同状态加样式

一个链接有四种状态：正常状态、鼠标放上状态、激活状态(时间太短)、访问过的状态

正常状态：a:link{color:#0000FF;text-decoration:none;}

放上状态：a:hover{}

激活状态：a:active{}

访问过的状态：a:visited{color:#0000ff;text-decoration:none;}

全局链接样式设置

平常使用时，请将a:link和a:visited写一致的样式。

a:link,a:visited{color:#0000FF;text-decoration:none;}

a:hover{color:#FF0000;text-decoration:underline;}

自定义链接样式，也就是增加类样式

a.a1:link,a.a1:visited{color:#FF0000;}

a.a1:hover{color:#0000FF;}

6.CSS尺寸属性

Width：设置元素的宽度；

Height：设置元素的高度；

7.CSS字体/文本属性

font-size：设置元素的文本大小，默认单位px。比如：font-size:24px;

color：设置元素的文本颜色；

font-family：设置元素的文本字体；比如：font-family:宋体,楷体,黑体;

注意：如果是英文字体，并且英文字体由多个单词构成，请使用引号引起来

Font-family："Times New Roman",Georgia,Serif;

font-weight：加粗；比如：font-weight:bold;

font-style：斜体；比如：font-style:italic;

text-align：水平对齐，取值：left、center、right

line-height：设置行高，取值：固定值或百分比。比如：line-height:150%、line-height:24px;

text-indent：首行缩进，比如：text-indent:24px;

letter-spacing：字符间距；

word-spacing：单词之间的距离

text-decoration：文本修饰线，取值：underline(下划线)、overline(上划线)、line-through(删除线)、none(无)

8.CSS列表属性

List-style-type：设置列表前的符号，取值：none、disc、circle、square

List-style-position：设置符号的位置，取值：inside(内)、outside(外)

List-style-image：设置图片项目符号，举例：list-style-image:url(images/li01.gif);

简写的形式：list-style:disc inside; //将上面三项的值分别写入，中间用空格隔开

实现一个<div>中的单行文本上下居中，需要设置两个属性：

div{ height:30px; line-height:30px; }

9.HTML文件引入CSS的方法

（1）通过<style></style>来书写CSS代码 嵌入式

格式：

<style type=“text/css”>

body{margin:0px;padding:0px;}

</style>

（2）通过<link>标记引入外部的CSS文件(.css) 链入式

格式：<link href=“css/public.css” rel=“stylesheet” type=“text/css” />

属性：

Href：指定外部CSS文件的路径；

Rel：指定外部CSS文件与当前网页的关系，取值：stylesheet

Type：指定引入的文件类型，取值：text/css

说明：这种方式，可以实现多个网页共享同一个CSS文件。

（3）每个HTML元素都有一个style属性，通过该属性设置“行内样式”

格式：<div style=“color:#FF0000;font-size:24px;”></div>

总结：HTML元素的公共属性有哪些？ name、 id、style、title、class等

10.CSS的继承性和优先级

1、CSS继承性

HTML中，内层元素将继承外层元素的样式；多个外层元素的样式，最终叠加到内层元素上。

如果里面元素的CSS属性与外层元素的CSS属性相同时，将替换外层的CSS属性。

以下CSS属性具有继承性：

文本相关的属性是继承的

text-align、color、text-indent、font-family、font-size
font-style、font-weight、 letter-spacing、word-spacing
text-transform、line-height等

2、CSS优先级

（1）单个选择器的优先器

!important > 行内样式 > ID选择器 > 类选择 > 标签选择器

注意：!important兼容性不太好，在IE6下不支持，尽量少用。

h1{color:#FF0000!important;}

（2）组合选择器的优先级

当多个选择器组合在一起时，如何判断其优先级？我们平常这么做，假设：标签的优先为1、类选择器优先级为10、ID选择器的优先级为100，行内样式的优先级为1000。

.news h1{} 优先级值为11

.title 优先级值为10

div.news h1{color:#FF0000;} 优先级为12

#title{color:#009900;} 优先级为100

TML配置

文件应以“”首行顶格开始，推荐使用“”。
必须申明文档的编码charset，并且使用UTF-8编码。
移动端必须使用 viewport 适配
页面title是极为重要的不可缺少的一项。

以下是一个标准的html结构

html复制代码<!DOCTYPE html>
<html>
  <head>
    <!-- 必须声明 utf-8 编码格式 -->
    <meta charset="utf-8">
    <!-- 页面标题不能为空 -->
    <title>京东商城:商家后台</title>
    <!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
     
    <!-- 样式文件 以外链形式在此处引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
  </head>
  <body>
    <!-- 页面主体 -->
    <div class="warp">
      <header>顶部内容区域，比如：菜单头</header>
      <div class="content">主内容区域</div>
      <footer>顶部页尾区域，比如：备案号</footer>
    </div>
     
    <!-- js文件 在此处引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

主框架(jQuery,vue,react,angular等) 避免混合使用

避免多个框架混合使用，在同一个工程里面要保持主框架的一致性，多框架同时使用会造成代码混乱，后期会变得越来越难维护。

Css开发规范

1、全局样式禁止使用!important

2、避免使用导入式引入css样式文件；

css复制代码<style type="text/css">
  @import url(./demo.css);
</style>

未使用的js/css禁止引用

历史页面会有一些功能下线，在去除页面初始化的js语句的同时，也要将依赖的js文件删除，避免资源加载浪费

文件必须使用gzip压缩

开启Gzip压缩功能，可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度

api接口中，无用字段占传输比例30%以上时，删除无用字段

在开发过程中，发现无用字段占传输比例30%以上时，请进行返回数据的删减，加快数据请求速度

关于图片压缩

上传图片之前一定要做图片的无损压缩，节省网络流量,推荐网站tinypng

HTML的标准结构

html复制代码<!DOCTYPE html>
<html>
  <head>
    <!-- 必须声明 utf-8 编码格式 -->
    <meta charset="utf-8">
    <!-- keywords 关键词 和 Description 页面描述 便于搜索引擎检索，不强制使用 -->
    <meta name="Keywords" Content=”关键词1,关键词2,关键词3,关键词4″>
    <meta name="Description" Content=”页面描述″>
    <!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <!-- 推荐手动引入指定路径 favicon  -->
    <link rel="shortcut icon" href="path/to/favicon.ico">
    <!-- 样式文件必须以外链形式在此处引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
    <!-- 内联样式 -->
    <style type="text/css">
      .warp {
        margin: 0;
        padding: 0;
      }
    </style> -->
    <!-- 页面标题不能为空 -->
    <title>页面标题</title>
  </head>
  <body>
  <!-- 页面主体 -->
    <div class="warp">
    <header>顶部内容区域，比如：菜单头</header>
    <div class="content">主内容区域</div>
    <footer>顶部页尾区域，比如：备案号</footer>
    </div>
 
    <!-- JavaScript 文件在此处引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

不同模块区域可使用简要备注标识模块内容
HTML 标签语义化使结构清晰，比如：
CSS 外链引入必须放在中
JS 外链引入必须放在中
省略图像、媒体文件、样式表和脚本等嵌入式资源 URL 协议头部声明 ( http:// , https:// )，用//代替。
favicon 在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：1。在 Web Server 根目录放置 favicon.ico 文件，2。使用 link 指定 favicon

HTML标签使用守则

标签小写

原生 HTML 标签元素小写使用，自定义组件使用小驼峰命名（自定义标签避免和原生标签同名）

html复制代码<!-- 错误 ❌ -->
<DIV></DIV>
<SPAN></SPAN>  
 
<!-- 正确 ✅ -->
<div></div>  
<p></p> 
 
<!-- 自定义组件 -->
<shareDialog><shareDialog/>

套用规则

禁止在行内元素中嵌套块级元素❗️

html复制代码<!-- 错误的嵌套 ❌ -->
<span><div></div></span>  
<i><p></p></i>     
 
<!-- 正确的嵌套 ✅ -->
<div><span></span></div>  
<p><i></i></p>

更多标签使用规则介绍请查看尾部附录

属性定义

定义属性赋值时，使用双引号，禁止单双引号混用

html复制代码<!-- 错误的定义 ❌ -->
<input id="formTitle" type='text' placeholder="请输入标题">   
 
<!-- 正确的定义 ✅ -->
<input id="formTitle" type="text" placeholder="请输入标题" data="formTitle">

正确闭合

除自闭合标签外，所有标签都需正确的编写闭合标签

常用自闭合标签： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

ID、Class 命名使用规范

ID 和 Class 取通用且有意义的名字；

使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；

避免选择器嵌套层级过多，尽量少于 3 级；

使用命名空间防止命名冲突，利于维护；

css复制代码/* 不推荐: 无意义 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
 
/* 推荐: 明确详细 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}

避免选择器和 Class、ID 叠加使用
声明顺序，相关属性应为一组，建议遵循：定位布局属性 -> 盒模型属性 -> 文本属性 -> 视觉属性 -> 其他属性
对于 JS 操作相关选择器前面需加上特殊应用标识前缀

css复制代码/* 标准的声明顺序 */
.declaration-order {
  /* 布局属性 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
 
  /* 盒模型属性 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;
 
  /* 文本属性 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;
 
  /* 视觉属性 */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;
 
  /* 其他属性 */
  cursor: pointer;
}

图片相关使用规范

<img/>标签守则

src 属性不能为空，需添加默认值（托底图片路径）
为重要图片添加 alt 属性，当无法显示图像时，浏览器将显示替代文本，便于 SEO 及用户阅读
为图片标签增加 width 和 height 属性，避免图片加载从无到有，导致页面抖动
大量图片流资源，使用懒加载技术按需加载

html复制代码<!-- 禁止 src 取值为空 -->
<img src="" />
 
<!-- 推荐 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />

图片资源守则

大小

尺寸小于 50 × 50 的请使用字体图标（iconfont）或者将多个图标合成一张大图使用（雪碧图）尺寸大于 50 × 50 的图片，引入前先使用在线压缩对其进行压缩，图片大小尽量控制在 300kb 以内

倍率

PC端、移动端推荐使用 2倍图 (@2x），避免设备分辨率过高，图片显示失真模糊如有兼容 iPad 场景等特殊场景，可使用 3倍图（@3x）

html复制代码<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>

2倍图：图片展示区域大小 : 图片实际尺寸 = 1 ：2

无论使用几倍图，图片大小都需遵守上条限制

如遇图片倍图问题，可咨询 @UI童鞋

性能守则

避免不必要的 DOM 操作浏览器遍历 DOM 元素的代价是昂贵的。最简单优化 DOM 树查询的方案是，当一个元素出现多次时，将它保存在一个变量中，来避免多次查询 DOM 树。

js复制代码/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
   
/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = ul.getElementsByTagName('li')

异步加载第三方内容当你无法保证嵌入第三方内容比如埋点、调研等资源正常工作的时候，你需要考虑用异步加载这些代码，避免阻塞整个页面加载。
减少标签的数量编写 HTML 代码时，尽量避免多余的标签嵌套，避免 DOM树的冗余
控制静态资源数量

1个页面中建议CSS文件不要超过3个（1个组件库样式文件、1个项目公共样式、1个页面样式）； JS文件不要超过5个（1个框架文件、1个组件库文件、1个项目公共库文件、1个页面脚本文件、1个埋点文件）。

编码建议

缩进使用 2个空格样式建议引入 CSS reset 重置各浏览器自带样式差异 github.com/necolas/nor… JS 中字符串定义使用 '' 单引号

其他建议

保持一定的代码洁癖，尤其在大型项目中

代码逻辑应当直截了当，清晰易读，保持与业务逻辑与代码一一对应关系，减少逻辑错误的可能性，降低二次开发成本；
删除过期无用代码，减少代码过大，造成不必要的维护成本
代码尽量复用，拥有组件化思想
代码命名合理化，即使不写注释情况下，也可以让其他开发人员一眼明白意思
性能调至最优，降低耦合度，避免别人做不合理的优化时而造成的混乱
整洁的模块边界，明确的划分模块之间的逻辑边界，尽量保证职责单一，避免功能交叉混杂
让代码没有改进的余地，在开发时把各种情况都想到了，如果有人企图改进它，总是会回到原点

性能检测工具 - Lighthouse简介 Lighthouse是一个Google开源的自动化工具，主要用于改进网络应用的质量。Lighthouse会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。

Chrome拓展程序谷歌商店安装lighthouse后，在右上角或者菜单里点击图中图标，Options可以配置测试项目，点击Generate report即可测试。

命令行

js复制代码<!-- 安装 lighthouse 组件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 启动测试 （测试过程中会自动打开 Chrome 完成后会在当前目录生成一个静态HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 帮助-->
lighthouse --help

检测结果

【附录】常用的标签规范

标签	语义	嵌套常见错误	常用属性
<a></a>	超链接/锚	a不可嵌套a	href,name,title,rel,target
<div></div>	块级容器
<p></p>	段落	不能嵌套块级元素
<span></span>	内联容器（行内元素）	不可嵌套块级容器
<form></form>	表单		action,target,method,name
<input />	输入框	不可嵌套元素	type,name,value,checked,disabled,maxlength,readonly,accesskey
<textarea></textarea>	多行文本输入控件		name,accesskey,disabled,readonly,rows,cols
<img />	图像	不可嵌套元素	alt,src,width,height
<label></label>	标签（常用input元素定义标注）	不可嵌套块级容器	for
<table></table>	表格	只可嵌套表格子元素	width,align,background,cellpadding,cellspacing,summary,border
<tbody></tbody>	表格主体	只能嵌套在table内
<thead></thead>	表头	只能嵌套在table内
<tr></tr>	表格行	嵌套于table或thead、tbody、tfoot
<td></td>	表格中的单元格	只用于tr	colspan,rowspan
<th></th>	表格中的标题单元格	只用于tr	colspan,rowspan
<tfoot></tfoot>	表格表尾	只用于table
<button></button>	按钮	不可嵌套表单、表格等块级元素	type,disabled
<select></select>	列表框或下拉框	只能嵌套option或optgroup	name,disabled,multiple
<option></option>	select中的一个选项	只能嵌套在select内	value,selected,disabled
<ol></ol>	有序列表	只能嵌套li
<ul></ul>	无序列表	只能嵌套li
<li></li>	无序列表项	只能嵌套在 ul 或 ol 内
<iframe></iframe>	内嵌一个网页		frameborder,width,height,src,scrolling,name
<br />	换行
<link />	引用样式或icon	不可嵌套任何元素	type,rel,href
<meta />	文档信息	只用于head内	content,http-equiv,name
<script></script>	引用脚本	不可嵌套任何元素	type,src
<style></style>	引用样式	不可嵌套任何元素	type,media
<title></title>	文档标题	只用于head内

点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

作者：StriveToY
链接：https://juejin.cn/post/7262378982255394873

在线咨询

上一篇：各种各样加密算法的js库，安全加密不再愁-crypto-js
下一篇：网页前端基础教程06-HTML中body属性和表格详解，收藏

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Web基础知识 、 HTML快速入门