eb开发是一个很依赖经验的领域，然而这对初学者很不友好。

知识一旦脱离了应用场景就会变得晦涩、空洞，且知识本身也满足“二八定律”，“抓大放小”是提高学习效率的关键。

下文向大家介绍了HTML和CSS之间的关系。内容选自《HTML 5与CSS 3核心技法（全彩）》一书。本书主线清晰，讲解简洁，并提供在线效果演示效果，非常适合小白上手！

1 HTML是骨架

很难想象一个人在桌前对着一块砧板坐一夜，隔一会儿就噼里啪啦敲几下，一会儿哭一会儿笑，是一种什么景象。事实上，在猫眼中我们就是这样的。只不过我们面对的是一块会发光的“砧板”而已。但为什么这块“板子”如此吸引人？“上网”到底是在做什么？

获取信息。

重点在“信息”，一种看不见摸不着却真实存在的东西。无论“1 + 1 = 2”这段字符显示得多么粗糙，都不会影响它传递了完整的信息，以及这条信息的内在逻辑是正确的，不是吗？HTML就是用来盛放最核心的内容——信息。

所以，在CSS和JavaScript出现之前，HTML就出现了。这是必然的，因为如果连最核心的信息都无法有效传递，那围绕着它的一切装饰物和附属品都是毫无意义的。

除满足承载核心信息的需求外，HTML还解决了一个重要的问题——将信息结构化。

试想有这样一篇文章：

背影

我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。

评论

王花花 大概，天底下的父亲，老去的样子都有些共同的特质吧

李拴蛋 我们都不愿意承认他老了

刘备备 想吃橘子...

此时上面的信息基本没有结构，只能通过断行或缩进尽可能让内容更易读，编辑时的状态就是其最终的显示效果。

HTML就派上了用场，见下方的代码：

代码

<artcle>

<h1>背影</h1>

<p>

我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。

</p>

</artcle>

<section id="comment-list">

<div class="title">评论</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父亲，老去的样子都有些共同的特质吧</span>

</div>

<divclass="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我们都不愿意承认他老了</span>

</div>

<div class="comment">

<strong class="username">刘备备</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

一头雾水没关系，后面我们会细说每一个部分。总之这段内容给人感觉反而更繁琐。但繁琐是代价，重要的是现在这段信息有结构了。这就意味着计算机可以通过结构的规律将其显示得更便于阅读（甚至是交互）。

以下是不加任何装饰性内容直接让浏览器呈现的结果：

效果

这是纯HTML在没有引入任何装饰时的显示效果。很明显，即便是这样也比纯文字状态易读了许多。但注意，HTML本身没有样式，字体大小和粗细有变化的原因是浏览器的默认样式起了作用，与HTML没有关系。而重点就在这里，这意味着我们可以基于这个结构设计自己的页面效果，见下方的示例。

代码

<style>

body { font-family: 'Microsoft YaHei', sans-serif; }

#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }

#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }

#comment-list .title {

color: #777; font-size: 1.1rem; padding-bottom: 5px;

border-bottom: 1px solid #ccc;

}

</style>

<artcle>

<h1>背影</h1>

<p>

我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。

</p>

</artcle>

<section id="comment-list">

<div class="title">评论</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父亲，老去的样子都有些共同的特质吧</span>

</div>

<div class="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我们都不愿意承认他老了</span>

</div>

<div class="comment">

<strong class="username">刘备备</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

效果

这里只是举了一个小示例。你可以轻而易举地让页面的风格千变万化，进而让用户体验有所差异（或差距）。“千变万化”因CSS灵活、强大，“轻而易举”因HTML简洁、有序。结构的力量！

CSS是皮肤

一个充满活力的生态是不满足于现状的。人们在适应了便利地浏览核心信息之后，就会想方设法改进浏览的体验。比如，让自己的博客以多栏显示，以便在视觉上区分不同板块；修改字体颜色，以便强调一些重要信息等。

起初的做法是——准备几种特殊的标签，专门用于样式的指定。涉及布局的地方，如果没有特殊标签就直接用表格布局。以下没有任何样式的状态（以下代码均不需要看懂）：

代码

<h1>标题</h1>

<p>

从前有座山，山里有个庙，庙里...

</p>

效果

此时的页面结构下。

如果想让标题居中，则需要给其添加元素<center>，见下方的示例。

代码

<center>

<h1>标题</h1>

</center>

<p>

从前有座山，山里有个庙，庙里...

</p>

效果

此时的页面结构如下。

