1.html基述

1.1 html概述

html：超文本标记语言 Hypertext Markup Language 用于搭建网页的结构。

网页的组成：

前端三层： html(结构层) css(样式层) JavaScript(行为层)

其他的多媒体内容：图片视频音频超级链接等

运行过程：将网页上传的到服务器 ---> 服务器 <---- 客户端发送html请求到服务器

服务器通过http响应将请求传回的到客户端，通过客户端将网页渲染

html是一种纯文本格式文件。

超文本：超级文本用来链接另一个文本或多媒体内容的文本，链接到图片，链接，音频，视频，程序等

标记：标签 html tag 有特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。在编辑器汇总可以编辑和查看，在浏览器中不显示

<h1>HTML概念<h1>
<h2>超文本</h2>
<p>是超级文本的简称，简单来说就是用于链接到另一个文本或多媒体内容的文本</p>
<img src="images/smile01.jpg" >

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

1.1 html语义化

合适的标签做合适的事情

1.方便代码阅读和后期维护

2.便于浏览或者网络爬虫更好地解析网站内容

3.使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名

1.2 .互联网原理

1.2.1 服务器和客户端

服务器：一种特殊的计算机

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

服务器是24小时工作不间断的

云服务器：简单高效安全可靠处理能力可弹性伸缩的计算服务

客户端：普通用户使用的终端浏览器 app

1.2.2 浏览器：

用户上网搜索，查看信息的应用程序

功能：用于发送http请求到服务器，接收服务器发送的http响应，渲染html页面

主流浏览器的内核:

浏览器	内核	说明
IE Edge	Trident	ie内核
FireFox	Gecko	FireFox内核
Safari	Webkit
Chrome	Webkit -->blink	统称为chrome内核 chromium内核
Opera	Presto->webkit->blink

浏览器的功能：1.发送http请求，发送方式是在浏览器地址栏输入对应的网址，或者点击超级链接

2.接收服务器发回的http响应，服务器会发回一个html给浏览器

3.将接收的html渲染出来

1.2.3 http协议：

Hypertext Transfer Protocol:超文本传输协议，是客户端刘拉你或其他程序与web服务器之间的应用层通信协议

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

http响应：response 服务器根据请求响应一个html文件，将文件传输给客户端，在浏览器中进行html渲染

1.3 纯文本格式

纯文本格式：没有任何文本修饰，没有任何粗体，下划线，斜体，图片，符号或特殊字符及特殊打印格式的文本，只保存文本，不保存其格式的设置

常见格式是：.txt文件

特点：1.文件只能保存文本，不保存其他的格式或非文本内容，利于网络传输

2.所有的纯文本格式的文件，可以通过直接更改扩展名的方式更改保存格式。

3.纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑

.html .js .css都是纯文本格式文件

富文本格式：与纯文本对应。常见的是.rtf文件 .doc文件内部可以保存文本样式，图片等

1.4 html基本语法

1.4.1 HTML规范版本

W3C: 万维网联盟专门发布和维护互联网的规格和标准

1.4.2 HTML标签

HTML标记通常被称为HTML标签 html tag.标签再书写和使用过程中，必须遵循特定的语法

标签名必须书写在一对尖括号<>内部
```
<html></html>
```
标签分单标签和双标签，双标签必须成对出现
```
<p></p>  双标签
<br />   单标签
```
双标签包含开始标签和结束标签，结束标签必须书写关闭符合/.单标签也需要进行自行封闭书写，在HTML5中，单标签可以不写关闭符号

1.4.2 HTML元素

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

元素内容：纯文本，其他html的元素包含其他html元素内容的情况，称为嵌套。div标签元素内部嵌套p标签元素

<div>
    <p>这是div内部的段落</p>
</div>

一个html元素div内容可以h1,p.

div是h1,p的父级元素。h1,p互为兄弟关系

<div>
    <h1>这是div内部的标题</h1>
    <p>这是div内部的段落</p>
</div>

标签的级别：

容器级：可以存放任意内容，包含容器级标签 h1 div

文本级：标签内部只能存放文字或类似文本的内容，比如图片，表单元素等 p

特性：

1.元素间对空格，换行，缩进等形成的空白不敏感。有无空白对在浏览器中加载的效果是没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系

2.空白折叠现象：元素内容如果是文本，所有文字(类似文字内容)之间如果有空格，换行，缩进等空白不敏感，出现空白折叠现象。

1.4.3 html属性

规范：

1.书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分割。

