资讯详情

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

文章目录

  • 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指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。

  • HTML不是一种编程语言，而是一种标记语言。

  • 标记语言是一套标记标签。

  • 可以加入图片、声音、动画、多媒体等内容，超越了文本限制。

  • 它还可以从一个文件跳转到另外一个文件，与世界各地主机的文件连接（超级链接文本）。

​ 网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给客户的。

Web标准主要包括结构、标签和行为三个方面。

标准 说明
结构 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现 表现用于设置网页元素的板式、颜色、大小等外观样式，主要指的是CSS
行为 行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript

2.2 HTML基本页面

  • HTML标签是由尖括号包围的关键词，例如<html>。
  • HTML标签通常是成对出现的，例如<html>和</html>我们称其为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
  • 有些特殊的标签必须是单个标签，例如<br/>，我们称为单标签。
  • 标签中是可以指定内容的属性的，写法采用键值对方式key = “value”。属性包含了元素的额外信息。其中值的引号可写可不写，但是习惯上大家还是会写上。
  • 有的元素可以同时存在多个属性，属性之间以空格的方式隔开，标签名与属性之间也是，属性之间是无序的。

双标签关系可以分为两类：包含关系和并列关系。

：<!-- 注释内容 -->

：如果是使用VScode，那么你只需要选中注释内容，然后ctrl+/。

每个网页都会有一个基本结构标签，我们称之为骨架标签。页面的内容也是在这些基本标签上书写。

标签名 定义 说明
<html></html> HTML标签 页面中最大的标签，我们称为根标签
<head></head>> 文档的头部 注意在head标签中我们必须要设置的标签是title
<title></title> 文档的标题 让页面拥有一个属于自己的网页标题
<body></body> 文档的主体 元素包含文档的所有内容，页面内容基本上是放到body里面的
其余符号 作用
<!DOCTYPE html> 表明HTML网页版本
lang(意味language) 定义当前文档显示的语言，一般是en(English)或者zh-CN(中文)，除此之外还有fr(法语)等。
charset(Character Set,字符集) 多个字符的集合，以便计算机能够识别和存储各种文字，在head标签内可以使用<meta>标签的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>Document</title>
</head>
<body>
</body>
</html>

：

  • 如果需要在VSCode中直接生成骨架，只需要输入!或html:5并且回车即可生成。
  • 对于文档显示来说，定义为en的文档也可以显示中文，定义为zh-ch的文档也可以显示英文。但是如果定义为en英文网站，则浏览器中的翻译插件会在检测到英文后自动翻译。
  • 一般情况下，使用!快捷生成的骨架如有需要可以修改lang，但是其他建议不要动，否则容易引起乱码。

<!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></h1>，其中可选h1到h6。意为最多支持六级标题
双标签<p>文字内容</p>，其中段落文字写于标签之中
单标签<br/>或</br>，意为重新开始一行
单标签<hr>，意为生成一条水平线，常用于分割不同主题内容

2.3.2 文本格式化标签

可以给特定的文字施加各种效果。

标签 说明
b 加粗
label 加粗
u 下划线
ins 下划线
i 倾斜
em 倾斜
s 删除线
del 删除线

2.4 语义标签

2.4.1 无语义标签

双标签<div>文字内容</div>，div标签相当于一个盒子，可用于存放多个内容，多次声明div标签可创造不同的盒子且位于不同行。

双标签<span>文字内容</span>，span相当于一个大区域，当使用span时，不管你使用几次标签，填写的内容都会被放到同一块区域中且位于同一行。

<!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>Document</title>
</head>
<body>
    <div>普通文字</div>
    <div>普通文字</div>
    <span>普通文字1</span>
    <span>普通文字1</span>
</body>
</html>

2.4.2 语义标签

​ 在HTML5新版本中，推出了一些有语义的布局标签供开发者使用。这些标签多用于手机端网页开发。

标签名 语义
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
aticle 网页内容
mian 文档主要内容

2.5 多媒体标签

2.5.1 图像标签

  • 单标签<img src = “图像URL”>，单词img为image缩写。
  • src是img标签的必须属性，它用于指定图像文件的路径和文件名。

属性 说明
alt = “” 当图片加载失败时，显示alt指定的文本
title = “” 当鼠标悬停在图片上时显示的提示信息
width和height 用于设置图片宽度和高度，但是一般只设置其中一个，另一个则会根据设置等比例放大缩小，若两个都设置如果没有等比例缩小或放大则图片会扭曲。
border 设置图像的边框粗细