居中标题的目的确实达到了，但是有一个很大的问题：如果我改变主意了，不想让其居中了，那么我还得再去将<center>元素去掉。这对于简单的页面确实可行，但如果是复杂的页面，这种做法的工作量就是噩梦，因为每个地方都得修改，无论是对齐方式、颜色、背景色，还是大的布局都必须通过修改结构才能完成。这种做法的最大问题是可维护性太差，很多时候为了一种样式要修改很多不必要的结构，枯燥、重复、削足适履的工作太多，基本上写一次就再也不想改了。

这个问题亟待解决，而且解决方案还要兼容现有规则。现有规则是什么？HTML的语法及结构。不过既然HTML已经有结构了，为什么不好好利用呢？

以前面示例中的文章页面为例，如果我们想更改标题，是否可以先统一选中所有标题，然后说明想要什么样式规则呢？就像下面这样：

所有h1 元素听着

对齐方式 居中。

字体颜色 黑色。

如果想将所有段落字体放大，则像下面这样：

所有p 元素听着

字体大小 150%。

这种方式的确很高效！同时这个规则与HTML语法无关，相当于另一种语言。这样结构和样式就不会互相影响，结构是结构，样式是样式，两者隔离开了。如果想修改样式，则完全不需要劳HTML大驾，只需要修改样式文件即可，更便于管理和维护。这就是CSS，只不过其语法更简洁。

下面以修改标题对齐方式为例：

h1 { /* 所有h1 元素听着 */

text-align: center; /* 对齐方式 居中 */

}

通过批量选择和处理，极大地提高了开发效率，降低了维护成本，四两拨千斤。

（完）

图书推荐

《HTML 5与CSS 3核心技法（全彩）》

表严肃 著

本书能够为自学Web开发初学者建立一套HTML与CSS的核心知识框架，同时借助丰富的示例让初学者有一个愉悦、轻松的学习过程。

想从事前端开发的，可将本书作为学习的起点。正从事前端开发的，可将本书作为速查的手册。

、HTML简介

1.HTML是什么?

HTML:htper text markup language超文本标记(标签)语言

由各种标签组成，用来制作网页，告诉浏览器如何显示页面

2.作用

• 制作网页，控制网页和内容的显示
• 插入图片、音乐、视频、动画等多媒体
• 通过链接来检索信息
• 使用表单获取用户的信息，实现交互

3.版本

w3c:world wide web consortium万维网联盟，制定web技术相关标准和规范的组织，HTML技术hi由w3c制定的标准

两个版本:HTML4.0.1、HTML5.0-----通常H5

官网：http://www.W3shcool.com.cn

4.扩展名

HTML文档是以.html或.htm结尾

二、HTML文档结构

1.基本结构

1.1简介

• HTML标签是由尖括号括起来的关键词，如,通常是成对出现的,如<html></html>
• 以 <html>为根标签，包含： <head>头部和<body>主体部分
• 头部提供关于网页的相关信息，如标题、文档类型、字符编码、关键字等摘要信息
• 主体部分提供网页的显示内容，真正显示在页面中的内容
• 合理地进行缩进
• 标签名不区分大小写，但是一般要用小写

1.2.开发工具

记事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等

使用步骤：

1. 新建文件(cltr+N)，然后保存（ctrl+s）,指定扩展名为.html
2. 编写HTML代码
3. 在浏览器中打开文件

使用技巧：

• 先保存再写代码，否则代码无颜色提示
• 创建一个文件夹，用于保存所有的网页内容，将文件夹拖拽到sublime中，便于管理
• 显示/隐藏侧边栏方式1:查看–>侧边栏–>显示/隐藏侧边栏方式2:ctrl+K紧接着按B
• 显示多栏方式1：查看–>布局–>列数：2列方式2：Alt+shift+2

1.3浏览器

常见的浏览器：IE浏览器微软、chrome谷歌浏览器、fifirefox火狐、safari苹果

浏览器的作用是读取html文件，并以网页的形式来显示

浏览器不会直接显示html标签，而是使用标签来解释网页的内容

2.标签

2.1标签的组成

一个完整的html标签的组成：

<标签名 属性名="属性值">内容</标签名>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>标签</title>
	</head>
	<body  bgcolor="red" text="blue">
		html从入门到精通!
    </body>
</html>
12345678910

属性值要用双撇号括起来，一般用双引号

2.2标签的分类

根据标签是否关闭，分为，关闭型和非关闭型

• 关闭型：有结束标签，即标签成对出现

<html></html>
<head></head>
<title></title>