2.属性包含：属性名(key)，属性值(value).属性名与属性值之间的写法通常称作键值对写法。html标签属性的键值对写法是k="v"。XHTML要求属性值必须在双引号内部

3.一个标签可以设置多个不用的属性，属性与属性之间用空格进行分割。每个属性的键值对的写法都是k="v"

4.部分标签的属性k可以设置多个属性值v.所有属性值v都必须在同一对双引号内，值与值之间需要使用空格分隔

1.5 HTML基本骨架

html文件最基本的四个标签，组成了网页的基本骨架。

<html>
  <head>
    <title>网页的标题</title>
  </head>
  <body>
    网页的主体
  </body>
</html>

1.html标签。 html的根元素。所有标签必须在写html标签的内部

2.head标签。用于存放title,meta,base,style,script,link。内部用于对网页的设置，除了titl内部的文字，其他标签不显示在浏览器上。

注意:head标签中我们必须要设置的是title

3.title标签

作用：a:让页面拥有一个属于自己的标题

b:title中的关键字可以作为搜索引擎抓取时的关键字，提高seo搜索引擎优化

c:内部的内容会显示在搜索结果的标题部分

d:作为浏览器收藏夹默认的网页标题

e:建议网页必须添加title标签内部内容，内容精简，提取关键字

4.body标签

作用：定义网页的主体部分，用于存放所有的html显示内容的标签如 p h1 div a等

body标签内部的元素内容显示在浏览器的窗口中

1.6 DTD 命名空间字符集

1.6.1 DTD

完整的html文件的第一行内容叫做文档定义类型 DocType Definition DTD

文档声明类型 DocType Declaration

作用：告知浏览器该网页使用的是哪个版本的html规范，让浏览器按照对应版本的html语法进行解析页面。

<!DOCTYPE html>   <!-- html5的 -->

1.6.2 命名空间

html元素标签整个网页文档，在开始标签上设置了命名空间xmlns的属性

xml：可扩展标记语言使用在传输过程中的规范，被设计来传输和存储数据是html的补充

xmlns:XML NameSpace NameSpace命名空间浏览器会将此命名空间用于该属性所在元素内的所有内容

html元素的命名空间规定了在不同用户的浏览器汇总标签语义遵循的统一标准，避免出现标签命名冲突。

对搜索引擎和浏览器是有帮助的

<html lang="en"></html>
<html lang="zh"></html>

1.6.2 字符集

<html>
  <head>
    <meta charset="utf-8">
  </head>
</html>

常用字符集编码：

国际通用字库：

utf-8 以字节为单位对unicode万国码进行编码涵盖了人类所有的语言一个汉字为3个字节

中国国标字库：gb2312,gbk 一个汉字为2个字节

使用情况建议:

1.如果没有网页加载速度要求，或制作外文网站 utf-8

2.如果含有大量中文汉字的网站要求网页加载速度快 gbk

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

2.html标签

2.1 注释

注释是在编辑器中可以查看，浏览器中看不到

用途：

1.在源代码中添加描述信息，方便开发人员阅读代码

2.对html纠错也很大的帮助，通过注释来检索代码的错误

3.暂时注释掉一部分不用的代码，便于后期恢复代码

<html>
  <body>
    <!-- 我是一行注释 -->
  </body>
</html>

2.2 标题标签

标题：通过h1-h6六个标签分别来对六个级别的标题进行定义的。

h1定义最大的标题，h6定义最小的标签

h1-h6标签都是双标签，且是容器级标签

作用：给标签内部的元素内容添加对应级别标题语义，不负责文字的粗体，字号等样式。

样式由css设定。

标签的级别：

标题标签之间不能相互嵌套，下一级标题与上一级标题之间通过同级关系书写，下一级标题解释说明的是前面距离最近的上一级标题。

权重：标题标签对呈现文档的结构非常重要，使用时要根据标签的重要程度进行选择。

h1在整个html中的权重非常高，内部应该放置html中最重要的内容，如：logo

约定俗成：一个页面中只会出现一个h1

  <h1>1级标题</h1>
  <h2>2级标题</h2>
  <h3>3级标题</h3>
  <h4>4级标题</h4>
  <h5>5级标题</h5>
  <h6>6级标题</h6>

2.3 段落和换行

2.3.1 段落 paragraph

段落(paragraph)是通过p标签进行定义的

p标签是双标签，且为文本标签。内部只能放置文本，图片，表单元素，或者废弃的font标签等

