锐单电子商城 ， 一站式电子元器件采购平台！

  • 电话：400-990-0325

购物车

一幅长文细学HTML5和CSS3——一幅长文系列

时间：2023-01-26 22:00:00 5w200kr碳膜电阻th矩形电连接器

文章目录

  • 1 前言
  • 2 HTML5
    • 2.1 HTML简介
    • 2.2 HTML基本页面
    • 2.3 文本标签
      • 2.3.1 排版标签
      • 2.3.2 格式化文本标签
    • 2.4 语义标签
      • 2.4.1 无语义标签
      • 2.4.2 语义标签
    • 2.5 多媒体标签
      • 2.5.1 图像标签
      • 2.5.2 音频标签
      • 2.5.3 视频标签
    • 2.6 超链接
    • 2.7 列表标签
    • 2.8表格标签
    • 2.9 表单标签
      • 2.9.1 汇总表格标签
      • 2.9.2 input标签
      • 2.9.3 按钮标签
      • 2.9.4 下拉菜单标签
      • 2.9.5 文本域标签
      • 2.9.6 label标签
      • 2.9.7 datalist标签
      • 2.9.8 keygen（了解）
      • 2.9.9 output（了解）
    • 2.10 框架标签
    • 2.11 头部标签
    • 2.12 字符实体
    • 2.13 Emmet语法
    • 2.14 进度条标签
    • 2.15 HTML设置背景(扩展)
    • 2.16 案例
  • 3 CSS3
    • 3.1 CSS写法
    • 3.2 基础选择器
    • 3.3 字体
      • 3.3.1 字体属性分类
      • 3.3.2 通用族字体风格
      • 3.3.3 字体优先级
      • 3.3.4 font复合属性
    • 3.4 文本样式
    • 3.5 补充知识
      • 3.5.1 颜色取值
      • 3.5.2 水平居中
    • 3.6 CSS复合选择器
      • 3.6.1 复合选择器简介
      • 3.6.2 后代选择器
      • 3.6.3 子选择器
      • 3.6.4 并集选择器
      • 3.6.5 伪类选择器
    • 3.7 CSS元素显示模式
      • 3.7.1 显示模式简介
      • 3.7.2 块元素
      • 3.7.3 行内元素
      • 3.7.4 行内块元素
      • 3.7.5 总结
      • 3.7.6 元素显示模式转换
    • 3.8 CSS背景
      • 3.8.1 背景的设置
      • 3.8.2 设置背景方位
      • 3.8.3 背景附着
      • 3.8.4 背景复合写法
      • 3.8.5 透明度
      • 3.8.6 背景总结
    • 3.9 CSS三大特性
      • 3.9.1 层叠性
      • 3.9.2 继承性
      • 3.9.3 优先级
    • 3.10 盒子模型
      • 3.10.1 盒模型概述
      • 3.10.2 边框
      • 3.10.3 内边距
      • 3.10.4 外边距
      • 3.10.5 圆角边框
      • 3.10.6 盒子阴影
    • 3.11 浮动
      • 3.11.1 浮动概述
      • 3.11.2 浮动脱标
      • 3.11.3 行显示
      • 3.11.4 浮动元素具有行内块的特性
      • 3.11.5 网页布局常见
      • 3.11.6 发人深省的问题
      • 3.11.7 清除浮动
    • 3.12 常见的图片格式
    • 3.13 一些注意事项
      • 3.13.1 CSS属性书写顺序问题
      • 3.13.2 页面布局的整体思路
    • 3.14 定位
      • 3.13.1 定位概述
      • 3.13.2 五种定位模式
      • 3.13.3 子绝父相
      • 3.13.4 定位算法
      • 3.13.5 定位拓展
    • 3.15 阶段性总结
    • 3.16 元素的显示和隐藏
      • 3.16.1 display
      • 3.16.2 visibility
      • 3.16.3 overflow
    • 3.17 精灵图
      • 3.17.1 精灵图概述
      • 3.17.2 使用精灵图
    • 3.18 字体图标
    • 3.19 CSS三角
    • 3.20 CSS用于界面样式
      • 3.20.1 鼠标样式
      • 3.20.2 表单样式
      • 3.20.3 行内(块)元素对齐
      • 3.20.4 省略号溢出文字显示
    • 3.21 常用的布局技巧
    • 3.22 CSS初始化
    • 3.23 CSS3新特性
      • 3.23.1 属性选择器
      • 3.23.2 假结构选择器
      • 3.23.3 伪元素选择器
      • 3.23.4 盒子模型
      • 3.23.5 滤镜
      • 3.23.6 计算
      • 3.23.7 过渡
      • 3.23.8 2D转换
      • 3.23.9 动画
  • 4 服务器部署
    • 4.1 Web服务器
    • 4.2 远程服务器
    • 4.3 免费服务器
  • 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>

注：

  • 如果需要在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>

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>

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 音频标签

音频标签