HTML基础

前端开发介绍

前端开发是什么：

前端开发是创建WEB页面或者app等前端界面呈现给用户的过程
核心技术：HTML、CSS、JavaScript以及衍生出的各种技术、框架等

前端开发应用场景：

PC、移动APP、微信小程序、游戏、服务端编程 .....

学习路线

学前认识：计算机基础知识、应用的概念、前端与后端

入门阶段：

HTML：HTML语法、语义化、SEO基础
CSS：语法、页面布局、媒体查询、CSS3

JavaScript进阶：语法、基础数据结构、Web APIs、ES6+、模块化、TypeScript

包管理工具：npm、yarn

CSS进阶：

CSS预处理器：SASS、LESS、PostCSS ...
CSS框架：Bootstrap、tabler、Semantic UI、Materialize CSS ...
CSS架构规范：OOCSS、BEM、SMACSS

构建工具：

代码校验工具：ESLint、StyleLint、MarkdownLint
模块打包工具：Webpack、Paecel、Rollup
任务运行器：npm script、Markfile、Gulp、Grunt、Broccoli

流行框架：

VUE.js：VueX、ElementUI
React.js：Redux、AntDesign、Mobx、CSS in js
Angular：RxJS、ngrx

持续学习：Node.js、渐进式Web应用、服务端渲染、静态站点生成器、桌面应用、移动应用 ...

HTML概述

HTML就是用来制作网页文件的
浏览器查看网页都是.html或者.htm文件
HTML叫做超文本标记语言（Hypertext Markup Language），用于搭建网页的结构

网页的组成

前端三层：HTML（结构层）、CSS（样式层）、Javasprict（行为层）
其他多媒体内容：图片、视频、音频、超级链接等

所有的网页文件都是真实的、物理存在的文件

互联网原理

互联网的运行过程

程序员将网页源文件上传到服务器进行存储，用户后期通过客户端（如浏览器）发送HTTP请求到服务器，服务器接受请求后进行响应，将存储的相关文件通过HTTP响应传回本地客户端，最终客户端讲文件进行渲染，显示出最终用户看到的页面效果

服务器（server）

一种特殊的计算机，也包括处理器、硬盘、内存、系统总线等，但是由于需要提供可靠的服务，因此在处理能力、稳定性、可靠性、安全性等方面要求较高

作用：

对于WEB来说，用于存储开发人员上传的网页数据，且需要响应服务请求，并进行处理

要求：

对于网站服务来讲，为了让用户随时进行访问，必须24小时不间断工作

云服务器（Elastic Compute Service，ECS）

目前绝大多数网站使用的都是云服务器，云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务，其管理方式比物理服务器更加高效，用户无需提前购买硬件，即可迅速创建或者释放任意多台云服务器

客户端（Client）

也叫用户端，指的是普通用户使用的终端，用户端有多种形式，比如最常见的浏览器、APP等，而WEB开发最主要使用的客户端就是浏览器

浏览器（Borwser）

一种用户上网搜索，直接查看信息资源的应用程序

功能

发送HTTP请求，发送方式通过浏览器在地址栏输入网址或者点击超链接
接收服务器HTTP响应，服务器会发回给一个HTML文件给浏览器
将浏览器接收到的HTML文件进行解析、展示

目前主流浏览器

微软IE\EDGE浏览器：Trident内核（IE内核）
Mozilla的Firefix（火狐）浏览器：Cecko内核（firfox内核）
苹果的Safari浏览器：webkit内核
Google的Chrome浏览器：前期使用的webkit后期转Blink内核（统称为chromium/chrome内核）
Opera的Opear浏览器：前期使用Presto转Webkit转Blink内核

推荐使用Chrome浏览器（渲染效果好、市场占有率高、自带开发者调试工具）

HTTP协议（Hypertext Transfer Prrotocol）

超文本传输协议，是客户端浏览器或者其他应用程序与web服务器之间的应用层通信协议

HTTP请求（request）

浏览器根据网址向对应的服务器发送请求

请求方法：

通过浏览器在地址栏输入网址或者点击超链接

HTML页面在解析过程中，会发出多个http请求，包含网页、图片、音视频等文件请求

HTTP响应（response）

服务器根据请求响应一个HTML文件，将HTML文件传输给客户端，在浏览器上进行HTML页面渲染

纯文本格式

就是没有任何文本修饰内容，例如没有任何粗体、下划线、斜体、图形，符号或者特殊字符及打印格式的文本，只保存文本，不保存其格式设置

纯文本格式

最常见的是.txt文件，在存储和传输过程中，只保存文字，不能保存格式

富文本格式

最常见.rtf文件，类似.doc文件，内部可以保存文本的样式、图片等

纯文本特点

只能保存文本，不能保存其他格式或者非文本内容，有利于网络传输
所有的纯文本格式文件，可以通过直接更改扩展名的方式更改保存格式
纯文本格式文件可以使用任意纯文本编辑器进行查看和编辑

HTML、CSS、JS文件都是纯文本文件

HTML概念

HTML（Hypertext Markup Language）：超文本标记语言，是用来制作网页的一种标记语言。

HTML是一种纯文本文件格式，不能添加图片、音视频等，但是在网页中给用户呈现的效果却包含了文字以外的内容，这种效果就就是HTML语言区别其他文本的不同之处