2.5.2 音频标签

  • 单标签或双标签<audio src = "”>，用于生成一个播放音乐的控件。
  • 双标签<audio><source src=“” type = “”></audio>，source为单标签，在音频中可以指定多个source，不同的source中存放的是不同格式的同个音频，这样方便浏览器选择可用的播放源。

属性名 功能
src 音频路径
controls 显示播放控件
autoplay 自动播放（部分浏览器不支持）
loop 循环播放

：音频标签目前只支持三种格式：MP3、Wav、Ogg。

2.5.3 视频标签

  • 将音频标签的audio改为video即可。

  • 使用embed也可以直接插入视频文件，它的本质是调用本机上已经安装的文件，具有兼容性。

  • 可以使用flash，但是会增加使用成本，且该方法已经被淘汰。

属性名 功能名
src 音频路径
controls 显示播放控件
autoplay 自动播放（谷歌浏览器要自动播放需要加上muted）
loop 循环播放
width 组件宽度
height 组件高度
poster 还未播放前视频的封面，默认是视频的第一帧，可指定路径
preload auto或none，规定是否预先加载视频，如果有了autoplay，就忽略该属性
muted 静音播放

：

  • 视频标签目前只支持三种格式：MP4、WebM、Ogg。

  • 当设置视频宽高时，HTML5为了保持原视频比例，设置的宽高中只会生效一个参数。故平时设置视频组件时只会设置宽高中的其中一个参数。

2.6 超链接

​ 双标签<a href = “目标网页”>超链接名字</a>，其中a为anchor(锚)的缩写，故又名a标签或锚链接，可用于一个页面跳转到另外一个页面的场景。

​ 由a标签组成的，里面的href属性可以设置超链接的引用，类似于src，所以说，如果需要a标签点击之后去指定页面，需要设置a标签的href属性。

target属性用于决定打开网页的方式。

取值 效果
_self 默认值，在当前窗口中跳转
_blank 在新窗口中跳转（保留原网页）

  • ：<a href = “http://www.baidu.com”>百度</a>

  • ：<a href =“index.html”>首页</a>

  • ：<a href =#>首页</a>

  • ：如果href的地址是一个文件或者压缩包，点击则会下载这个文件

  • ：在网页中的各种元素，如文本、图像、表格、音频、视频都可以添加超链接

  • ：在a标签的href属性中设置属性值为#id值，然后在目标位置标签添加id属性，并设置id值即可

2.7 列表标签

无序列表的作用是在网页中表示一组无顺序之分的列表，如：新闻列表。

标签名 说明
ul(Unordered list) 表示无序列表的整体，用于包裹li标签
li(list) 表示无序列表的每一项，用于包含每一行的内容

有序列表的作用是在网页中表示一组有顺序之分的列表，如：排行榜。

标签名 说明
ol(Ordered list) 表示有序列表的整体，用于包裹li标签
li 表示有序列表的每一项，用于包含每一行的内容

：ol标签中只允许包含li标签，而li标签可以包含任意内容。

自定义列表在网页的底部导航中常用。如：

签名 说明
dl 表示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的标题
dd 表示自定义列表的针对主题的每一项内容

：dl标签中只允许包含dt/dd标签，而dt/dd标签可以包含任意内容。

2.8表格标签

用于显示、展示数据，其能够让数据显示的非常规整，可读性好。表格在网页中以行+列的单元格的方式整齐展示数据，如：学生成绩表。

标签名 说明
table 表格整体，可用于包裹多个tr
tr(table row) 表格每行，可用于包裹td
td(table data) 单元格内容

属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度

注：实际开发中我们只会去用HTML做大概内容，而美化方面都是交给CSS。

表格标题指的是表格中用于显示整张表格的标题，而表头单元格标签指的是每列的表头标题。

标签名 名称 说明
caption 表格大标题 写于table标签内部。表示表格整体大标题，默认在表格整体顶部居中位置显示
th(table header) 表头单元格 写于tr标签内部。表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

表格的结构标签可以让表格的内容结构更加清晰，其用于突出表格的不同部分（头部、主体、底部）。

标签名 名称
thead 表格头部
tbody 表格主体
tfoot 表格底部

合并单元格分为跨行合并和跨列合并。

属性名 属性值 说明
rowspan 合并单元格的个数 跨行合并
colspan 合并单元格的个数 跨列合并

：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并。

<!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>Document</title>
</head>
<body>
    <table border="2" cellspacing="0" cellpadding="">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>100分</td>
                <td>成绩不错</td>
            </tr>
        <tbody>
        <tfoot>
            <tr>
                <th>总结</th>
                <th colspan="3">品质兼优 德才兼备</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

2.9 表单标签