非关闭型：没有结束标签

<meta>
<br>
<h1>....<h6>

根据标签是否独占一行，分为块级标签和行级标签

块级标签：显示为块状，独占一行

<h1>大家好</h1>
<hr>

行级标签：在行内显示，可与其他内容在同一行显示

<span></span>

2.3注释

注释在浏览器中不会显示,是用来标注解释html语句,但通过查看源代码的方式可以看到

语法:

<--注释内容-->

2.4实体字符

也称为特殊字符,用于显示一些特殊符号,如<>&空格等

语法:

<&实体字符的名称>

2.5文档类型

在html文档的第一行,使用<!DOCTYPE html>

声明HTML文档的类型用来告诉浏览器页面的文档嘞型,用来制定html版本的规范

目前基本上最常用的html5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
12345678910

三\常用标签

3.1基本标签

• 块级标签\亲啊后有明显的间隔 |
  | h1…h5 | 标题标签 | 按照h1到h6逐渐变小.块级标签 |
  | | | |
  | | | |
  

• 三、常用标签

1.基本标签

1.1 有序列表
ol:ordered listli:list item默认使用阿拉伯数字、从1开始标记，可以通过属性进行修改
· type属性：设置列表的符号标记、取值；数字1（默认）、字母（a或A）、罗马数字(i或I) · start属性：设置起始值，值必须是数字
1.2 无序列表
ul:unodered list
li:list item
默认情况下使用实心圆表作为符号标记，可以通过属性进行修改
· type属性：设置列表的符号标记、取值：disc实心圆（默认）、circle空心圆、square正方形、none不 显示项目符号
1.3 定义列表
dl:definition list
dt:definition title
dd:definition description
1.4 水平线标签
hr:horizontal
常用属性：
· color:颜色

两种方式：

颜色名称：如red、green、blue、white、black、pink、orange等

16进制的RGB表示法：Red、Green、Blue用法：#RRGGBB 每种颜色的取值范值0-255，转换为16 进制00-FF

如: #FF0000 红色 #00FF00绿色 #0000FF蓝色 #FFFFFF白色、#CCCCCC #FF7300桔色

· size:粗细，数值

· width宽度

两种写法：

​ 像素：绝对值（固定值）

​ 百分比：相对值，相对于水平线标签所在父容器宽度的百分比

· align对齐

​ 取值：center居中 left right
1.5图像标签
img:image
常见的图片格式：.jpg .png .gif .bmp
常见的属性：
· src:source指定图片的路径（来源），必选叁数

如果图片与html源代码在同一个文件夹中，可以直接在src中写图片名称即可

习惯上，我们会将多个图片与html代码文档分别放在同一个文件夹project中的不同目录下，此时需要 在src中指定图片的路径为相对路径

路径的分类：

​ · 相对路径

​ 表示： ./当前路径
…/当前位置的上一级文件夹

​ 提示：…/image

​ · alt:当图片无法显示时显示的提示信息

​ · title:当鼠标放到图片上时显示的提示信息

​ · width和 height:设置图片的宽度和高度
默认图片以原始尺寸显示

​ 如果只设置其中一个，则另一个会按比例缩放

​ 如果同时设置宽和高，可能导致图片变形

​ 两种写法：

​ 像素：绝对值（固定值）

​ 百分比：相对值，相对于父容器的尺寸的百分比
2.其他标签

为了更好语义化
3.头部标签
· meta定义网页的摘要信息，如字符编码，关键词，描述，作者等
· title定义网页的标题
· style定义内容css样式
· link引用外部css样式
· script定义或引用脚本
· base定义基础路径
默认以当前页面文件所在的位置为相对路径参照
4.标签嵌套
一个标签中嵌套另外一个标签
标签不能乱嵌套
浏览器渲染后显示的页面代码与编码时有所不同
chrome浏览器提供的开发工具：帮助开发人员查看和调试页面的
如何打开：
· Elements:从浏览器的角度来看页面，浏览器渲染页面时内部的结构
· console:控制台，显示各种警告和错误信息
· network:查看网络请求信息，浏览器向服务器请求了哪些资源，资源大小，
加载资源所消耗的时间

四、超链接
1.简介
使用超链接可以从一个页面跳转到另外一个页面，实现页面之间导航
当鼠标移动到超链接文本或图片时，鼠标箭头会变成一只小手
超链接有三种类型:
普通链接/页面间的链接，跳转到另一个页面 锚链接：链接到锚点（链接到同一个页面的指定位置） 功能链接：实现特殊功能(发邮件，下载)
2.基本用法
使用 标签来创建超链接
语法格式：