超文本

简单来说超文本就是用于链接另一个文本或者多媒体内容的文本，比如链接到图片、链接、音视频、程序等

标记

又叫做标签（HTML tag），有特殊的书写规范，是给浏览器使用的一种语法格式，结合普通的文字信息，实现特定的语义或显示内容，在编辑器中可以编辑和查看，在浏览器中不显示

功能：利用标记给普通文本添加语义，描述超文本内容，搭建网页基础结构

HTML语义化

HTML文件中，如果没有使用特殊语义标记，也可实现网页显示效果，但是利用标记给普通文字添加了不同的语义，能让网站结构划分更加清晰

语义化网页优势：

方便代码阅读和后期维护
便于浏览器和爬虫更好的解析网站内容
使用语义化标签有利于ESO搜索引擎优化，提高网站的搜索排名

HTML基本语法

HTML规范版本

W3C：万维网联盟，专门发布和维护互联网的标准和规范，HTML也在其中

1997年HTML4.0之后实现了样式结构分离
2008年HTML5，HTML在2012年形成了稳定版本

HTML标签

所有标签名书写在<>内部

<html>内容</html>

标签分为单标签、双标签，双标签必须成对出现

<p>双标签</p>  
<br />   <!--单标签-->

双标签包含开始、结束标签，结束标签必须书写关闭标签符号/，单标签也需要进行自封闭书写，在HTML5中，单标签可以不写关闭符号

<!--错误写法-->
<div><div>
<br>
<!--正确写法-->
<div></div>
<br />

HTML基本语法

html元素

从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签

元素内容

内容可以是文本、也可以包含其他元素，包含其他元素的情况叫做嵌套,单标签不能嵌套，称之为空元素

<!--div中嵌套了h1和p元素-->
<div>
  <h1></h1>
  <p></p>
<div>

标签级别

根据标签内部可以存放的元素内容不同，可以把双标签分为两个级别

容器级标签：标签内部可以存放任意内容，包括容器标签。比如h1、div等
文本级标签：标签内部只能存放文字或者类似文字的内容，不能存放其他内容，比如p等

HTML元素的特性

元素与元素间对空格、换行、缩进形成的空白不敏感，可以利用这个特性对代码进行格式化，有利于提高阅读星
空白折叠现象：元素内部内容之间存在空格、换行、缩进形成的空白折叠现象，会被压缩成一个空格的效果

HTML属性书写规范

要写在开始标签、单标签内部，书写要使用空格隔开
属性包括属性名（key）、属性值（value），例如key="value"，要使用双引号包裹属性值
一个标签可以有不同属性，不同属性之间要使用空格分割开
标签属性如果有多个属性值，把所有值写在一个双引号内就可以了，值与值之间使用空格隔开

编辑器

微软VScode编辑器推荐插件

Chinese Language 中文汉化包
auto Rename Tag 自动闭合尾部标签及同步修改
open in broeser 右键在默认浏览器打开网页
Mithril Emmet 快速编写工具（已经集成，无需安装）
Live Server 快速创建本地服务器，修改内容实时更新

常用快捷键

！+ tab 快速构建HTML骨架
p*6 快速生成6个p标签
h$*6 快速生成h1 - h6
cmd+shift+k 快速删除行
cmd+shift+d 快速复制行
cmd+shift+上 /下快速移动行
鼠标滚轮按住选择输入相同内容
cmd+z 撤销操作
cmd+enter 快速换行

HTML基本结构

基本骨架

<!--下面是使用VScode快速创建的空白网页-->

<!DOCTYPE html>  <!--DTD，文档声明类型-->
<html lang="en">  <!--命名空间、语言-->
<head>  <!--HTML文档头部-->
    <meta charset="UTF-8">  <!--我是字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>  <!--网页标题-->
</head>
<body>    <!--网页主体-->
    网页的主体内容
</body>
</html>

html标签

定义HTML文件的根元素

表示整个HTML文档，所有标签都要写在<html>标签内部

head标签

HTML头部

存放<title>、<meta>、<base>、<style>、<script>、<link>等，内部用于对网页的配置，除了<title>内部的文字，其他标签都不显示在浏览器上，<title>标签是必须设置的

title标签

网页标题

title关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化，内部的内容会显示在搜索结果的标题部分，可以作为浏览器收藏夹收藏的默认标题，建议内容精简

body标签

HTML的主体部分

存放所有HTML显示内容，body内容显示在浏览器窗口中

DTD

出现在整个HTML文件的第一行，文档声明类型

告诉浏览器使用哪个版本HTML规范，让浏览器按照对应版本进行解析

命名空间

规范规定了在不同用户浏览器中标签语义遵循的统一标准，避免出现标签名冲突。HTML5自动化遵循了，不需要书写

语言

lang="en/zh-cn"

表示所有标签元素内容的语言，对搜索引擎和浏览器是有帮助的

字符集

在<head>标签内部的<meta>标签，定义当前网页所使用的字符编码

UTF-8（国际通用字库）包含了人类所有语言，中文一个字符3个子节大小
gbk（中国国标字库）是gb2312的扩展，增加了繁体字，一个汉字2个字节大小

使用建议：

如果没有加载速度的要求或者外文网站，推荐使用UTF-8，如果网页含有大量中文汉字，而且要求网页加载速度快，建议使用gbk