作用：给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式，换行效果由css样式决定。

<p>我是一行文字,我可以放在p里面</p>
<p>
  <img src="images/01.jpg" title="我是一个图片，我可以放在p里面">
</p>

2.3.2 换行标签 breaking

<p>
    我本来是一段完整的文字，<br />我被br标签打断了
</p>

2.4 文本格式化标签

html中有部分标签是用来对文字进行格式化显示设置的，比如：粗体斜体 html 4.0之前。

<p>
  <b>这是b标签,可以让文字加粗</b>
  <u>这是u标签，可以给文字添加下划线</u>
  <i>这是i标签，可以设置斜体</i>
</p>

标签	描述
b	定义粗体文本 bold
big	定义大号字
em	定义着重文字 emphasis 自带斜体效果
i	定义斜体字 italic
small	定义小号字
strong	定义加重语气，自带加粗效果
sub	定义下标字，subscript
sup	定义上标字 superscript
ins	定义插入字，自带下划线效果，insert
del	定义删除字，delete
s	不赞成使用，使用del代替，strike的简化
strike	不赞成使用，使用del代替
u	定义下划线，不赞成使用，使用css样式代替，underline

2.5 图像标签 iamge

图像image 由img标签进行定义

img标签是单标签，相等于一个特殊的文本

作用：在指定的位置插入一张图片

常用图片格式：.jpg .png .gif

img标签常用属性：

属性名	描述
src	表示图片的路径,必须设置的属性，路径可以是本地图片路径，也可以是网络图片路径
width	表示图片的宽度建议用css设置
height	表示图片的高度建议用css设置
border	边框属性值可以设定边框的厚度建议用css设置
title	设置鼠标悬停时提示文本
alt	设置图像没有找到时候的替换文本，尽量添加这个属性，便于seo优化

<img src="image/01.jpg" width="200" height="200" border="10" title="猪的图片" alt="这是一只猪的图片">

注意：

1.当width height 只设置一个的时候会进行等比伸缩

路径：

相对路径：在查找文件的时候，从html本身出发，根据相对的位置进行查找，包含三种方向：

同级查找：直接书写文件名和后缀名就行

<img src="01.jpg">

字迹查找：目标文件与html同一级的内部，需要先查找文件夹名称，再查找文件名和后缀名就行

./ 代表本级

<img src="image/01.jpg">
<img src="./image/01.jpg">

上级查找：目标文件在html文件的上一级的，通过../进入上一级，依次类推，再查找文件名和后缀名

<img src="./../image/01.jpg">

绝对路径：从盘符触发，或者网址形式查找

路径不能被移动，否则会出现图片加载失败的效果

从盘符的出发的路径容易出现中文字符，html解析可能出现乱码

<img src="c:/users/code/image/01.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2473774775,3673961281&fm=26&gp=0.jpg" >

2.6 音频和视频

2.6.1 音频 audio

双标签，格式：.mp3 .ogg .wav

<audio src="media/snow.mp3" controls></audio>

2.6.2 视频 video

双标签格式：.mp4 .ogg .webm

<video src="media/snow.mp4" controls></video>

2.7 超级链接 a

a标签：anchor 锚双标签可以放容器级文本级标签

跨页面，同一个页面。

默认文字颜色蓝色有下划线出现鼠标样式变成小手

属性	描述
href	用于规定链接的目标地址
target	定义被跳转后的文档在哪个标签页显示：self:默认值当前页面打开; blank:在一个新标签页打开
title	设置鼠标悬停时显示的文本

<a href="http://www.lagou.com" target="_blank" title="跳转到拉钩官网">点击跳转到拉钩</a>

2.7.1 锚点跳转

页面内锚点跳转

<a href="#maodian1">第一段</a>
<a href="#maodian2">第二段</a>
<a href="#maodian3">第三段</a>
<p id="mudian1">我是第一屏</p>
<p id="maodian2">我是第二屏</p>
<p id="maodian3">我是第三屏</p>

跨页面锚点跳转

<a href="17-anchor.html/#maodian3">跳转到另一个页面</a>

2.8 列表

列表：用于制作html中的一系列项目

将内容相关，结构相似，样式相近的内容使用列表结构进行搭建

2.8.1 无序列表 ul li

标签	描述
ul：unorder list	定义一个无序列表的大结构
li: list item	列表项定义的是无序列表内的某一项

ul和li是嵌套关系

一个列表中可以有任意个列表项

注意：