常用属性：
href:链接地址或路径,链接地址

world

链接文本或图片

1 2 3 4 5 1 target:链接打开的位置,取值

路径分类：
绝对路径 以根开始的路径
file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png
相对路径 相对于当前页面文件所在的路径,不是以根开始的路径 ./ 当前路径 …/ 当前位置上一级目录

3.锚链接
3.1简介
点击链接后跳转到某一个页面的指定位置（锚点anchor）
锚链接的分类：
页面内的锚链接 页面间的锚链接
3.2 页面内的锚链接
步骤：

1. 定义锚点（标记）
2. 链接锚点
   _self 自身，当前，默认值 _blank新的，空白的 _parent父层框架 _top顶层框架
   目标位置
   1 2 3 4
   1

3.3 页面间的锚链接

4.功能链接
5.URL
5.1 简介
URL:Uniform Resource Locator 统一资源定位器,用来定位资源所在的位置，最常见的就是网址

5.2 组成
一个完整的URL由8个部分组成：
协议：prococol 如 http:超文本传输协议，用来访问WEB网站Hyper text Transfer protocal https:更加安全的协议 SSL安全套接子层 ftp文件传输协议，用来访问服务器上的文件，实现文件的上传和下载File Transfer protocol file:文件协议，用来访问本地文件 主机名hostname服务器地址或服务器Netbios名称,如www.baidu.com ftp://10.255.254.254 端口：port位于主机名的后面，使用冒号进行分隔 不同的协议使用不同的端口，如http使用80端口,https使用的443端口,ftp使用20和21 如果使用的是默认端口，则端口可以省略 如果使用的不是默认端口，则必须指定端口http://59.49.32.213:7070/ 路径：path目标文件所在的路径结构，如:www.baidu.com/img/ 资源resource要访问的目标文件，如bd_logo1.png 查询字符串：query string 也称为参数 在资源后面使用?开头的一组名称/值
链接文本
链接文本
https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male https://www.w3school.com.cn/html/html_quotation_elements.asp file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html http://www.sxgjpx.net/ ftp://10.255.254.253/
1
1
1 2 3
4 5
名称和值之间以=分隔，多个之间用&分隔，如:name=tom&age=2&sex=male 锚点anchor，在资源后面使用#开头的文本，如#6 身份认证authentication,指定身份信息，如：ftp://账户:密码@ftp.bbshh010.com
五、表格
1.简介
表格是一个规则的行列结构，每个表格是由若干行组成，每行由若干个单元格组成
table row column
2.基本结构
2.1 table标签
用来定义表格
常用属性：
border:表格边框 默认为0 width/height：宽度/高度 bordercolor:边框的颜色 align:对齐方式，取值：left(默认) center居中 right居右 bgcolor:背景颜色 background:背景图片 cellspacing间距：单元格与单元格之间的距离 cellpadding边距：单元格中的内容到边界之间的距离
2.2 tr标签
用来定义行：table row
常用属性：
align:水平对齐 取值：left(默认) center right valign垂直对齐 取值：top center bottom bgcolor:背景颜色 background:背景图片
2.3 td标签
用来定义单元格，table data
常用属性：align、valign、bgcolor、background
注意：表格必须是由行组成，行必须由单元格来组成，数据必须放到单元格中
3.合并单元格
合并单元格也称为单元格的跨行跨列
两个属性：
rowspan 设置单元格所跨的行数 colspan 设置单元格所跨的列数
步骤：

1. 在跨越的单元格中设置rowspan/colspan属性 2. 将被跨越的单元格删除
   必须要保证每行的实际列数是相同的，否则表格可能会出错乱
   4.高级标签
   4.1caption标签
   表格的标题标签
   4.2thead标签
   表格的头部table head
   4.3th标签
   表格的头部标题table head title
   一般用在thead中，设置头部的标题，替代td标签，与td的区别，th中的文本会加粗且居中显示
   4.4tbody标签
   表格的主体table body
   4.5tfoot标签
   表格的底部table foot

六、表单
1.简介
表单是一个包含若干个表单元素的区域，用于获取琐类型的用户数据

表单元素是允许用户在表单输入信息的元素，如文本框、密码框、单选按钮、复选框、下拉列表、按钮等
2.表单结构
2.1表单语法

1