注意：

meta声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载出现乱码

HTML常用标签

注释

浏览器中不显示，只能在源代码中查看，vscode快捷键cmd+/

<!-- 注释内容 -->

作用：

添加一些描述性信息，提高可读性
HTML中究错，可以有利于检索错误代码，方便调试
暂时注释掉一些有用的代码，使代码暂时失效，后期可以随时恢复代码

标题

分为h1到h6标签，共六个，代表6级标题

<!--使用h$*6快速创建-->
<h1>标题内容</h1>
<h2>标题内容</h2>
<h3>标题内容</h3>
<h4>标题内容</h4>
<h5>标题内容</h5>
<h6>标题内容</h6>

注意事项：

标题标签不允许嵌套标题标签，所有标题同级别
h1标题权重最高，h6最低
h1一般放最重要的内容，比如LOGO
由于h1非常重要，内部文字对搜索引擎SEO优化有作用，为了为防止作弊，一个页面出现多个h1反而会使权重降低，所以约定俗成一个页面只能出现一个h1

段落 `p`

双标签，文本级标签，内部只能放置文本、图片、表单元素，或者废弃的font标签等

p标签内部添加一个完整段落的语义，不负责内容自动换行的样式（不会自动换行），换行效果由CSS决定

<p>我是段落</p>

换行标签 `br`

单标签，在需要换行的位置可以使用，与p标签不一样，br没有新建段落的语义，只是简单的强制换行

<p>准备，我要<br />我要换行了</p>

文本格式化标签

都是双标钱、文本级标签，只能书写文字，对HTML中文字样式进行设置，比如粗体、斜体等等

由于4.0版本之后结构与样式分离，所以目前文本格式化标签基本都废弃了

<!--可能会用到的标签-->
<b>粗体</b>
<i>斜体</i>
<u>下划线</u>
<sub>下标</sub>
<sup>上标</sup> 
<del>删除线</del>
<ins>类似U下划线</ins>
<!--甚至可以组合使用-->
<b><u><i>加粗斜体下划线</i></u></b>

图像 `img`

单标签，在指定位置插入一张想要的图片，本身相当于一个特殊的文本

<img src="路径" width="宽度" height="高度" title="名字" border="边框" alt="替换文本" />

属性

属性名	描述
src	图片路径（绝对路径或相对路径）必须有！！！
width	图片宽度
height	图片高度
border	边框属性，可以设置边框厚度
title	提示文本（鼠标悬停时提示文本）
alt	图像加载失败时的替换文本建议添加！！！

路径：寻找文件是所经历的路线

<!--相对路径：从本身出发，根据自身位置查找-->
<!-- 同级查找 -->
<img src="文件名.扩展名" />
<!-- 子级查找 -->
<img src="文件夹/文件夹/文件名.扩展名" />
<!-- 上级查找  ../代表向上跳出一级   ../../代表向上跳出两级 -->
<img src="../../文件名.扩展名" />

<!--绝对路径-->
<!--本地图片       ！！！不推荐使用-->
<img src="C:/Users/teacher/Documents/文件名.扩展名" />
<!--网络图片-->
<img src="图片网络地址" />

注意事项：

宽度（width）和高度（height）当只设置一个值时，另一个值会等比例缩放
边框（border）直接设置数值就可以了，不需要px

音频 `audio`

双标签，和图片一样，也许要使用src设置音频查找路径（mp3、ogg、wav）

<!--controls：控制是否显示音频控制条-->
<audio src="路径" controls="controls"></audio>

视频 `video`

双标签，和音频类似，使用src查找视频路径（mp4、ogg、webm）

<!--controls：控制是否显示音频控制条-->
<video src="路径" controls="controls"></video>

超链接 `a`

双标签，容器级标签，通常只放入文本或者图片

使用超级链接与另一个文档相连，超链接可以是一个字、词、一组词、图像等等，可以点击跳转到新文档或者当前文档的某个部位

<!--属性
href：超文本引用，相对路径或者绝对路径
target:页面打开方式（建议使用新标签页打开）
title:鼠标悬停显示内容
-->

<!--普通页面跳转-->
<a href="https://www.baidu.com" target="_blank" title="百度">显示的文字</a>

<!--页内锚点跳转-->
<!--
设置锚点-设置跳转目标位置，两种方式
1、在需要跳转的位置给一个id属性值
2、在需要跳转的位置添加一个a标签，a标签属性为name=""
-->
<标签名 id="唯一值">已经存在标签</标签名>
<a name="唯一值"></a>
<!--跳转-->
<a href="#唯一值">点击跳转</a>

<!--跨页内锚点跳转-->
<!--设置锚点和之前一样，链接进行拼接-->
<a href="跳转页面#唯一值">点击跳转</a>

列表

用于制作HTML中的一系列项目，通常我们将内容相关、结构相似、样式相近的内容使用列表结构进行搭建

根据项目内容不同，有三种语义列表结构：有序列表、无序列表、定义列表

无序列表 `ul>li`

ul：定义的无序列表的大结构

li：列表项，定义的是无序列表内的某一项

<!--多层嵌套-->
<ul>    
    <li>
      <p>内容</pp
      <ul>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
      </ul>
    </li>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
  </ul>

注意事项：

