-
一幅长文细学HTML5和CSS3——一幅长文系列
文章目录
- 1 前言
- 2 HTML5
- 3 CSS3
- 4 服务器部署
- 5 前端素材
1 前言
对于编写前端网站来说，开发工具有很多种，垃圾到可以用记事本，快到可以用Vscode、Webstorm、Sublime、Dreamweaver、Hbuilder。
如果是学生党，且领取了捷贝斯公司的免费使用旗下产品资格，可以考虑使用Webstorm。
如果是学生党，懒得搞花里胡哨，可以使用下面两款产品。
Visual Studio Code - Code Editing. Redefined
Brackets - 一个现代的开源代码编辑器，了解网页设计。
如果是美工或者学校作业要求，可以使用Dreamweaver。
文章源码：HTML5和CSS3: 一幅长文细学HTML5和CSS3源码 (gitee.com)
练手项目源码：更新中
2 HTML5
在这一章的学习中，我们会讲述HTML5新增的特性。HTML5并不是一种新的语言，而是HTML语言的第五次重大修改版本。现如今很多主流浏览器都支持H5如chrome、firefox、safari。IE9及以上支持h5，IE8以下则不支持。
H5改变了用户与文档的交互方式。在以前的传统的HTML中，我们使用的是flash来插入多媒体。但在H5中，它兼收了flash的一些特性。
相对于H4来说，H5抛弃了许多不合理的标记和属性，新增了一些标记和属性。
H5增加了许多新的语义使得代码的可读性更好。其他的如二维三维变化、特效、本地存储特效等特性，我们在下面的学习中慢慢讨论。
2.1 HTML简介
网页
-
网页是指在因特网上按照一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
-
网页是网站中的一页，通常是HTML格式的文件，它要通过浏览器来阅读。
-
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常常为以.htm或.html后缀结尾的文件，故俗称HTML文件。
HTML
-
HTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。
-
HTML不是一种编程语言，而是一种标记语言。
-
标记语言是一套标记标签。
超文本
-
可以加入图片、声音、动画、多媒体等内容，超越了文本限制。
-
它还可以从一个文件跳转到另外一个文件，与世界各地主机的文件连接（超级链接文本）。
网页的形成
网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给客户的。
Web标准
Web标准主要包括结构、标签和行为三个方面。
标准 说明 结构 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML 表现 表现用于设置网页元素的板式、颜色、大小等外观样式，主要指的是CSS 行为 行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript
2.2 HTML基本页面
语法规范
- HTML标签是由尖括号包围的关键词，例如。
- HTML标签通常是成对出现的，例如和我们称其为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 有些特殊的标签必须是单个标签，例如
，我们称为单标签。 - 标签中是可以指定内容的属性的，写法采用键值对方式key = “value”。属性包含了元素的额外信息。其中值的引号可写可不写，但是习惯上大家还是会写上。
- 有的元素可以同时存在多个属性，属性之间以空格的方式隔开，标签名与属性之间也是，属性之间是无序的。
标签关系
双标签关系可以分为两类：包含关系和并列关系。
注释
注释格式：
注：如果是使用VScode，那么你只需要选中注释内容，然后
ctrl+/。
基本骨架
每个网页都会有一个基本结构标签，我们称之为骨架标签。页面的内容也是在这些基本标签上书写。
标签名 定义 说明 HTML标签 页面中最大的标签，我们称为根标签 > 文档的头部 注意在head标签中我们必须要设置的标签是title 文档的标题 让页面拥有一个属于自己的网页标题 文档的主体 元素包含文档的所有内容，页面内容基本上是放到body里面的 其余符号 作用 表明HTML网页版本 lang(意味language) 定义当前文档显示的语言，一般是en(English)或者zh-CN(中文)，除此之外还有fr(法语)等。 charset(Character Set,字符集) 多个字符的集合，以便计算机能够识别和存储各种文字，在head标签内可以使用标签的charset属性来规定HTML文档应该使用哪种字符编码。常用UTF-8、GBK、GB2312 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
注：
- 如果需要在VSCode中直接生成骨架，只需要输入!或html:5并且回车即可生成。
- 对于文档显示来说，定义为en的文档也可以显示中文，定义为zh-ch的文档也可以显示英文。但是如果定义为en英文网站，则浏览器中的翻译插件会在检测到英文后自动翻译。
- 一般情况下，使用!快捷生成的骨架如有需要可以修改lang，但是其他建议不要动，否则容易引起乱码。
程序清单1_1
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第一个程序title> head> <body> 你好 body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
2.3 文本标签
2.3.1 排版标签
排版标签 说明 标题标签 双标签，其中可选h1到h6。意为最多支持六级标题 段落标签 双标签 文字内容
，其中段落文字写于标签之中换行标签 单标签
或，意为重新开始一行水平线标签 单标签
，意为生成一条水平线，常用于分割不同主题内容
2.3.2 文本格式化标签
可以给特定的文字施加各种效果。
标签 说明 b 加粗 strong 加粗 u 下划线 ins 下划线 i 倾斜 em 倾斜 s 删除线 del 删除线
2.4 语义标签
2.4.1 无语义标签
div标签
双标签
文字内容，div标签相当于一个盒子，可用于存放多个内容，多次声明div标签可创造不同的盒子且位于不同行。
span标签
双标签文字内容，span相当于一个大区域，当使用span时，不管你使用几次标签，填写的内容都会被放到同一块区域中且位于同一行。
程序清单2_4_1
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <div>普通文字div> <div>普通文字div> <span>普通文字1span> <span>普通文字1span> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
2.4.2 语义标签
标签分类
在HTML5新版本中，推出了一些有语义的布局标签供开发者使用。这些标签多用于手机端网页开发。
标签名 语义 header 网页头部 nav 网页导航 footer 网页底部 aside 网页侧边栏 section 网页区块 aticle 网页内容 mian 文档主要内容 
2.5 多媒体标签
2.5.1 图像标签
图像标签
- 单标签
，单词img为image缩写。
- src是img标签的必须属性，它用于指定图像文件的路径和文件名。
图像标签属性
属性 说明 alt = “” 当图片加载失败时，显示alt指定的文本 title = “” 当鼠标悬停在图片上时显示的提示信息 width和height 用于设置图片宽度和高度，但是一般只设置其中一个，另一个则会根据设置等比例放大缩小，若两个都设置如果没有等比例缩小或放大则图片会扭曲。 border 设置图像的边框粗细
2.5.2 音频标签
音频标签
- 单标签或双标签