1.ul标签只能嵌套li标签，li标签不能脱离ul标签单独书写。

2.li标签是一个经典的容器级标签，内部可以放着任意内容，甚至可以放置一组ul>li无序列表结构。

3.无序列表的列表项li之间没有顺序的先后之分，它们的重要程度是相同的

4.无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式由css负责。

<h2>小说列表</h2>
<ul>
  <li>红楼梦</li>
  <li>西游记</li>
  <li>水浒传</li>
  <li>三国演义</li>
</ul>

2.8.2 有序列表 ol li

标签	描述
ol:ordered list	定义一个有序的列表的大结构
li:list item	定义有序列表的每一项

ol和li是嵌套关系

一个列表中可以有任意个列表项

注意：

1.ol标签只能嵌套li标签，li标签不能脱离ol标签单独书写。

2.li标签是一个经典的容器级标签，内部可以放着任意内容，甚至可以放置一组ol>li无序列表结构。

3.有序列表的列表项li之间有顺序的先后之分，根据内容的顺序需要合理调整书写位置

4.有序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式由css负责。

<h2>世界国土面积排行榜：</h2>
<ol>
  <li>俄罗斯</li>
  <li>加拿大</li>
  <li>
    <h4>中国</h4>
    <ol>
      <li>新疆</li>
      <li>西藏</li>
      <li>内蒙古</li>
    </ol>
  </li>
</ol>

2.8.3 定义列表 dl dt dd

标签	描述
dl:definition list	定义一个自定义列表的大结构
dt:definition item	定义一个自定义列表汇总的一个主题或术语
dd:definition decription	定义一个解释项，表示描述或解释前面的定义主题

dl内部只能嵌套dt和dd,dt和dd是同级关系

注意：

1.dl内部只能嵌套dt和dd,dt和dd是同级关系

2.dl内部可以放多组dt和dd,每一个dd解释说明的是前面的距离最近的一个dt。

3.每一个dt后面可以有0到多个解释项的dd,每个dd解释的都是前面距离最近的一个dt.

4.dt,dd是容器级标签，里面可以放置任意内容

5.定义列表中的缩进样式由css负责，标签只负责搭建语义结构。

6.配合着Css布局，最好每个dl中只添加一组dt和dd，便于后期管理

<dl>
  <dt>张三</dt>
  <dd>城市：北京</dd>
  <dd>年龄：18</dd>
  <dt>李四</dt>
  <dd>城市：上海</dd>
  <dd>年龄：20</dd>
  <dd>学校：复旦大学</dd>
  <dt>王五</dt>
</dl>

2.9 布局标签 div span

div和span常用作布局标签，俗称盒子，后续h5增加了更多的布局标签

div和span都会没有具体明确的语义的

2.9.1 div标签

div:division 分割区域跨度的意思俗称大盒子

div是双标签是最经典的容器级标签，内部可以放置任意内容

作用：多用于划分网页的区域，进行结构布局，一般将相关的内容使用div包裹起来，整体设置大的布局效果。

<div id="header"></div>
<div id="nav"></div>
<div id="section"></div>
<div id="footer"></div>

2.9.2 span标签

span：小区域小跨度的意思俗称小盒子

span也是双标签，容器级标签

作用：在不改变整体效果的情况下，可以辅助进行局部调整。

<div>
  <dl>
    <dt>张三</dt>
    <dd>
        <p>城市：<span>北京</span></p>\
      <p>年龄：19</p>
    </dd>
  </dl>
</div>

2.10 表格

2.10.1 表格基础

表格的基础：创建一个简单的表格至少需要三个标签，table,tr,td

标签	描述
table	表格定义整个的表格的大结构
tr:table rows	定义表格的行，定义的是表格由多少行组成
td:table data	表格的数据，也叫表格单元格，定义的是每一行内部的单元格。
th:table head data	表头单元格

三者之间的关系：table>tr>td 一个表格有多个行，每个行中有多个单元格。

<table style="border-collapse:collapse" border="1">
    <tr>
        <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
    <tr>
      <td>第1行,第1列</td>
      <td>第1行,第2列</td>
      <td>第1行,第3列</td>
      <td>第1行,第4列</td>
    </tr>
    <tr>
      <td>第2行,第1列</td>
      <td>第2行,第2列</td>
      <td>第2行,第3列</td>
      <td>第2行,第4列</td>
    </tr>
    <tr>
      <td>第3行,第1列</td>
      <td>第3行,第2列</td>
      <td>第3行,第3列</td>
      <td>第3行,第4列</td>
    </tr>
  </table>