ul内部只能只能嵌套li标签，li标签不能脱离ul单独存在
li标签是一个经典的容器标签，内部可以随意放置其他标签
无序列表项之间没有先后之分的，它们重要程度相同
无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式由CSS负责

有序列表 `ol>li`

ol：表示定义有序列表大结构

li：定义有序列表中的每一项，

<!--多层嵌套-->
<ol>
    <li>内容</li>
    <li>内容</li>
    <li>
      <p></p>
      <ol>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
      </ol>
    </li>
  </ol>

注意事项：

ol内部只能只能嵌套li标签，li标签不能脱ol单独书写
li标签是一个经典的容器标签，内部可以随意放置其他标签
有序列表列表项存在先后之分，根据内容顺序调整
有序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式由CSS负责

定义列表标签 `dl>dt/dd`

不仅仅是一列项目，而是项目及其注释的组合

dl：表示定义一个字定义列表大结构

dt：表示定义自定义列表中的一个主题或者术语

dd：定义解释项，表示描述或者解释前面的定义主题

<dl>
    <dt>主题1</dt>
    <dd>解释项1</dd>
    <dd>
      <p>内容</p>
      <p>内容</p>
    </dd>
  
    <dt>主题2</dt>
    <dd>解释项1</dd>
  
    <dt>主题3</dt>
    <dd>解释项1</dd>
  </dl>

注意事项：

dl内部只能嵌套dt和dd，dt和dd不能脱离dl独立存在
dl内部可以出现多组dt和dd，dd也可以存在多个，每个dd解释的都是离它最近的前面dt的内容
dt和dd都是容器标签，内部可以放置任意内容
列表的样式是由CSS负责的，标签只代表结构
配合CSS布局的效果，最好一个到dl只填加1个dt和dd，便于后期管理

布局标签 `div/span`

是常用的布局标签，称为盒子，没有明确意义

div标签

双标签，经典的容器标签，可以放任何内容，一般用于划分页面区域，进行结构性布局，一般用div将都一块内容包裹起来，整体布局

<div>
  可以放各种标签和内容
</div>

span标签

小盒子，双标签，容器级标签，在不改变整体效果的情况下，可以进行局部调整

<span>
  可以放置内容
<span>

表格基础 `table>tr>td/th`

table：表示整个表格大结构，属性border-collapse:collapse可以塌陷边框，使每个单元格变成单线

tr：表格的行

td：表格的单元格

th：表头单元格，在绘制时会替换td位置(有默认CSS样式)

<!--一个表格有多个行，一个行有很多个单元格，但要注意，最好每一行的列数都要相等，否则后续会出现问题-->
<table>
  <tr>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

合并单元格

针对于td和th，数值为数字，代表合并几个单元格

rowspan：跨行合并，上下单元格合并

colspan：跨列合并，左右单元格合并

<!--下面表格一共有三行两列，我们把第一行th合并，再把第二行第一列和第三行第一列合并-->
  <tr>
    <!--合并第一行-->
    <th colspan="2"></th>
  </tr>
  <tr>
    <!--合并第一列，顶边在第二行，所以在第二行操作-->
    <td rowspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <!--这里第一列直接留空-->
    <td></td>
  </tr>

制作技巧：

先完整创建表格，列出所有table、th、tr、td
划分单元格，把单元格和效果单元格个数一致，划分单元格的时候，顶边对齐的单元格为一行
分析跨行和跨列需求，属性值的值要参考跨行、列的个数

表格分区

四个分区可以根据市局需求选择性组合

caption：表格标题、内部书写标题文字，默认独占一行

thead：表格头部，内部嵌套th>td

tbody：表格主体部分，内部嵌套th>td

tfoot：表格页脚，内部嵌套th>td

<caption>表格标题</caption>
<!--表格头部-->
<thead>
  <tr>
    <td></td>
  </tr>
</thead>
<!--表格身体-->
<tbody>
  <tr>
    <td></td>
  </tr>
</tbody>
<!--表格页脚-->
<tfoot>
  <tr>
    <td></td>
  </tr>
</tfoot>

注意：无论这四个分区如何颠倒，浏览器渲染的时候都会按照caption>thead>tbody>tfoot的顺序进行渲染

制作技巧：

先书写大的分区结构，填充每一个分区的内容，如果有单元格合并进行合并操作

表单

用于收集用户的输入的信息，表单元素就是页面中提供用户输入、点击的小控件（标签）

完整的表单由表单域、提示信息、表单控件（元素）组成

表单域：相当于一个容器，容纳控件、提示信息等，可以定义处理表单元素的地址，以及数据提交到服务器的方法，如果没有表单域，那么数据就无法提交

提示信息：一些说明性文字，提示用户要进行那些操作

表单控件：包含具体功能项，包括输入框、复选框、按钮等等标签内容

表单域 `from`

功能性标签，双标签，容器级标签，填写的表单信息必须包裹在from标签内

属性名	属性值	描述
action	url（）	指定接收、处理表单数据的服务器地址
method	get、post	表单数据的提交方式
name	自定义名称	表单名称

<!--这是一个空表单-->
<from cation="data.php(地址)" method="提交方式" name="名字">
  提示信息和表单控件
</from>

表单元素

input标签

重要的表单元素，单标签，相当于特殊的文本只能通过标签属性来定制功能