2.2form标签
用来定义表单，可以包含多个表单元素
常用属性：
action:提交数据给谁处理，即处理数据的程序，默认为当前页面 method:提交数据的方式或方法，取值：get(默认)，post get和post的区别： get:以查询字符串的形式提交，在地址栏中能看到，长度有限制，不安全 post以表单数据组的形式进行提交，在地址栏中看不到，长度无限制，安全 enctype(encode type)编码类型：提交数据的编码，取值：application/X-www-form-urlencoded(默 认)、multipart/form-data(文件上传)
3.表单元素
大多数的表单元素都是使用 标签来定义的，通过设置属性type来定义不同的表单元素

1

3.1单行文本框
常用属性：
·name名称，很重要，如果没有定义name属性，则该表单元素的数据是无法提交的

·value初始值

·size显示宽度

·maxlength:大字符数，默认是没有限制

·readonly只读：readonly=“readonly”,可简写readonly,即只写属性名

·disabled禁用：disabled=“disabled”, 可简写disabled完全禁用

表单元素被提交的两个条件，1.有name属性2.非disabled

3.2 单选按钮
常用属性：

·name名称：多个radio的name属性必须相同，才能实现互斥（单选）

·value值

·checked:是否被选中，两种状态，选中，未选中 checked=“checked” 简写 checked

3.3 复选框
常用属性与单选按钮radio类似

3.4 文件选择器
常用属性：

·name:名称

·accept设置可选择的文件类型，用来限制上传的文件类型

使用MIME格式字符串对资源类型进行限制

常见的MIME类型：

·纯文本：text/plain text/xml text/html

· 图像：image/png image/jpeg image/gif

4.特殊表单元素

4.1下拉列表

select常用属性：

·name名称

·size行数，同时显示多个选项

·multiple允许同时选择多个

option常用属性：

·value选项值

·selected设置默认选中项

optgroup常用属性：

·label分组的标签

4.2文本域

·name名称

·rows行数

·cols列数

5、其他标签

5.1 label标签

为表单元素提供标签，当选中label标签中的文本内容时会自动将光标切换到与之相关联的表单元素。

常用属性：

·for必须将该属性值设置为与相关联的表单元素的Id属性值相同。

注：几乎所有HTML标签都具有id属性，且id值必须唯一。

5.2 button标签

也表示按钮，与input按钮类似

语法：

1按钮文字或图像

常用属性：

·type按钮的类型，取值: submit（默认）、reset、button

5.3 fieldset和legend标签

fieldset标签，对表单元素进行分组

legend标签，对分组添加标题

七、内嵌框架
1、简介

使用iframe可以在一个页面中引用另一个页面，实现复用、灵活

2、基本用法

语法：

1

常用属性：

· src:引用的页面

· width/height宽度/高度 ，像素或百分比

· frameborder是否显示边框，取值：1(yes) 0(no)—默认

· scrolling是否显示滚动条，取值：yes no auto

· name属性 为框架定义名称

3、在框架中打开链接

1

2

3链接的文本或图像

八、HTML5简介

1、发展

W3C于1992年12月发布了HTML4.0.1标准
W3C于2014年10月发布了HTML5标准

2、特点

· 取消了过时的标签，如font、center等，它们仅具有展示外观的功能

· 增加了一些更具有语义化的标签，如header、footer、aside等

· 增加了一些新功能标签，如canvas、audio、video

· 增加了一些表单控件，如email、date、time、url、search等

· 可以直接在浏览器中绘画（canvas），无需flash

· 增加了本地存储的支持

3、兼容性

http://caniuse.com

提供了各种浏览器版本对HTML5和CSS规范的支持度

九、HTML5新增内容
1、结构相关的标签

用来进行页面结构布局，本身无任何特殊样式，需要使用CSS进行样式设置

· article定义一个独立的内容，完整的文章

· section定义文档的章节、段落

· header文章的头部、页眉、标题

· footer文章的底部、页脚、标注

· aside定义侧边栏

· figure图片区域

· figcaption为图片区域定义标题

· nav定义导航菜单

结构标签只是表明各部分的角色，并无实际的外观样式，与普通div相同

2、语义相关的标签
2.1 mark标签
标注，用来突出显示文本，默认添加黄色背景
2.2 time标签
定义日期和时间，便于搜索引擎智能查找
2.3 details和 summary标签
默认显示summary中的内容，点击后显示details中的内容
注：并不是所有的浏览器都兼容，chrome、opera支持、Firefox、IE浏览器不支持
2.4 meter标签
计数仪，表示度量
常用属性：

· max定义大值，默认为1

· min定义小值，默认为0

· value定义当前值