2.10.2 合并单元格

rowspan：跨行合并上下合并

colspan：跨列合并左右合并

属性值都是数字，数值是几就是跨几行，跨几列

<table style="border-collapse:collapse" border="1">
    <tr>
      <td colspan="2">1</td>
      <td rowspan="2">2</td>
      <td colspan="2">3</td>
    </tr>
    <tr>
      <td>4</td>
      <td rowspan="2">5</td>
      <td>6</td>
      <td rowspan="2">7</td>
    </tr>
    <tr>
      <td rowspan="2">8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>11</td>
      <td colspan="2">12</td>
      <td>13</td>
    </tr>
  </table>

2.10.3 表格的分区

标签	描述
caption	表格的标题，内部书写标题文字
thead: table head	表格的头部，内部嵌套 tr>th
tbody:table body	表格的主体内部嵌套 tr>td
tfoot:table foot	表格的页脚内部嵌套 tr>td

注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption,thead,tbody,tfoot进行的

<table style="border-collapse:collapse" border="1" width="500">
    <caption>各地区的固定资产投资情况</caption>
    <thead>
      <tr>
        <th rowspan="2">地区</th>
        <th colspan="2">按总量分</th>
        <th colspan="2">按比重分</th>
      </tr>
      <tr>
        <th>自年初累计(亿元)</th>
        <th>比去年同期增长(%)</th>
        <th>自年初累计(%)</th>
        <th>去年同期(%)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>

2.11 表单

html表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件

在html中，一个完整的表单通常由表单域，提示信息和表单控件(表单元素)3个部分构成。

2.11.1 form标签

form标签是一个功能性标签，填写的表单信息想要正确的提交到后台服务器，必须放在一个form标签之内。

双标签，容器级标签

属性名	属性值	描述
action	url	指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式
name	自定义名称	规定表单的名称

<form action="data.php" method="post" name="firstForm"></form>

2.11.2 表单元素

2.11.2.1 input标签

input 单标签相当于一个特殊的文本

通过标签属性实现各种功能

属性名	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选框同一组单选框必须是互斥的关系，设置相同的name值
	checkbox	复选框
	button	普通按钮
	reset	重置按钮
	submit	提交按钮
	image	图片按钮
	file	定义输入文字和"浏览"按钮，供文件上传
	hidden	定义隐藏的输入字段
name	自定义	定义控件的名称
value	自定义	定义控件的默认文本值
size	数字	定义控件的宽度
checked	checked	定义选框控件的默认被选中项
maxlength	数字	定义允许输入的最多字符数

<form action="">
    <p>
      <!-- input 单行文本输入框 -->
      用户名：<input type="text" value="请输入你的用户名">
    </p>
    <p>
      <!-- 密码输入框 -->
      密码：<input type="password">
    </p>
    <p>
      <!-- 单选框 -->
      性别： <input type="radio" name="sex" checked>男
      <input type="radio" name="sex"> 女
    </p>
    <p>
      <!-- 复选框 -->
      兴趣：<input type="checkbox" name="hobby">唱歌
      <input type="checkbox" name="hobby">绘画
      <input type="checkbox" name="hobby">摄影
    </p>

    <p>
      <input type="button" value="按钮">
    </p>
    <p>
      <input type="reset" value="重置">
    </p>
    <p>
      <input type="submit" value="提交">
    </p>
    <p>
      <input type="image"
      src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3092528988,4008414166&fm=26&gp=0.jpg" alt="">
    </p>
    <p>
      上传图片：<input type="file" name="" multiple>
    </p>
  </form>

2.11.2.2 文本域 textarea

textarea: 文本域可以允许输入多行文本的区域

双标签，相当于一个特殊的文字

cols:列出现滚动条后每一行显示的最大字节数一个汉字2个字节

rows:行文本框显示的最大行数超过行数，会被隐藏且出现滚动条

<form>
 <p>
   自我介绍：
   <textarea cols="30" rows="10">请输入200字左右的自我介绍</textarea>
 </p>
</form>

2.11.2.3 下拉菜单 select potion

select：选择定义下拉菜单整体结构

potion:选择的项可以有多个

<form>
  <p>
    城市:
    <select>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="1">厦门</option>
    </select>
 </p>

  <!-- 分组 -->
  <p>
      城市:
      <select>
        <optgroup label="国内">
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">厦门</option>
        </optgroup>
        <optgroup label="国外">
          <option value="4">伦敦</option>
          <option value="5">巴黎</option>
          <option value="6">慕尼黑</option>
        </optgroup>
      </select>
    </p>