属性名	属性值	描述
type	text	单行文本输入框
	password	密码输入框会做掩码的形式进行密码掩盖
	radio	单选框，一般成组出现，同一组必须互斥
	checkbox	复选框，可选多个或0个
	button	普通按钮，没有任何特殊功能
	reset	重置按针，清空for表单
	submit	提交按钮，将数据提交到指定地址并清空from信息，恢复默认
	image	图像形式的按钮，和提交按钮一样，多一个src属性
	file	定义输入字段和"浏览"按钮,供文件上传。
	hidden	定义隐藏的输入字段
name	自定义	定义控件的名称
value	自定义	定义控件的默认文本值
size	数字	定义控件的宽度
checked	checked	定义选框控件的默认被选中项
maxlength	数字	定义允许输入的最多字符数

<!--type属性值的不同决定了表现形式不同-->
<input type="text"  value="单行文本框" />

<input type="password"  value="密码框" />

<!--单选框设置相同的name可以实现单选效果  设置checked="checked"会默认选中目标-->
<input type="radio"  value="单选框" name="" checked="checked" />候选1
<input type="radio"  value="单选框" name="" />候选2

<!--复选框最好设置相同的name，便于分组  设置checked="checked"会默认选中目标-->
<input type="checkbox"  value="复选框" name="" checked="checked" />候选1
<input type="checkbox"  value="复选框" name="" checked="checked" />候选2
<input type="checkbox"  value="复选框" name="" />候选3
<input type="checkbox"  value="复选框" name="" />候选4

<input type="button"  value="普通按钮" />
<input type="reset"  value="清空按钮" />
<input type="submit"  value="提交按钮" />
<input type="image"  value="图片按钮" src="图片地址" />

<!--文件上传设置multiple="multiple"可多选文件-->
<input type="file"  value="上传文件" multiple="multiple" />

文本域 `textarea`

制作可输入多行文本的区域，双标签，是一个特殊的文字，在双标签中间直接添加默认显示文字

<!--
rows="数字"  表示这个文本域最多可现实几行文字，超过指定行数就会出现滚动条
cols="数字"  出现滚动条之后，每行所能容纳的最大字节数，一个汉字2字节
-->
<textarea rows="" cols="">默认显示文字<textarea>

下拉菜单 `select>optgroup>option`

在网页中提前设置好可以选择的项，都是双标签

select：下拉菜单的整体结构，默认选中第一项

option：下拉菜单中的每一项，可以有多个

optgroup：可以进行option分组管理

<!--
给option设置selected="selected"可以更改默认选中
给optgroup设置label="组名"可以更改组名
-->
<select>
  <optgroup label="组名">
    <option>待选1</option>
    <option selected="selected">待选2</option>
    <option>待选3</option>
    <option>待选4</option>
  </optgroup>
  <optgroup label="组名">
    <option>待选1</option>
    <option selected="selected">待选2</option>
    <option>待选3</option>
    <option>待选4</option>
  </optgroup>
</select>

label标签

双标签，帮表单元素定义标注，将表单控件与提示内容绑定后，用户就可以点击提示内容的时候自动选中相对应的表单元素

<!--方法1：使用ID属性
1、给表单元素设置id值
2、将需绑定的其他内容使用<label>标签包裹起来
3、<label>标签添加for="表单元素id值"
-->
<input type="radio" name="" id="固定值">
<label for="固定值">文本</label>

<!--方法2：直接包裹
如果表单元素和需要绑定的信息挨着，可以直接进行包裹
--> 
<label><input type="radio" name="" id="固定值">文本</label>

HTML字符实体

在书写普通文字内容时，有一些特殊符号不能直接书写（比如说连续的空格），html提供了代替字符

可以查询W3Cshool > 参考手册 > HTML ISO-8859-1，建议使用实体名称，也可以使用编号

一般写法：& + 内容 + ;

随堂测试错题

1、语义化的优势不包括可以让HTML文件拥有音频和视频

2、<p>标签的作用是给标签内部添加一个完整段落的语义，不可以实现首行缩进与自动换行

3、p标签内部不能放置音视频

CSS基础语法

CSS概述

产生背景

从HTML被发明开始，样式就以各种形式存在，最初的HTML只存在很少的显示属性，随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能，例如文本格式化标签（B、I、U）等，但随着这些功能的增加，HTML变得越来越复杂，而且HTML页面也越来越臃肿

发展过程

版本	说明
CSS1	1995 年12月,层叠样式表的第一份正式标准(Cascading style Sheets Level 1) 完成,成为w3c的推荐标准。
CSS2	1997 年初,W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。
CSS3	CSS3是CSS层叠样式表技术的升级版本于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

概念

CSS（cascading style sheets），层叠样式表，是一种表示HTML文本样式的计算机语言

作用：

静态的修饰网页，并且可以配合各种脚本语言动态的对网页各元素进行格式化
实现了网页结构和样式的分离

CSS的组成

层叠式：

CSS中贯穿始终的加载特性，包括层叠性、继承性

样式：

定义如何显示HTML元素，包括文字文本、背景、盒模型、浮动、定位、其他

CSS规则

CSS规则由两个主要部分组成：选择器、声明

/**
p为选择器
{}内为声明
**/
p {
  width: 20px;
  background: #ccc;
}

CSS书写方式

内联式
内嵌式
外联式
导入式