· high定义限定为高的值

· low定义限定为低的值

· optimum定义佳值

规则：

1. 如果optimum大于high，则表示值越大越好

当value大于high时为绿色

当value在low与high之间时为黄色

当value小于low时为红色

1. 如果optimum小于low，则表示值越小越好

当value小于low时为绿色

当value在low与high之间时为黄色

当value大于high时为红色

1. 当optimum介于low和high之间，则表示值在low和high之间好当value在low与high之间时显示绿色，否则显示黄色

2.5 progress标签
进度条，表示运行中的进度
常用属性：

· value定义当前值

· max定义完成的值

3.表单相关
3.1 新增表单元素
新增以下type类型：

· email接收邮箱

· url接收URL

· tel接收电话号码，目前仅在移动设备上有效

· search搜索文框

· number/range接收数字/数字滑块,包含min,max,step属性

· date/month/week/time/datetime日期时间选择器，兼容性不好

· color颜色拾取

作用：

· 具有格式校验的功能

· 可以与移动设备的键盘相关联

3.2新增表单属性
form标签的属性：

· autocomplete是否启动表单的自动完成功能， 取值:on(默认)、off

· novalidate提交表单时不进行校验，默认会进行表单校验

3.3 新增表单元素的属性
新增表单元素属性：input/select/textarea等

· placeholder提示文字

· required是否必填

· autocomplete是否启用该表单元素的自动完成功能

· autofocus设置初始焦点元素

· pattern使用正则表达式（RegExp后面会讲解），进行数据校验

· list使文本元素具有下拉列表的功能，需要配合datalist和option标签一起使用

· form可以将表单元素写在form标签外面，然后通过该属性关联指定的表单

4、多媒体标签
4.1audio标签
在页面中插入音频，不同的浏览器对音频格式的支持不一样
audio常用属性：

· src音频文件的来源

· controls是否显示控制面板，默认不显示

· autoplay是否自动播放，默认不自动播放

· loop是否循环播放

· muted是否静音

· preload是否预加载，取值：none不预加载、auto预加载（默认）、metadata只加载元数据

如果设置了autoplay属性，则该属性无效

可以结合source标签使用，指定多个音频文，浏览器会检测并使用第一个可用的音频文件

4.2 video标签
在页面中插入视频，不同的浏览器对视频格式的支持不一样
用法与audio标签基本相同，增加属性：

· widht/height视频播放器的宽度/高度

· poster在视频加载前显示的图片

案例1hello.html

<html>
	<body>
		<tiele>HTML技术</tiele>
	</body>
	<body>
		大家好，欢迎学习html技术!
	</body>
</html>1234567

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h271e4v6-1593240920352)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例1.png)]

案例2标签的组成.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签</title>
</head>
<body text="blue">
	标签的组成
	<br>
	html从入门到精通！
	<hr>
	<h1>标签的分类</h1>
	<hr>

	<h2>标签的分类</h2>
	<hr>

	<h6>标签的分类</h6>
	<hr>

	<span>哈哈</span>嘿嘿
	
</body>
</html>1234567891011121314151617181920212223

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jx6zJE1P-1593240920354)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例2.png)]

案例3实体字符.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	图书:<<HTML从入门到精通<<
	<hr>

	北京      上海      广州
	<hr>

	在HTML中用<表示<小于号
	<hr>

	“HTML语言” 或 &qout;HTML语言&qout;
	<hr>

	版权所有© 2000-2020 高教培训
	<hr>

	×关闭符号
</body>
</html>123456789101112131415161718192021222324

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nuFLl3hm-1593240920355)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例3.png)]

（剩下的下期出）

原文链接：https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html

作者：WanXuang

出处：从CSDN

并讠果：itzcw.com/9395/

一、HTML5基础知识和职责能力

HTML5 是最新版本的 HTML 标准，它引入了许多新的特性和功能，包括语义化标签、多媒体支持、表单控件等，具有广泛的应用范围。以下是 HTML5 的基础知识和常见的职责能力：

基础知识：

1. 语义化标签： HTML5 引入了一些新的语义化标签，如 <header>、<nav>、<section>、<article>、<footer> 等，用于更清晰地定义页面结构和内容。
2. 多媒体支持： HTML5 提供了 <audio> 和 <video> 标签，可以直接在网页中嵌入音频和视频内容，并支持各种格式。
3. 表单控件： HTML5 引入了一些新的表单控件，如 <input type="date">、<input type="email">、<input type="number"> 等，提供了更多样化和丰富的表单输入方式。
4. Canvas 绘图： HTML5 的 <canvas> 元素允许通过 JavaScript 脚本来动态绘制图形，实现各种图形和动画效果。
5. 本地存储： HTML5 提供了本地存储功能，包括 localStorage 和 sessionStorage，可以在客户端存储数据，实现持久化存储和会话存储。
6. WebSocket： HTML5 引入了 WebSocket 技术，提供了浏览器与服务器之间全双工通信的能力，实现实时交互和推送消息。