</form>

2.11.3 label标签

<form>
  <label for="user">
    用户名：<input id="user" type="text">
  </label>
</form>

2.12 字符实体

使用是查看文档，实体名称对大小写敏感。

结果	描述
<	& gt;
>	& lt;
空格	& nbsp;
版权符	& copy;

3.css概述

css： cascading style sheets 层叠样式表，是一种用来表现HTML的文件样式的计算机语言。

作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化。

组成：

层叠式：层叠性，继承性

样式：文字文本，背景，盒模型，浮动，定位，其他

3.1 css语法

css规则：选择器，以及一条或多条声明

书写的位置：

3.1.1 内联样式

缺点：

1.内联式必须写在标签之上，没有完全脱离html标签
2.css样式代码让标签结构繁重，不利于HTML结构的解读。
3.一个内联式的css代码，只能给一个标签使用，如果多个标签有相同的样式，同样的css代码需要书写多次，增加代码量

<!-- 1.内联式 -->
<div style="width:100px;height:100px;font-size:20px;">这是一个div元素</div>

3.1.2 内嵌式样式

优点：

1.实现了结构和样式的初步分离，

2.多个标签可以利用一段代码设置。节省代码量

缺点：

1.结构样式分离不够彻底。样式还是写在html文件的style标签中。

2.css样式只能被一个html文件使用，不能被多个html使用。

3.在HTML中如果css代码太多，会造成文件头重脚轻。

<!-- 内嵌式样式表 -->
<head>
  <style type="text/css">
    p {
      font-size: 20px;
      color: red;
    }
  </style>
</head>
<body>
  <p>这是一个p元素</p>
</body>

3.1.3 外联式

书写在一个单独的.css文件中,直接书写css规则。

优点：

1.实现了HTML和CSS的完全分离。

2.多个HTML文件可以共用一个css文件，可以把公共的样式单独写在一个css文件中,减少代码量。

3.可以实现css变化，多个HTML页面同时变化，减少工作量。

4.一个HTML文件可以引入多个css文件，可以实现同一个页面中css代码分层。

01.css:

p,div {
  font-size: 20px;
  color: red;
}

<head>
  <!-- 引用外部css样式 -->
  <link rel="stylesheet" href="01.css" type="text/css">
</head>
<body>
  <div>这是一个div元素</div>
  <p>这是一个p元素</p>
</body>

3.1.4 导入式

利用@import url()导入其他样式表。

问题：

1.导入式的作用与外链式的相同

2.浏览器会在HTML结构加载完毕之后，再去解析导入式样式表，可能导致页面没有css样式的情况。

@import url("02.css");
p,div {
  color: red;
  font-size: 20px;
}

3.2 css规则

以内嵌式样式表为例：

1.所有的css代码都必须写在head标签内部的一对style标签内。

2.css在给某个标签设置样式前，必须使用选择器先选中标签。

3.css样式的属性，属性名和属性值的键值对写法：k:v; 。

4.给每个选择器添加的样坏死属性必须后面的写在{}内。

5.每个{}可以写一条或多条样式属性。

注意：

1.每一条属性后面的;必须写，否则会出现错误；

2.css中所有的属性与属性之间对空格，换行不敏感。

3.css注释语法 /* */ 之间书写css注释，浏览器不会解析。

<head>
  <style>
    p {
      color: red;
      font-size: 30px;
    }
  </style>
</head>

3.2.1 代码的书写风格

1.css样式格式，展开格式。

/* 展开格式 */ 
div {
    color: red;
    width: 200px;
    height: 200px;
  border: 1px solid #ccc;
}