内联样式表

也叫行内式，直接写在HTML标签上的style属性中，所有CSS样式属性总体组成了标签的style的属性值

<!--**不需要写选择器，直接写属性值就可以**-->
<div style="width: 100px;heigth: 20px;color: #333">内容<div>

缺点：

必须写在标签之上，没有完全脱离HTML，没实现样式和结构分离
行内样式使HTML变得更复杂，不利于结构解读
一个行内样式只能给一个标签使用，无法复用，增加代码量

实际工作中一般不会写行内样式，不推荐使用

内嵌样式表

写在HTML文件head内的style标签中，style写在title标签后边，所有CSS代码写在style标签内部

style标签有一个属性type，属性值为"text/css"，在HTML5中可以省略不写

<body>
	.......
  <title>标题</title>
  <!--写在title后面-->
  <style type="text/css">
    p {
      width: 200px;
      height: 100px;
    }
    div {
      width: 200px;
      height: 100px;
		}
  </style>
</body>

优点：

实现了结构和样式的初步分离，CSS只负责样式，HTML只负责结构
多个标签可以共用代码，提高复用性

缺点：

结构样式没有完全分离，还是写在HTML内部
内嵌式css只能给当前HTML文件使用，不能给其它文件使用
html中内嵌css代码如果过多，不利于阅读、修改HTML结构的时候会很麻烦

外联样式表

也叫外链式CSS、外部CSS，写在一个单独的.css文件中，写法和内嵌是样式表一样，不需要写style标签

使用时只需要在HTML文件中的head标签中添加一个link标签即可

/**外部css文件内容**/
p {
  width: 200px;
  height: 100px;
}
div {
  width: 200px;
  height: 100px;
}

<!--HTML中引入CSS文件，在head中添加link标签
rel="styleheet"  表示引入文件和HTML的关系，样式表
href="css文件路径"  文件引入路径
type="text/css"   加载时按照纯文本形式加载CSS代码，HTML5可不写
-->
<head>
  ......
  <title>标题</title>
  <link rel="styleheet" href="css文件路径" type="text/css"></link>
</head>

优点：

实现了HTML和CSS完全分离
多个HTML可共用一个CSS文件，减少代码量
实现一个CSS变化同时更改多个HTML页面效果，减少代码量
一个HTML文件可引入多个CSS文件，可以实现一个页面的代码分层

导入样式表

可写在内嵌式CSS样式表内部或者外链式样式表中

@import url（路径）进行引入

<!--内嵌式导入-->
<style>
  @import url(路径);
</style>

/**在CSS文件中导入**/
@import url(路径);

缺点：

作用与外联式重复
在浏览器加载过程中，导入式CSS最后加载，如果网络很慢，可能会导致HTML的样式不能正常显示，给用户体验不太好

实际应用

在小型案例中，可以使用内嵌式CSS，以减少文件数量
实际工作、大型网站项目推荐使用外链式CSS
不推荐使用内联式和导入式CSS

CSS语法

组成：选择器 + { 声明 }，声明 =属性名：属性值

样式规则

所有CSS代码都要写在head的style标签内（内嵌式样式表为例）
添加样式之前，必须选中对应标签
css样式属性，属性名和属性值的键值对写法为 key：value；
给每一个选择器样式属性都要写在选择器大括号以内，可以添加多条

注意事项

每一条属性后面分号必须写，如果不写可能会影响后面代码的实现，最后一条属性值可以不写分号，但推荐还是要写
css属性与属性之间对空格、换行、缩进不敏感，对最后加载效果没有影响

CSS注释

写法：/* 注释内容 */，不会在页面显示

/*  注释内容  */

CSS代码书写风格

在开发过程中自己形成的书写方式，并非强制标准，但还是建议遵守

css样式格式：

展开格式：换行书写，对齐缩进，可以增强可读性，建议在开发过程中使用
紧凑格式：去掉所有无用空白字符，可以压缩文件体积，建议上传使用

英文大小写：

CSS不区分大小写，但是开发过程中建议使用小写，除非必须使用大写

空格规范：

在选择器与大括号之间加一个空格
属性值前面加一个空格

CSS常用属性

文字三属性

文本颜色（color）

给文字设置颜色

/* 颜色名 */
color: red；
/* rgb色值 */
color: rgb(189, 255, 255);
/* 16进制色值 */
color: #cccccc；

字体（font-family）

定义元素内部文字的字体，字体属性是font综合属性的一个单一属性，如果不设置浏览器会使用自己的默认字体

属性值必须包裹在一对引号内，属性值可以是多个，之间使用逗号隔开

常用字体：

中文：宋体（SimSun）、微软雅黑（Microsoft Yahei）
英文：Arial、consolas

font-family: "微软雅黑,Arial";

注意事项：

可以设置多个字体，在实际加载时只会选择一种字体进行加载，选择的顺序按照书写顺序进行选择，浏览器如果不支持第一个字体，继续向下找，直到找到支持的字体
浏览器加载的字体是电脑中自带的，供给我们软件使用，如果电脑里没有你设置的字体，则会加载失败，实际工作中最好使用大多数用户都有的字体，最后一个字体一定要添加一个通用字体作为退路
中文字体中一般都带有英文字体，一般情况下把英文字体写在中文字体前面，中文字体放在后面