职责能力：

1. 熟练掌握 HTML5 标准： 能够熟练使用 HTML5 标签和特性，合理地应用语义化标签和新的表单控件，优化页面结构和内容。
2. 跨浏览器兼容性： 能够编写兼容各种主流浏览器的 HTML5 代码，处理不同浏览器之间的兼容性问题，确保页面在不同浏览器中的一致性和稳定性。
3. 与 CSS 和 JavaScript 配合： 能够熟练使用 CSS 样式和 JavaScript 脚本，实现与 HTML5 页面交互和动态效果，提升用户体验和页面功能。
4. 语义化标签应用： 能够合理地应用 HTML5 的语义化标签，优化页面结构和 SEO，提升页面的可访问性和搜索引擎排名。
5. 响应式设计和移动端优化： 能够编写响应式的 HTML5 页面，实现在不同设备上的适配和优化，提升移动端用户体验。
6. 安全意识和性能优化： 具备对网页安全和性能优化的意识，采取相应的措施保障页面的安全性和性能，减少页面加载时间和资源消耗。

综上所述，HTML5 的基础知识和职责能力涵盖了对 HTML5 标准的熟练掌握、跨浏览器兼容性、与 CSS 和 JavaScript 的配合、语义化标签应用、响应式设计和移动端优化、安全意识和性能优化等方面。

二、CSS3基础知识和职责能力

CSS3 是 CSS（层叠样式表）的第三个主要版本，引入了许多新的特性和功能，用于美化和布局网页。以下是 CSS3 的基础知识和常见的职责能力：

基础知识：

1. 选择器： CSS3 提供了更多的选择器，如属性选择器、伪类选择器、伪元素选择器等，可以更精确地选取页面中的元素进行样式设置。
2. 盒子模型： CSS3 引入了更多的盒子模型属性，如 box-sizing 属性、border-radius 属性、box-shadow 属性等，用于设置盒子的尺寸、边框、圆角和阴影等效果。
3. 背景和边框： CSS3 提供了更多的背景和边框样式设置，如渐变背景、多重背景、边框图片、边框圆角等，可以实现更丰富和复杂的页面效果。
4. 文本效果： CSS3 引入了更多的文本样式设置，如文本阴影、文本渐变、文本描边、文字溢出处理等，可以改变文本的外观和风格。
5. 变换和过渡： CSS3 提供了变换（Transform）和过渡（Transition）效果，可以实现元素的旋转、缩放、位移等变换效果，以及元素状态的平滑过渡效果。
6. 动画： CSS3 引入了动画（Animation）效果，可以通过关键帧动画（Keyframes）定义动画序列，实现元素的复杂动态效果。

职责能力：

1. 熟练掌握 CSS3 特性： 能够熟练使用 CSS3 提供的各种特性和功能，包括选择器、盒子模型、背景和边框样式、文本效果、变换和过渡效果、动画效果等。
2. 响应式布局和设计： 能够编写响应式的 CSS3 样式，实现页面在不同设备上的适配和优化，提升用户体验和页面的可访问性。
3. 兼容性和浏览器支持： 能够处理不同浏览器之间的兼容性问题，编写兼容各种主流浏览器的 CSS3 样式，确保页面在不同浏览器中的一致性和稳定性。
4. 与 HTML 和 JavaScript 配合： 能够与 HTML 结构和 JavaScript 脚本配合，实现页面的动态效果和交互功能，提升用户体验。
5. 性能优化： 具备对 CSS3 样式的性能优化意识，采取相应的措施减少样式文件大小和加载时间，提升页面的加载速度和性能表现。
6. 创造性设计和实现： 能够根据设计需求和用户体验，创造性地设计和实现各种样式效果，提升页面的美观度和吸引力。

综上所述，CSS3 的基础知识和职责能力涵盖了对 CSS3 特性的熟练掌握、响应式布局和设计、兼容性和浏览器支持、与 HTML 和 JavaScript 的配合、性能优化、创造性设计和实现等方面。

三、JavaScript基础知识和职责能力