2.9.1 表单标签汇总

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<label> 绑定内容和表单标签的关系
<textarea> 定义文本域 (一个多行的输入控件)
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> 和select下拉菜单标签类似，搭配text文本框可以输入文字
<keygen> 密钥对生成器
<output> 用于放置输出内容 

<!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>Document</title>
</head>
<body>
    <h1>账号注册</h1>
    <br>
    <form action = "">
        <form action="">
            <!-- 文本框 -->
            账号：<input  type="text" placeholder="邮箱/手机号码/ID">
            <br>

            <!-- 密码框 -->
            密码：<input type = "password" placeholder="密码">
            <br>

            <input type="reset" value="重置按钮">
        </form>

        

        <!-- 单选框+label标签 -->
        <input type="radio" name = "sex" id = "nan"><label for="nan">男</label>
        <input type="radio" name = "sex" id = "nv"><label for="nv">女</label>
        <br>

        <!-- 下拉菜单 -->
        所在地：<select>
            <option>意大利</option>
            <option>美国</option>
            <option selected>中国</option>
        </select>
        <br>

        <!-- 多选框 -->
        是否单身：<input type = checkbox>

        <!-- 提交按钮 -->
        <input type = submit value = "注册账号">
    </form>
    <br>

    <!-- 文件选择框 -->
    提交头像：<input type = file multiple>
    <br>

    <!-- 文本域 -->
    <Textarea cols = 12 rows = 3></Textarea>
    <br>

    <!-- 普通按钮 -->
    <input type = button value = "测试按钮1">
    
    <!-- 按钮标签 -->
    <button type = button>测试按钮2</button>

    <form action="" method="post">
        <fieldset>
            <legend>请选择你的爱好：</legend>
    
            <select name="myhobby" id="myhobby">
                <optgroup label="运动">
                    <option value="羽毛球">篮球</option>
                    <option value="乒乓球">足球</option>
                </optgroup>
                <optgroup label="娱乐">
                    <option value="看电影">看电影</option>
                    <option value="看小说">看电视</option>
                </optgroup>
            </select>
        </fieldset>
    </form>

    <form action="" method="post">
        <input list="browsers">
        <datalist id="browsers">
            <option value="Internet Explorer">
            <option value="Firefox">
            <option value="Chrome">
            <option value="Opera">
            <option value="Safari">
        </datalist>
    </form>
</body>
</html>

2.9.2 input标签

input属于单向标签，其必须指定属性type使其具有不同的功能。

type属性值 说明
text 文本框
password 密码框
radio 单选框
checkbox 多选框
file 文件选择
submit 提交按钮，点击之后提交数据给后台服务器
reset 重置按钮，点击之后恢复表单默认值
button 普通按钮，默认无功能，配合js可以添加功能
email 邮箱框，提供了邮箱格式的完整验证
tel 电话框，可以在移动端提供数字键盘
url 网址框，提供合法网址的输入
number 数量框，提供单位数量控制以及控制数字输入
search 查找框，可以清空输入框的内容
range 滑动条，可用于调解音量
time 时间选择框，支持时分秒
date 日期选择框，支持年月日
datetime 只有safari和edge支持，等价于datetime-local
datetime-local 日期选择框，支持年月日时分秒
month 设置月份
week 设置周

对于以上的按钮，如果在没有添加预标签form的情况下，是无法实现其功能的，如果想要使功能和对应的组件相结合，就需要把实现功能的组件和该按钮放在同一个地方，用form括起来即可。

附加属性 说明
value 用于指定按钮上的文字，submit和reset按钮默认有文字；指定数量框的默认值；指定滑动条的默认值
multiple 用于一次性上传多个文件
placeholder 文本框中出现提示内容
name 用于单选框和多选框分组，同个组中只能有一个选项被选中
checked 用于单选框和多选框，指定默认选中的选项
autocomplete 用于任何类型文本框，提示已经提交过的数据，只有两个值on或off
max 指定数量框的最大值；指定滑动条的最大值
min 指定数量框的最小值；指定滑动条的最小值
autocomplete 用于任何类型文本框，自动获取焦点
required 用于文本框，指定该文本框必须输入，否则无法提交
pattern 用于文本框，可用正则表达式限定文本框输入内容

：autocomplete需要两个要求才能生效，一是必须提交过，二是该input标签必须带有name属性。

2.9.3 按钮标签

双标签 <button type = “”>按钮文本</button>。

标签名 type属性值 说明
button submit 提交按钮，点击之后提交数据给后台服务器
button reset 重置

标签： 5w200kr碳膜电阻th矩形电连接器

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

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