/* 紧凑格式 */
div{color:red;width:100px;height:200px;border:1px solid #ccc;}

2.css的英文可以使用大写，也可以使用小写。开发情况下，除特殊情况，尽量写小写。

3.空格规范：选择器与{}之间保留一个空格；冒号后面，属性值前面，保留一个空格。

3.3 css常用样式

3.3.1 文字的三属性

3.3.1.1 color: 颜色

属性值：

1.可以写颜色名。 red yellow blue

2.可以写颜色值：

rgb模式 : rgb(255,200,0) 255--红 255-绿 255--蓝

十六进制的格式： #ffffff; 0-9 a-f

<head>
  <style>
    p {
      color: yellow;
    }
  </style>
</head>
<body>
  <p>这是一个p元素</p>
</body>

3.3.1.2 字体 font-family

作用：定义元素内文字的字体。

属性值可以多个,选择的时候依据书写顺序进行加载。一般先写英文字体，在写中文字体

浏览器中加载的字体来自用户机器自带的字体。

常用： SimSun Microsoft YaHei Arial consolas

如果不设置字体属性，浏览器会加载自己的默认字体。

<head>
  <style>
    p {
      font-family: "宋体";
    }
  </style>
</head>
<body>
  <p>这是一个p元素</p>
</body>

3.3.1.3 字号 font-size

作用：设置文字的大小。

相对长度单位： px em %;

绝对长度单位： in cm mm pt;

chrome,ie的默认文字字号是16px;

浏览器有默认的最低显示字号，chrome是8px,ie浏览器最小是1px;

实际应用中网页中最小字号是12px.尽量使用12px 14px 16px 偶数字号

实际中的字号，根据设计图为准。

<head>
  <style>
    p {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>这是一个p元素</p>
</body>

3.4 盒子实体化3属性

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

<head>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div>这是一个div元素</div>
</body>

3.4 css的选择器

选择器：选择要添加样式的HTML标签的一种方法，模式。

基础选择器：标签选择器，id选择器，类选择器，通配符选择器。

高级选择器：后代选择器，交集选择器，并集选择器。

3.4.1 标签选择器

通过标签名去选择标签元素

书写方式：标签名

作用范围：整个HTML文档中所有的同名标签，会忽略HTML元素的嵌套关系。

优点：1.可以选择所要的同名标签，设置所要的同名标签的样式

缺点：只能全选，不能对局部标签添加样式。

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
    <h3>这是一个三级标题</h3>
  <p>这是一个p</p>
    <p>这也是一个p</p>
  <p>这还是一个p</p>
  <div>这是一个div</div>
  <span>这是一个span</span>
  <p>这同样是个p</p>
</body>

3.4.2 id选择器

通过标签上的id属性去选择标签。

书写方式： #id 属性值

范围：只能选择一个标签。每个id属性值必须唯一的，不能与其他标签的id同名。对大小写敏感。

缺点：只能实现单选，不能帮我们完成多选功能。

<head>
  <style>
    #para1 {
      color: red;
    }
  </style>
</head>
<body>
    <h3>这是一个三级标题</h3>
  <p>这是一个p</p>
    <p>这也是一个p</p>
  <p id="para1">这还是一个p</p>
  <div>这是一个div</div>
  <span>这是一个span</span>
  <p>这同样是个p</p>
</body>

3.4.3 类选择器

通过标签的class属性去选择标签。

书写方式：.class属性值

范围：页面中所有的class属性值相同的标签。

特点：不区分标签类型，只要class名相同就可以被选中。

一个标签可以有多个属性值，属性值之间用空格分隔

工作上类上样式，id上行为

<head>
  <style>
    .demo {
      color: red;
    }
    .para{
      font-size:20px;
    }
  </style>
</head>
<body>
    <h3>这是一个三级标题</h3>
  <p>这是一个p</p>
    <p>这也是一个p</p>
  <p class="demo para">这还是一个p</p>
  <div>这是一个div</div>
  <span>这是一个span</span>
  <p class="demo">这同样是个p</p>
</body>

3.4.4 通配符选择器

包括html标签在内的所有标签

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

缺点：效率低

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      color:red;
    }
  </style>
</head>
<body>
    <h3>这是一个三级标题</h3>
  <p>这是一个p</p>
    <p>这也是一个p</p>
  <p>这还是一个p</p>
  <div>这是一个div</div>
  <span>这是一个span</span>
  <p>这同样是个p</p>
</body>

3.4.5 后代选择器

通过标签之间的嵌套关系(族谱关系)去选择元素，基本组成部分就是基础选择器。

书写方式：通过空格表示后代空格前的标签必须是前面的组先级。

<head>
  <style>
    .box1 ul li p {
      color: red;
    }
  </style>
</head>
<body>
    <div class="box1">
    <ul>
      <li><p>这是1p</p></li>
      <li><p>这是2p</p></li>
    </ul>
    <p>这是一个p</p>
  </div>
  <div class="box2">
    <ol>
      <li><p>这是1p</p></li>
      <li><p>这是2p</p></li>
    </ol>
    <p>这是一个p</p>
  </div>
</body>

3.4.6 交集选择器