JavaScript 是一种用于网页交互的脚本语言，用于实现网页的动态效果和交互功能。以下是 JavaScript 的基础知识和常见的职责能力：

基础知识：

1. 语法和语义： JavaScript 的语法类似于其他编程语言，包括变量声明、数据类型、运算符、流程控制语句（如条件语句和循环语句）、函数定义等。
2. 数据类型： JavaScript 包括基本数据类型（如字符串、数字、布尔值）和复杂数据类型（如对象、数组、函数），可以灵活地处理各种数据。
3. 函数和作用域： JavaScript 具有函数式编程的特点，支持函数的定义、调用和传递，同时具有词法作用域和动态作用域的特性。
4. DOM 操作： JavaScript 可以操作文档对象模型（DOM），实现对网页内容的动态修改和交互，包括元素的创建、删除、属性修改、事件绑定等。
5. 事件处理： JavaScript 可以捕获和处理网页中的各种事件，如鼠标事件、键盘事件、表单事件等，实现页面的响应和交互。
6. 异步编程： JavaScript 支持异步编程模式，包括回调函数、Promise 对象、async/await 等，用于处理异步操作，如网络请求、定时任务等。

职责能力：

1. 网页交互和动态效果： 能够使用 JavaScript 实现网页的动态效果和交互功能，如元素的显示与隐藏、动画效果、轮播图、Tab 切换等。
2. 表单验证和数据处理： 能够编写 JavaScript 脚本实现表单的验证和数据处理，包括输入内容的格式校验、实时反馈提示、数据提交等。
3. 与后端通信： 能够使用 JavaScript 发起 AJAX 请求或使用 Fetch API 与后端进行数据交互，实现前后端的数据通信和页面内容的动态更新。
4. DOM 操作和事件处理： 能够使用 JavaScript 操作 DOM，实现页面内容的增删改查，以及事件的捕获、处理和委托，实现页面的交互功能。
5. 模块化和组件化开发： 能够使用模块化的 JavaScript 开发工具（如ES6 模块、CommonJS、AMD、UMD 等）进行代码组织和管理，实现代码的复用和维护性。
6. 性能优化和安全防护： 具备对 JavaScript 代码的性能优化意识，采取相应的措施减少代码体积和提高执行效率，同时具备防止 XSS、CSRF 等安全漏洞的能力。

综上所述，JavaScript 的基础知识和职责能力涵盖了语法和语义、数据类型、函数和作用域、DOM 操作、事件处理、异步编程等方面，以及网页交互和动态效果、表单验证和数据处理、与后端通信、模块化和组件化开发、性能优化和安全防护等职责能力。

四、如何将HTML5 CSS3 JS结合使用

结合使用 HTML5、CSS3 和 JavaScript 是创建现代 Web 应用程序的基础。以下是将它们结合使用的一般步骤：

1. HTML5 结构： 使用 HTML5 标记语言定义页面结构。HTML5 提供了许多新的语义化元素，如 <header>, <nav>, <section>, <article>, <footer> 等，以更好地描述页面内容。
2. CSS3 样式： 使用 CSS3 来设计和美化页面。CSS3 提供了许多新特性，如圆角、阴影、渐变、动画、媒体查询等，使得页面样式更加丰富和灵活。
3. JavaScript 交互： 使用 JavaScript 实现页面的交互和动态效果。JavaScript 可以捕获页面事件（如点击、滚动、键盘输入等），并根据事件进行相应的处理，实现页面的交互功能。
4. 事件绑定和DOM操作： 使用 JavaScript 将事件绑定到 HTML 元素上，并根据事件触发相应的操作。通过 DOM 操作，可以动态地创建、修改、删除页面元素，实现更丰富的交互体验。
5. AJAX通信： 使用 JavaScript 发起 AJAX 请求，与服务器进行数据交互。这可以使应用程序实现动态加载内容、实时更新数据等功能，提升用户体验。
6. 响应式设计： 使用 CSS3 中的媒体查询等技术，使页面能够在不同设备上自适应，并提供良好的用户体验。
7. 性能优化： 优化 JavaScript 和 CSS3 代码，减少页面加载时间和渲染时间，提升页面性能。可以使用技术如代码压缩、文件合并、延迟加载等。
8. 跨浏览器兼容性： 考虑不同浏览器的兼容性，确保页面在各种主流浏览器上正常显示和运行。

综上所述，结合使用 HTML5、CSS3 和 JavaScript 可以创建出功能丰富、样式漂亮、交互流畅的现代 Web 应用程序。