实际应用中，字体根据设计稿确定，备用字体可以灵活设置

字号（font-size）

定义字体的大小，可以使用相对长度单位（px、em、%）或者绝对长度单位（in、cm、mm、pt）

font-size： 20px;

注意事项：

如果HTML中没有设置字号，那么不同浏览器会使用自己的默认字号大小（chorm浏览器16px）
浏览器都有自己最小加载字号，如果设置的字号比这个还要小，浏览器只会以最小字号加载，0除外（谷歌浏览器8px，ie中1px）

实际应用

网页中最小字号12px，如果低于12会有兼容性问题，现在普遍14px+
尽量使用偶数字号，老式浏览器奇数字号可能会出现兼容性问题
实际工作中根据设计图为准

盒子实体化三属性

属性名	属性值	说明
width	px单位的数值	定义元素宽度
height	px单位的数值	定义元素高度
background-color	颜色名、颜色值	定义元素背景颜色

/* 宽度200   高度300   背景色粉色 */
div {
  width: 200px;
  height: 300px;
  background-color: pink;
}

CSS选择器

除了行内CSS样式外，其他方式书写css我们都需要使用CSS选择器先选中元素才能进行样式的书写，否则就算书写了样式也无效

首选学习CSS2.1中的7种选择器：

基础选择器：标签选择器、id选择器、类选择器、通配符选择器
高级选择器：后代选择器、交集选择器、并集选择器

标签选择器

通过标签名选择标签元素，选中所有的HTML文件中所有同名的标签

书写方法：标签名 { }

/* 选中所有div标签 */
div {
  width: 200px;
  height: 300px;
  background-color: pink;
}
/* 选中所有p标签 */
p {
  color: red;
}

注意：标签选择器会选中HTML文件的所有同名标签，不管嵌套结构有多复杂

优点：会选中所有同名标签，可以设置公共样式

缺点：只能实现全选，不能局部更改样式

ID选择器

通过标签上的id属性来选择标签，只能选中一个同id名标签元素

书写方式：#id名{ }

<!--
id命名规则：
必须以字母开头，后面可以是字母、数字、下划线、横线，严格区分大小写
id名具有唯一性，id属性整个HTML文件只能存在一个
-->

<!--必须先设置一个id-->
<div id="id名"></div>

<!--id选择器-->
#id名 {
	color: red;  
}

注意：如果多个标签要设置相同的样式，还必须使用id选择器的话，只能给不同的标签设置不同的id名

缺点：只能选中一个元素

类（class）选择器

通过标签上的class属性选择标签，可以选中所有同class名的标签元素

书写方式：.类名 { }

<!--
class命名规则：
必须以字母开头，后面可以是字母、数字、下划线、横线，严格区分大小写
class名没有唯一性，可以多个标签元素设置相同的class类名
-->

<!--必须先设置一个class-->
<div class="class名"></div>
<p class="class名 class名2"></p>


<!--类（class）选择器-->
.class类名 {
	color: red;  
}
.class类名2 {
	width： 200px；
}

特点：

多个不同类型标签，只要class类名相同，就可以使用同一个类选择器设置样式
一个class属性可以有多个类名，设置时属性值通过空格隔开，每个属性值都可以单独作为一个选择器，都可以单独设置样式，可实现多个选择器选中一个标签

特殊应用：原子类

可以在CSS中提前书写好一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中经常使用，后期不需要再次书写，直接把对应类名添加到标签class属性值中就可以了

/* 提前在CSS中设置好一些原子类 */
.fs12 {
  font-size: 12px;
}
.fs30 {
  font-size: 30px;
}
.cr {
  color: red;
}

<!--在HTML标签上直接添加类名即可实现对应效果-->
<div class="fs12 cr"></div>
<p class="fs30"></p>

类（class）选择器优点：

通过一个类名可以多选标签，添加公共样式
一个标签元素可以被多个选择器选中，可以实现样式分离，可以提取公共样式和私有样式，节省代码量

实际工作中推荐：

类上样式（css），尽量使用类选择器添加样式

id上行为（js），使用id选择器进行js行为编程

通配符选择器

通过一个特殊符号，选择页面上所有标签元素（包括html标签）

书写方式：* { }

/* 通配符选择器 */
* {
  color: red;
}

优点：可实现全选，简化书写工作

缺点：选中了所有标签，工作量比较大，效率比较低，会影响加载速度，会让一些不需要重新设置的样式再次加载一次，可能会做一些无用工作

注意：

实际上线的网站不允许使用*{}去清除默认内外边距
普通案例（项目）的话可以使用，节省代码量

后代选择器

通过标签之间存在的嵌套关系选择元素，由基础选择器组成，也叫做包含选择器

书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前是空格后面元素的祖先级元素

<!-- 标准嵌套关系 -->
<div class="box">
  <ul>
    <li>
      <p>内容1</p>
    </li>
    <li>
      <p>内容2</p>
    </li>
  </ul>
  <p>内容3</p>
</div>

/* 后代选择器可以缩小范围，甚至可以一步一步缩小范围 */

/* 选中所有div下的所有p元素 */
div p {
  color: red;
}
/* 选中类名为box下的所有ul下的所有li下的所有p元素，不一定非要父子关系,下面这两个和上面效果相同 */
.box ul li p {
  color: red;
}
.box p {
  color: red;
}