通过一个标签之上满足所有的基础选择器的需求去选择标签。

<head>
  <style>
    p.demo {
      color: red;
    }
  </style>
</head>
<body>
    <div class="box1">
    <ul>
      <li><p class="demo">这是1p</p></li>
      <li><p>这是2p</p></li>
    </ul>
    <p>这是一个p</p>
  </div>
  <div class="box2">
    <ol>
      <li><p class="demo">这是1p</p></li>
      <li><p>这是2p</p></li>
    </ol>
    <p>这是一个p</p>
  </div>
</body>

3.4.7 并集选择器

在不同选择器选中的元素需要设置相同的样式的时候,用来化简，减少代码量。

可以弥补通配符选择器的缺点。

<head>
  <style>
    h2,.demo {
      color: red;
    }
  </style>
</head>
<body>
  <h3>标题3</h3>
    <div class="box1">
    <ul>
      <li><p class="demo">这是1p</p></li>
      <li><p>这是2p</p></li>
    </ul>
    <p>这是一个p</p>
  </div>
  <div class="box2">
    <ol>
      <li><p class="demo">这是1p</p></li>
      <li><p>这是2p</p></li>
    </ol>
    <p>这是一个p</p>
  </div>
</body>

3.4 层叠式

3.4.1 继承性

如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式是从组先级继承而来的，这种现象就是继承性。

能够被继承的样式是文字相关的样式。

<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: red;
      color: green;
      font-size: 14px;
      font-family: "宋体";
    }
  </style>
</head>
<body>
  <h2>标题w</h2>
  <biv class="box">
    <p>是文字1</p>
    <p>是文字2</p>
    <p>是文字3</p>
  </biv>
</body>

3.4.2 层叠性

用于解决同一条属性被多次设置的机制

基本层叠后面一定把前面层叠掉使用相同的选择器

设置相同的样式后面的会层叠前面的样式

作用于相同属性会被层叠掉优先级

选择器	权重
!important	10000
内联样式	1000
# id选择器	100
类选择器属性选择器伪类	10
元素选择器伪元素	1
通配符	0

注意：优先比较最大的权重不会累加高过上一层
这个权重的值只是一个参考值，并不是实际的。

html和css自看笔记

1.html基述

1.1 html概述

1.1 html语义化

1.2 .互联网原理

1.2.1 服务器和客户端

1.2.2 浏览器：

1.2.3 http协议：

1.3 纯文本格式

1.4 html基本语法

1.4.1 HTML规范版本

1.4.2 HTML标签

1.4.2 HTML元素

1.4.3 html属性

1.5 HTML基本骨架

1.6 DTD 命名空间 字符集

1.6.1 DTD

1.6.2 命名空间

1.6.2 字符集

2.html标签

2.1 注释

2.2 标题标签

2.3 段落和换行

2.3.1 段落 paragraph

2.3.2 换行标签 breaking

2.4 文本格式化标签

2.5 图像标签 iamge

2.6 音频和视频

2.6.1 音频 audio

2.6.2 视频 video

2.7 超级链接 a

2.7.1 锚点跳转

页面内锚点跳转

跨页面锚点跳转

2.8 列表

2.8.1 无序列表 ul li

2.8.2 有序列表 ol li

2.8.3 定义列表 dl dt dd

2.9 布局标签 div span

2.9.1 div标签

2.9.2 span标签

2.10 表格

2.10.1 表格基础

2.10.2 合并单元格

2.10.3 表格的分区

2.11 表单

2.11.1 form标签

2.11.2 表单元素

2.11.2.1 input标签

2.11.2.2 文本域 textarea

2.11.2.3 下拉菜单 select potion

2.11.3 label标签

2.12 字符实体

3.css概述

3.1 css语法

3.1.1 内联样式

3.1.2 内嵌式样式

3.1.3 外联式

3.1.4 导入式

3.2 css规则

3.2.1 代码的书写风格

3.3 css常用样式

3.3.1 文字的三属性

3.3.1.1 color: 颜色

3.3.1.2 字体 font-family

3.3.1.3 字号 font-size

3.4 盒子实体化3属性

3.4 css的选择器

3.4.1 标签选择器

3.4.2 id选择器

3.4.3 类选择器

3.4.4 通配符选择器

3.4.5 后代选择器

3.4.6 交集选择器

3.4.7 并集选择器

3.4 层叠式

3.4.1 继承性

3.4.2 层叠性

1.6 DTD 命名空间字符集