注意事项：必须满足所有后代关系才能被选中，后代关系不一定只能是父子关系

优点：减少class类名的定义使用，选择效率更高效

交集选择器

选择所有满足所以交集条件的标签元素

书写方式：基础选择器连续书写，如果有标签选择器参与交集，必须书写在开头

<!-- 标准嵌套关系 -->
<div class="box1">
  <ul>
    <li><p class="demo">内容1</p></li>
    <li><p class="demo ps">内容2</p></li>
  </ul>
  <p>内容3</p>
</div>
<div class="box2">
  <ul>
    <li><p class="demo">内容1</p></li>
    <li><p class="demo ps">内容2</p></li>
  </ul>
  <p>内容3</p>
</div>

/* 所有p标签并带有demo类名的元素 */
p.demo {
  color: red;
}
/* 和后代选择器配合，选中类名box1下的所有p并带有demo类名的元素 */
.box1 p.demo {
  color: red;
}
/* 和后代选择器配合，选中类名box1下的所有p并带有demo和ps类名的元素 */
.box1 p.demo.ps {
  color: red;
}

更多写法：

交集选择器可以进行类名连续书写，需要满足条件才能选中
IE6以及更老的版本不支持
可以作为其他选择器的组成部分

并集选择器

不同选择器都需要相同样式的时候，可以并集书写，相当于一种简化写法

书写方式：多个选择器使用逗号隔开，最后一个不加逗号

/* 同时给h2、p、类名demo、div元素设置样式 */
h2,p,.demo,div {
  color: red
}

用途：

多个标签具有公共样式，可以并集书写
可以进行样式清除，可以替代通配符选择器，避免通配符的缺点

CSS继承性

如果一个标签没有设置过某个样式，他的祖先设置过的话，该标签可以从祖先元素继承该样式，叫做继承性

能够继承的样式都是文本相关的样式，其他样式不能继承

<!--p元素会继承div元素的cilor、font-size和font-family属性-->
<style>
  div {
    width: 200px;
    height: 200px;
    background: pink;
    color: red;
    font-size: 20px;
    font-family: "宋体";
  }
</style>

<div>
  <p>内容</p>
</div>

应用：可以把某个样式给一个大祖先，后面的所有后代都会继承这个样式

CSS层叠性

当我们对一个标签或者选择器设置了同样的样式属性，最终只有一条属性可以成功加载，这条属性会层叠覆盖掉其他属性

优先级判断：

当选择器选中目标标签：
1. 比较选择器的权重，权重高会覆盖权重低的（* < 标签选择器 < 类选择器 < id选择器），高级选择器依次比较组成高级选择器的id、类、标签的个数
2. 如果权重相同，按照书写顺序判断，书写顺序靠后的会层叠掉前面的样式
如果选中了目标元素的祖先级元素
1. 就近原则继承，继承离自己最近的祖先级样式（父亲 > 祖父 > 曾祖父 > 祖先）
2. 如果距离相同的祖先级，按照选择器权重选择继承
3. 如果权重也相同，就要比较书写顺序，靠后的覆盖掉前面的
important关键字，书写方法：在某条属性值后面空格添加！important
- 如果在比较选择器权重时如果遇到！important，可以将某条CSS样式的权重提升到最大
- 就近原则中，不需要比重选择器权重，所有！important都会失效
- ！important不能提升选择器权重，只会提升某一条属性值权重
行内式
- 行内式权重高于所有其他选择器，但是低于！important

HTML5网页开发入门基础（HTML+CSS）

HTML基础

前端开发介绍

学习路线

HTML概述

网页的组成

互联网原理

互联网的运行过程

服务器（server）

云服务器（Elastic Compute Service，ECS）

客户端（Client）

浏览器（Borwser）

功能

目前主流浏览器

HTTP协议（Hypertext Transfer Prrotocol）

HTTP请求（request）

HTTP响应（response）

纯文本格式

纯文本格式

富文本格式

纯文本特点

HTML概念

超文本

标记

HTML语义化

HTML基本语法

HTML规范版本

HTML标签

HTML基本语法

html元素

元素内容

标签级别

HTML元素的特性

HTML属性书写规范

编辑器

微软VScode编辑器推荐插件

常用快捷键

HTML基本结构

基本骨架

html标签

head标签

title标签

body标签

DTD

命名空间

语言

字符集

HTML常用标签

注释

标题

段落 p

换行标签 br

文本格式化标签

图像 img

音频 audio

视频 video

超链接 a

列表

无序列表 ul>li

有序列表 ol>li

定义列表标签 dl>dt/dd

布局标签 div/span

div标签

span标签

表格基础 table>tr>td/th

合并单元格

表格分区

表单

表单域 from

表单元素

input标签

文本域 textarea

下拉菜单 select>optgroup>option

label标签

HTML字符实体

随堂测试错题

CSS基础语法

CSS概述

产生背景

发展过程

段落 `p`

换行标签 `br`

图像 `img`

音频 `audio`

视频 `video`

超链接 `a`

无序列表 `ul>li`

有序列表 `ol>li`

定义列表标签 `dl>dt/dd`

布局标签 `div/span`

表格基础 `table>tr>td/th`

表单域 `from`

文本域 `textarea`

下拉菜单 `select>optgroup>option`