一、什么是HTML和CSS
网站开发的基础语言
如何看到网站的原始代码？ 通过鼠标右键选择查看网页源代码
一个网站是由N多个网页组成的，每一个网页是 .html文件，组合在一起形成一个网站。
二、编辑器VS Code
VS Code：来自微软，是一个开源的（免费）、基于Electron的轻量代码编辑器。
如何下载？
官网下载。并且下载两个插件open in browser 和 View In Browser
学习编辑器的基本使用：
未保存状态： 
创建文件、创建文件夹、重命名、删除、搜索
保存：Ctrl + s；
全选：Ctrl + A；
复制：Ctrl + C；
粘贴：Ctrl + V；
剪切：Ctrl + X；
撤销：Ctrl + Z；
前进：Ctrl + Y；
设置：文件 -> 首选项 -> 设置（文字大小、是否换行word wrap）
从头选中一行：Shift + end；
从尾选中一行：Shift + Home；
快速复制一行：Shift + Alt + ↓；
快速移动：Alt + ↑ 或 Alt + ↓；
向前缩进：Tab + Shift ；
向后缩进：Tab ；
多光标：Alt + 鼠标左键；
选择同样元素的下一个：Ctrl + D；
Chrome浏览器（下载）
五大浏览器：1.IE浏览器 2.Firefox浏览器 3.Chrome浏览器 4.Safari浏览器 5.Opera浏览器
三、深入了解网站开发
技术角度：
UI设计师：设计稿
web前端开发工程师（H5开发）：设计稿 -> 代码 ； 数据库里的数据 -> 显示到页面 ； HTML+CSS
- HTML：结构
- CSS：样式
web后端开发工程师：把网站中的产生的数据存储起来，访问时提取出来
四、Web前端的三大核心技术
- HTML：结构
- CSS：样式
- JavaScript：行为
五、HTML基础结构与属性
HTML：
- 超文本：文本内容+非文本内容（图片、视频、音频等）
- 标记：<单词>，也称标签；
两种写法
- 单标签：<header>
- 双标签：<header></header>
- 语言：编程语言
创建标签的快捷键：单词 + tab -> <单词>
标签可以上下排列，也可以组合嵌套。
标签的属性：修饰标签的，设置当前标签的一些功能
- 语法格式：<标签 属性=“值” 属性2=“值2”>
常用标签：HTML5元素周期表,HTML5在线元素标签含义大全 - 卷赞网
HTMl初始代码
初始代码：（！+ Tab） 新手建议先手写
<!DOCTYPE html> <!-- 文档声明，告诉浏览器这是一个html文件 -->
<html lang="en"> <!-- html文件的最外层标签：包裹着所有html标签代码 -->
<!-- lang = "en"表示是一个英文网页，lang = "zh-CN"表示中文网站 -->
<head> <!-- 输入网址的部分称head -->
<meta charset="UTF-8"> <!-- 元信息：编写网页中的一些赋值信息
<!-- 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 -->
显示网页内容区域
</body>
</html>HTMl中的注释
写法：<!-- 内容 --> 在浏览器中看不到，只能在代码中看到注释内容
意义：
- 把暂时不用的代码注释起来，方便以后使用。
- 对开发进行提示作用
快捷添加注释与删除： Ctrl + / ； Shift + Alt + A
HTMl语义化
定义：根据网页中内容的结构，选择适合的HTML标签进行编写
好处：
- 在没有CSS的情况下，页面也能呈现出很好的内容结构
- 有利于SEO，让搜索引擎爬虫更好的理解网页
- 方便其他设备解析（如屏幕阅读器、盲人阅读器等）
- 便于团队开发与维护
标题与段落
h标签：标题（网页内容的标题） -> 双标签：<h1></h1> ... <h6></h6>
注：
- 在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签；h2——h6可以有多个
- h5、h6标签在网页中不经常使用
p标签：段落 -> 双标签：<p></p>
小练习：AngelaBaby简介
<!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>Angelababy简介</h1>
<h2>基本信息</h2>
<p>杨颖（Angelababy）,1989年2月28日出生于上海，13岁时移居香港，中国影视女演员。</p>
<p>2009年主演电影《全城热恋》。2012年，凭借爱情篇《第一次》获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗、杨幂、倪妮共同当选新一代“四小花旦”；同年在徐克导演的影片《狄仁杰之神都龙王》中担任女主角，并且获得第21届北京大学生电影节最受欢迎女演员奖；4月，Angelababy主演电视剧《大汉情缘之云中歌》。2014年加盟综艺节目《奔跑吧兄弟》并主演电影版；同年主演顾长卫导演的电影《微爱之渐入佳境》，票房突破2.8亿。2015年5月参演好莱坞电影《独立日2》；7月，主演电影《摆渡人》。</p>
<h2>早年经历</h2>
<p>1989年2月28日，Angelababy出生于上海，中文名杨颖。杨颖自幼随家人到上海定居，在上海的演艺学校学演戏及舞蹈。13岁时，杨颖回归香港加入了Talent Bang，还担任了Viva Club Disney主持。</p>
<h2>个人生活</h2>
<p>2015年5月27日，黄晓明与Angelababy（杨颖）在青岛民政局领证完婚</p>
<p>2015年10月8日，黄晓明和Angelababy在上海展览中心正式举办婚礼，上午8点，Angelababy工作室曝光了两人的婚纱照，照片中，两人以巴黎地标建筑为背景，浪漫亲吻。</p>
</body>
</html>文本修饰标签
- <strong>:表示强调，会对文本进行加粗（双标签）
<p>
<strong>这是一段需要强调的文本</strong>
</p>- <em>：表示强调，会对文本进行斜体
<p>
<em>这是一段需要强调的文本</em>
</p>区别： 1. 写法和展示效果，一个加粗，一个斜体 2.strong的强调性更强
- <sub></sub>：下标文本
- <sup></sup>：上标文本
<p>
a<sup>2</sup> + b <sup>2</sup> = c <sup>2</sup>
</p> <p>
H<sub>2</sub> O
</p><del></del>：删除文本
<ins></ins>：插入文本
<p>
促销：原价 <del>300</del>,现价<ins>100</ins>.
</p>效果：
注意：一般情况下，删除文本都是和插入文本配合使用的。
小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
北京著名的高档百货店—— <em>赛特购物中心</em>即将闭店。昨天，赛特购物中心总台服务人员表示，<strong>“如果手里有购物卡请尽快到店消费”</strong>。据这位服务人员介绍，目前赛特购物中心正在进行清仓大甩卖。<del>特价电视原价2600元</del>，<ins>现清仓价只需1300元。</ins>
</p>
</body>
</html>图片标签与图片属性
<img>：图片（单标签） src：引入图片的地址。 alt：当图片出现问题的时候，可以显示一段友好的提示文字。
title：提示信息，鼠标放在标签上会出现提示信息 width、height：图片的大小
当图片没有问题的时候，alt内的内容不会显示。
引入文件的地址路径
相对路径： 相对于某一个文件来引入的 .在路径中表示当前路径 ..在路径中表示上一级路径
引入文件的地址路径
相对路径：
相对于某一个文件来进行引入的。比如说我们某一个文件跟要引入的图片是在同一个级别下，他们之间是兄弟的关系；如果现在要引入的图片是在相对于当前文件的外面的文件夹中，这是父亲关系。相对于当前文件是在内部，是它的一个孩子，称相对路径。
. 在路径中表示当前路径
.. 在路径中表示上一级路径
图片和文件位置：
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>Document</title>
</head>
<body>
<img src="./ABC.jpg" alt="" >
</body>
</html>2.
<!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>
<img src="./img/ABC.jpg" alt="" >
</body>
</html>3.
<!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>
<img src="../img/ABC.jpg" alt="" >
</body>
</html>绝对路径：
真正图片的位置
<!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>
<img src="D:/img/ABC.jpg" alt="" > <!-- D也可以不用写 -->
</body>
</html>Windows下"/"和"\"都相同，但是建议用"/"，但网站一定要用"/"
跳转链接<从一个页跳转到另一个页>
<a>标签：（双标签）
- href属性：链接的地址
- target属性：可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开 _blank
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.qfedu.com">
<img src="./img/ABC.jpg" alt="" width="500" height="300">
</a>
<a href="http://www.baidu.com" target="_blank">访问百度</a>所有链接都在新窗口打开：
- 每个<a>内都加target(略麻烦)
- 使<base>标签
<base>标签：单标签，作用是改变链接的默认行为。
- 一般写在head当中
<!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>
<base target="_blank">
</head>
<body>
<a href="http://www.baidu.com" >访问百度</a>
<a href="http://www.baidu.com" >访问百度</a>
<a href="http://www.baidu.com" >访问百度</a>
<a href="http://www.baidu.com" >访问百度</a>
<a href="http://www.baidu.com" >访问百度</a>
</body>
</html>小练习：
分别建立一个首页、列表页、详细页，并让他们之间实现互相跳转，每个页面至少包含一张图片，图片在images文件夹内，列表和详细页在html文件夹内，首页在根目录下
<!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>
<a href="./html/list.html">列表页</a>
<img src="./images/sxx2.jpg" alt="">
</body>
</html><!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>
<a href="./detail.html">详细页</a>
<img src="../images/sxx1.jpg" alt="">
</body>
</html><!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>
<a href="../index.html">返回首页</a>
<img src="../images/sxx3.jpg" alt="">
</body>
</html>跳转锚点<在当前页面内进行跳转>
实现一： #号 id属性
<body>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#JavaScript">JavaScript</a>
<h2 id="html">HTML超文本标记语言</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2 id="css">CSS层叠样式表</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2 id="JavaScript">JS脚本</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
</body>实现二：#号 name属性 (name属性是加给a标签的)
<body>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#JavaScript">JavaScript</a>
<a name="html"></a>
<h2>HTML超文本标记语言</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<a name="css"></a>
<h2>CSS层叠样式表</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<a name="JavaScript"></a>
<h2>JS脚本</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
</body>特殊符号
概念：编写一些文本时，经常会遇到输入法无法输入的字符，如®（注册商标）、©（版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。
| 特殊字符 | 含义 | 特殊字符代码 |
| 空格符 | | |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ＜ | 小于号 | < |
| ＞ | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| ° | 摄氏度 | ° |
尽量用特殊符号。
例如空格字符，在写代码时空格是会被自动忽略的
<p>
hello world
</p>
<p>
hello world
</p>
加入空格字符后：
<p>
hello world
</p>
列表
-
无序列表
<ul>、<li>：列表的最外层容器、列表项
注：ul和li必须是组合出现的，它们之间是不能有其他标签的
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
<!-- 错误写法 -->
<!-- <ul>
<p>
<li>第三项</li>
</p>
</ul> -->
</body>type属性：改变前面标记的样式（一般都是用CSS去控制）
语法：<ul type="circle">
| 值 | 描述 |
| disc | 默认值，实心圆 |
| circle | 空心圆 |
| square | 实心方块 |
<body>
<ul type="circle">
<li>第一项</li>
<li>第二项</li>
</ul>
</body>
练习：创建一个无序列表
<!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>
<ul >
<li><a href=""><strong>脱贫主题座谈会，someone重点谈这个问题</strong></a></li>
<li><a href="">someone在重庆考察调研</a></li>
<li><a href="">someone的足迹 |《求是》杂志上的“人民中心”</a></li>
<li><a href="">一季度财政收入同比增长6.2%中国经济开局平稳</a></li>
<li><a href="">奔驰女主和解协议内容：补过生日 十年VIP</a></li>
</ul>
</body>
</html>-
有序列表
<ol>、<li>：列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表
type属性：改变前面标记的样式（一般都是用CSS去控制）
| 值 | 描述 |
| 1 | 默认值，数字有序列表（1，2，2，4） |
| a | 按字母顺序排列的有序列表，小写（a，b，c，d） |
| A | 按字母顺序排列的有序列表，大写（A，B，C，D） |
| ⅰ | 罗马字母，小写（i，ⅱ，ⅲ，ⅳ） |
| Ⅰ | 罗马字母，大写（Ⅰ，Ⅱ，Ⅲ，Ⅳ） |
练习：创建一个音乐排行
<!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>
<ol>
<li> <a href="#">都说</a> </li>
<li> <a href="#">我的祖国</a> </li>
<li> <a href="#">夜空中最亮的星</a> </li>
<li> <a href="#">父亲</a> </li>
<li> <a href="#">青花瓷</a> </li>
</ol>
</body>
</html>-
定义列表
<dl>：定义列表
<dt>：定义专业术语或名词
<dd>：对名词进行解释和描述
练习：创建定义列表
<!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>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>
</body>
</html>
-
嵌套列表
注：列表之间可以互相嵌套形成多层级列表
小练习：
<!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>
<p><strong> 好美味小吃 </strong></p>
<ul>
<li> 小吃类
<ul>
<li>煮粉干</li>
<li>拌青菜</li>
<li>蛋炒饭</li>
<li>煎蛋</li>
<li>米饭</li>
</ul>
</li>
<li> 卤味类
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>猪头肉</li>
<li>大肠</li>
<li>鱿鱼</li>
</ul>
</li>
<li> 套餐类
<ul>
<li>卤面筋饭</li>
<li>猪肉肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>
<li>卤猪舌头饭</li>
</ul>
</li>
<li> 炖罐类
<ul>
<li>猪蹄黄豆</li>
<li>猪肚莲子</li>
<li>猪心枸杞</li>
<li>羊肉枸杞</li>
<li>牛肉枸杞</li>
</ul>
</li>
</ul>
<p> <em>亲，20元以上可送餐哦！</em> </p>
</body>
</html>表格标签
- <table>：表格的最外层容器
- <tr>：定义表格行
- <th>：定义表头
- <td>：定义表格单元（具体内容）
- <caption>：定义表格标题
注：之间有嵌套关系，要符合嵌套规范
语义化标签（不具备效果，为了让表格更加规范）：<tHead>、<tBody>、<tFood>
注：在一个table中，tBody是可以出现多次的，tHead和tFoot只能出现一次。
<!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>
<caption> 天气预报 </caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022年6月21日</td>
<td> <img src="../images/weather01.jpg" alt=""></td>
<td>天气：小雨，不适宜出游</td>
</tr>
<tr>
<td>2022年6月22日</td>
<td> <img src="../images/weather02.jpg" alt=""> </td>
<td>天气：多云，适宜出游</td>
</tr>
</tBody>
</table>
</body>
</html>
表格属性
- border：表格边框（table内）
- cellpadding：单元格内的空间（table内）
- cellspacing：单元格之间的空间（table内）
- rowspan：合并行
- colspan：合并列
- align：左右对齐方式 left 、center、right
- valign：上下对齐方式 top、middle、bottom
<!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="1" cellpadding="30" cellspacing="30" >
<caption> 天气预报 </caption>
<tHead>
<tr align="right" >
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr valign="top">
<td rowspan = "2">2022年6月21日</td>
<td>白天</td>
<td rowspan="2"> <img src="../images/weather01.jpg" alt=""></td>
<td rowspan="2">天气：小雨，不适宜出游</td>
</tr>
<tr>
<!-- <td>2022年6月21日</td> -->
<td>夜晚</td>
<!-- <td> <img src="../images/weather01.jpg" alt=""></td>
<td>天气：小雨，不适宜出游</td> -->
</tr>
<tr valign="bottom">
<td rowspan = "2">2022年6月22日</td>
<td>白天</td>
<td rowspan="2"> <img src="../images/weather02.jpg" alt=""> </td>
<td rowspan="2">天气：多云，适宜出游</td>
</tr>
<tr>
<!-- <td>2022年6月22日</td> -->
<td>夜晚</td>
<!-- <td> <img src="../images/weather02.jpg" alt=""> </td>
<td>天气：多云，适宜出游</td> -->
</tr>
</tBody>
</table>
</body>
</html>
练习：创建如下表格
<!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="1" cellpadding="50">
<tHead>
<tr>
<th>班次名称</th>
<th>科目</th>
<th>授课内容</th>
<th>增值服务</th>
<th>课时</th>
<th>价格</th>
<th>试听</th>
<th>购买</th>
</tr>
</tHead>
<tBody>
<tr align="center" valign="middle">
<td rowspan="3"> <strong> 真题精解班 </strong> </td>
<td> 行测+申论 </td>
<td>全科历年真题精解</td>
<td rowspan="3">课后赠2套模拟卷 24小时以内答疑</td>
<td>48</td>
<td>1280元</td>
<td> <img src="../images/listen.jpg" alt="" width="50" height="50"> </td>
<td> <img src="../images/shopping-trolley.jpg" alt="" width="50" height="50"> </td>
</tr>
<tr>
<td> 行测 </td>
<td>行测历年真题精解</td>
<td>32</td>
<td>980元</td>
<td><img src="../images/listen.jpg" alt="" width="50" height="50"> </td>
<td><img src="../images/shopping-trolley.jpg" alt="" width="50" height="50"> </td>
</tr>
<tr>
<td> 申论 </td>
<td>申论历年真题精解</td>
<td>16</td>
<td>580元</td>
<td><img src="../images/listen.jpg" alt="" width="50" height="50"> </td>
<td><img src="../images/shopping-trolley.jpg" alt="" width="50" height="50"> </td>
</tr>
<tr align="center" valign="middle">
<td rowspan="3"> <strong> 高分技巧班 </strong> </td>
<td> 行测+申论 </td>
<td>全科强化技巧</td>
<td rowspan="3">入学试卷测评 24小时以内答疑</td>
<td>32</td>
<td>980元</td>
<td> <img src="../images/listen.jpg" alt="" width="50" height="50"> </td>
<td> <img src="../images/shopping-trolley.jpg" alt="" width="50" height="50"> </td>
</tr>
<tr align="center" valign="middle">
<td> 行测 </td>
<td>行测速解技巧强化</td>
<td>18</td>
<td>680元</td>
<td> <img src="../images/listen.jpg" alt="" width="50" height="50"> </td>
<td> <img src="../images/shopping-trolley.jpg" alt="" width="50" height="50"> </td>
</tr>
<tr align="center" valign="middle">
<td> 申论 </td>
<td>申论速解技巧强化</td>
<td>14</td>
<td>580元</td>
<td> <img src="../images/listen.jpg" alt="" width="50" height="50"> </td>
<td> <img src="../images/shopping-trolley.jpg" alt="" width="50" height="50"> </td>
</tr>
</tBody>
</table>
</body>
</html>表单标签（可以不需要执行严格的嵌套规范）
- <form>：表单的最外层容器
- <input>：（单标签）标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
| type属性 | 含义 |
| text | 普通的文本输入框 |
| password | 密码输入框 |
| checkbox | 复选框 |
| radio | 单选框 |
| file | 上传文件 |
| submit | 提交按钮 |
| reset | 重置按钮 |
单选框能同时选中两个，不符合我们的需求
<input type="radio">男
<input type="radio">女
解决方案：（通过name属性添加一个值，值为自定义的，使这两个变成一组）
<input type="radio" name="gender">男
<input type="radio" name="gender">女- <textarea>多行文本框
- <select>、<option>：下拉菜单
- <label>辅助表单
属性：
<input type="text" placeholder="请输入用户名"> placeholder：未输入时的提示信息
<input type="checkbox" checked>苹果 checked：自动选中苹果
<input type="checkbox" disabled>葡萄 disabled：禁止选中
<option selected>上海</option> selcted：该选项被选中出现在文本框内
<option selected disabled> 请选择 </option> 只有selected时，选项中会出现'请选择'这个选项，加入disabled '请选择'会出现但不能选择
<select size="2"> </select> size：让下拉菜单显示项数
<select multiple > </select> multiple：可以多选，通过鼠标滑动或ctrl，可以用到上传文件中
<input type="radio" name="gender" id="man"><label for="man">男</label> label：让选中范围更大 注：id与for要对应
<body>
<form action="提交表单的地址">
<h2>输入框：</h2>
<input type="text" placeholder="请输入用户名"> <!-- placeholder：未输入时的提示信息 -->
<h2>密码框：</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked>苹果 <!-- checked：自动选中苹果和香蕉 -->
<input type="checkbox" checked>香蕉
<input type="checkbox" disabled>葡萄 <!-- disabled：禁止选中 -->
<h2>单选框</h2>
<!-- <input type="radio">男
<input type="radio">女 -->
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select >
<!-- 只有selected时，选项中会出现'请选择'这个选项，加入disabled '请选择'会出现但不能选择-->
<option selected disabled> 请选择 </option>
<option >北京</option>
<!-- selcted：该选项被选中出现在文本框内 -->
<!-- <option selected>上海</option> -->
<option >上海</option>
<option >杭州</option>
</select>
<select size="2"> <!-- size：让下拉菜单显示项数 -->
<option >北京</option>
<option >上海</option>
<option >杭州</option>
</select>
<select multiple > <!-- multiple：可以多选，通过鼠标滑动或ctrl，可以用到上传文件中 -->
<option >北京</option>
<option >上海</option>
<option >杭州</option>
</select>
<!-- label：让选中范围更大 -->
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
</form>
</body>表格和表单的组合
先写表单，因为没有嵌套规范
<!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>
<form action="">
<table border="1" cellpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名：</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码：</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
</body>
</html>练习：
<!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>
<form >
<table>
<tr>
<td>电子邮箱：</td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>设置密码：</td>
<td> <input type="password"> </td>
</tr>
<tr>
<td>真实姓名：</td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>性别：</td>
<td> <input type="radio" name="gender" id="man"><label for="man">男</label> <input type="radio" name="gender" id="woman"><label for="woman">女</label> </td>
</tr>
<tr>
<td>生日：</td>
<td>
<select>
<option selected disabled>请选择</option>
<option > 1999</option>
<option > 2000</option>
<option > 2001</option>
<option > 2002</option>
<option > 2003</option>
</select>
年
<select>
<option selected disabled>请选择</option>
<option > 1</option>
<option > 2</option>
<option > 3</option>
<option > 4</option>
<option > 5</option>
<option > 6</option>
<option > 7</option>
<option > 8</option>
<option > 9</option>
<option > 10</option>
<option > 11</option>
<option > 12</option>
</select>
月
<select>
<option selected disabled>请选择</option>
<option > 1</option>
<option > 2</option>
<option > 3</option>
<option > 4</option>
<option > 5</option>
<option > 6</option>
<option > 7</option>
<option > 8</option>
<option > 9</option>
<option > 10</option>
<option > 11</option>
<option > 12</option>
<option > 13</option>
<option > 14</option>
<option > 15</option>
<option > 16</option>
<option > 17</option>
<option > 18</option>
<option > 19</option>
<option > 20</option>
<option > 21</option>
<option > 22</option>
<option > 23</option>
<option > 24</option>
<option > 25</option>
<option > 26</option>
<option > 27</option>
<option > 28</option>
<option > 29</option>
<option > 30</option>
<option > 31</option>
</select>
日
</td>
</tr>
<tr>
<td>我现在：</td>
<td>
<select >
<option selected disabled> 请选择身份 </option>
<option > 学生 </option>
<option > 老师 </option>
<option > 教授 </option>
<option > 后台管理人员 </option>
</select>
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text">
</td>
</tr>
</table>
<a href=""><strong> 立即注册 </strong> </a>
</form>
</body>
</html>注意：1.<td>不宜使用过多，不宜嵌套使用，会无故多处一段距离
2.select标签内部除了option其他的东西最好不要加，可能会被吞掉
3.<a href=""><strong> 立即注册 </strong> </a>写在table内部，浏览器会自动将他放在最顶部
<div>与<span>
<div>（块）：全称division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span（内联）：用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。
案例：
<!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>
<h2><a href=""><span>HTML5</span>-百度百科</a></h2>
<a href=""> <img src="https://bkimg.cdn.bcebos.com/pic/728da9773912b31b7096bff48418367adbb4e171?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto" alt=""> </a>
<p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范..</p>
<p> <a href="">简介</a> <a href="">发展历程</a> <a href="">新特性</a> <a href="">优缺点</a> <a href="">技术要点</a> <a href="">更多</a></p>
<a href="">百度百科</a>
</div>
</body>
</html>CSS基本语法
格式： 选择器{属性1:值1;属性2:值2}最后一组值后的分号可写可不写
单位：
- px ->像素（pixel）
- % ->百分比（跟外容器相比，假设外容器为600px，当前容器为50%，则他的像素值为300px）
基本样式：width（宽）、height（高）、background-color（背景颜色）
CSS注释：/* 注释内容 */（shift + alt + A、ctrl + /）
内联样式与内部样式
- 内联（行内、行间）样式：在html标签上添加style属性来实现的
- 内部样式：在<style>标签内添加的样式
注：内部样式的优点，可以复用代码，符合W3C的规范标准，进行让结构和样式分开
<style>
div{width:100px;height:100px;background-color: red;}
</style>
<div style="width:100px;height:100px;background-color: red" red}>
这是一个块
</div>外部样式
引入一个单独的CSS的文件：name.CSS
- 通过 <link>标签（一般写在meta和title之间）引入：rel属性规定当前文档与被连接文档之间的关系、href属性表示资源的地址
| 值 | 属性 |
| alternate | 文档的替代版本（如打印页、翻译或镜像） |
| stylesheet | 文档的外部样式表 |
| start | 集合中的第一个文档 |
| next | 集合中的下一个文档 |
| prev | 集合中的上一个文档 |
| contents | 文档的目录 |
| index | 文档的索引 |
| glossary | 在文档中使用的词汇的术语表（解释） |
| copyright | 包含版权信息的文档 |
| chapter | 文档的章 |
| section | 文档的节 |
| subsection | 文档的小节 |
| appendix | 文档的附录 |
| help | 帮助文档 |
| bookmark | 相关文档 |
/* 外部写一个CSS，通过link他们联系起来 */
div{width: 100px; height: 100px; background-color: red;}<!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">
<link rel="stylesheet" href="./common.css">
<title>Document</title>
</head>
<body>
<div>
这是一个块
</div>
</body>
</html>- 通过 @import 引入（写在<style>标签内），作为了解，这种方式有很多问题，不建议使用
<style>
@import url("./common.css");
</style>link与@import的区别：
1.从属关系区别：
@import使CSS提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载出CSS文件，还可以定义RSS、rel连接属性等
2.加载顺序区别：
加载页面时，link标签引入的CSS被同时加载；@import引入的CSS将在页面加载完毕后被加载
3.兼容性区别：
@import是CSS2.1 才有的语法，故只可在IE5+才能识别；link标签作为HTML元素，不存在兼容性问题
4.DOM可控性区别：
可以通过JS操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式
5.权重区别（有争议）：
link引入的样式权重大于@import引入的样式
CSS中的颜色表示法
- 单词表示法：red、yellow、green...（有局限性）
- 十六进制表示法：0 1 2 3 4 5 6 7 8 9 a b c d e f 写法：# + 六位数
<style> div{background-color: #ffffff;} </style> - RGB三原色表示法：rgb(255,255,255); 取值范围：0 ~ 255
获取网页中的颜色：
FeHelper（需要联网才能识别）
Photoshop：拿到图片 -> 放入ps中 -> 吸管工具 -> 颜色会在拾色器中显示
小练习：创建一个100*100红色的方块，一个200*150蓝色的方块
<!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">
<!-- <link rel="stylesheet" href="./common.css"> -->
<title>Document</title>
</head>
<body>
<div style=" width: 100px; height: 100px; background-color: rgb(255, 0, 0);"> 这是红色的方块 </div>
<p> </p>
<div style="width: 200px; height: 150px; background-color: rgb(0,0,255); ">这是蓝色小方块</div>
</body>
</html>CSS背景样式
-
background-color：背景颜色
-
background-image：背景图片 url(背景地址)
background-image与img有什么区别：img主要是用于展示（文章、广告）；背景图则是用于网 站中的修饰、小的图标等，且他会水平垂直把我们导入的图铺满在设定的区间
<style>
div{width: 300px; height: 300px;
background-color: rgb(255,0,0);
background-image: url(../images/weather01.jpg);}
</style>
-
background-repeat：背景图片的平铺方式
repeat(x,y):默认
background-repeat:repeat(x,y);
repeat-x ：x轴平铺
background-repeat: repeat-x;
repeat-y：y轴平铺
background-repeat: repeat-y;
no-repeat：都不平铺
background-repeat: no-repeat;
-
background-position：背景图片的位置
x y值的设定：
1.数字设定（负表示左上，正表示右下）
background-position: 100px 100px;
background-position: 50% 50%;2.英文单词表示： x（left、center、right） y（top、center、bottom）
background-position: right bottom;-
background-attachment：背景图随滚动条的移动方向
scroll：默认值（添加一个滚动条使效果明显） 背景位置是按照当前元素进行偏移的
<style>
body{height: 1000px;}
div{width: 300px; height: 300px; background-color: rgb(255,0,0);background-image: url(../images/weather01.jpg); background-repeat:no-repeat;
background-position: 50% 50%;
background-attachment: scroll;
}
</style>fixed：背景固定 背景位置是按照浏览器进行偏移的
我们将背景图位置设置为50% 50%，scroll偏移时是按照我们所设定的空间进行偏移的，但是如果选择fixed，背景图是按照浏览器来进行偏移，背景图会在浏览器的中央，如果规定的区间不不够大，是看不到背景图的，要观察到背景图片，需要将规定区间设置的更大些
练习：利用滚动条移动方式实现视觉差网站（利用背景固定实现）
<!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>
<style>
#div1{width: 1500px; height: 1000px;
background-image: url(../images/sxx2.jpg);
background-attachment: fixed;
}
#div2{width: 1500px; height: 1000px;
background-image: url(../images/sxx3.jpg);
background-attachment: fixed;
}
#div3{width: 1500px; height: 1000px;
background-image: url(../images/sxx1.jpg);
background-attachment: fixed;
}
<!-- 内容背景颜色 -->
table{background-color: white;}
</style>
</head>
<body>
<div id="div1">
<!-- 任意内容 -->
</div>
<div id="div2">
<!-- 任意内容 -->
</div>
<div id="div3">
<!-- 任意内容 -->
</div>
</body>
</html>CSS边框样式
- border-style：边框的样式 solid：实线 dashed：虚线 dotted：点线
- border-width：边框的大小 px...
- border-color：边框的颜色 red #f00...
<style>
div{ width: 300px; height: 300px;
border-style: solid;
border-color: red;
border-width: 2px;
}
</style>注：边框可以针对某一条边进行单独设置
border-left-style（中间为方向：left、right、bottom） border-left-width border-left-color
小练习：利用边框实现三角形
<style>
div{
width: 0px; height: 0px;
border-top-color: white;
border-top-style: solid;
border-top-width: 30px;
border-right-color: red;
border-right-style: solid;
border-right-width: 30px;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 30px;
border-left-color: white;
border-left-style: solid;
border-left-width: 30px;
}
</style>如果背景色不为白色？
升级：颜色可以设置为透明颜色 transparent
<style>
body{background-color: green;}
div{
width: 0px; height: 0px;
border-top-color: transparent;
border-top-style: solid;
border-top-width: 30px;
border-right-color: red;
border-right-style: solid;
border-right-width: 30px;
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 30px;
border-left-color: transparent;
border-left-style: solid;
border-left-width: 30px;
}
</style>向上的三角形：
<style>
body{background-color: rgb(102, 112, 241);}
div{
width: 0px; height: 0px;
border-top-color: transparent;
border-top-style: solid;
border-top-width: 30px;
border-right-color: transparent;
border-right-style: solid;
border-right-width: 30px;
border-bottom-color: rgb(236, 71, 120);
border-bottom-style: solid;
border-bottom-width: 30px;
border-left-color: transparent;
border-left-style: solid;
border-left-width: 30px;
}
</style>CSS文字样式
- font-family：字体类型
英文字体：Arial、'Times New Roman'
中文字体：微软雅黑（默认）、宋体
中文字体的英文名称：微软雅黑 -> 'Microsoft YaHei' 宋体 -> SimSun
div{ font-family: Arial; }
div{ font-family: 'Times New Roman'; }
div{ font-family: 宋体; }- 衬线体与非衬线体
衬线体（有棱角）：
宋体为一种衬线体
非衬线体（平滑）：
微软雅黑为一种非衬线体
注意事项：
1.设置多字体方式（会设置比较多的字体作为备选方案，怕出现用户计算机中没有这种字体）
2.引号的问题：字体类型中出现空格必须用单引号引起来
- font-size：字体大小
默认大小：16px
写法：（不推荐使用，可能不为偶数）
| 属性取值 | 字体大小 |
| xx-small | 最小 |
| x-small | 较小 |
| small | 小 |
| medium | 正常（默认值） 16px |
| large | 大 |
| x-large | 较大 |
| xx-large | 最大 |
注意：字体大小一般为偶数，方便文字对齐。
- font-weight：字体粗细
模式：正常（normal） 加粗（bold） 也可以设置数值 （100 ~ 900）100~500正常 600~900加粗
- font-style：字体样式
模式：正常（normal） 斜体（italic 、oblique :区别在于前者是只可以设置带有倾斜属性的字体，后者可以设置不带有倾斜属性的字体；后者用的较少，了解即可，如果不带有倾斜属性的字体让其倾斜可能会很怪）
- color：字体颜色 （#000）
<style>
div{ font-family: 宋体，华文彩云;
font-size: x-large;
font-weight: 900;
font-style: italic;
color:red
}
</style>CSS段落样式：
- text-decoration：文本修饰
下划线 underline 删除线 line-through 上划线 overline 不添加任何装饰：none
添加多个（空格隔开）
p{width:300px; text-decoration: underline overline line-through;}- text-transform：文本大小写 （针对英文段落）
全部转大写：uppercase 全部转小写：lowercase 让每个单词首字母大写：capitalize
- text-indent：文本缩进
首行缩进效果：默认一个文字16px，首行缩进2个字32px
文字大小改变，如何设置缩进更方便？——em单位：相对单位，1em永远都是跟字体大小相同
p{text-indent: 2em ; font-size: 16px;}- text-align：文本对齐方式
左对齐：left 右对齐：right 居中对齐：center 两端点对齐：justify
- line-height：定义行高
行高由 = 上边距（每行等价） + 字体大小 + 下边距（每行等价） 上下边距也等价
默认行高不为固定值，随字体大小而变化
取值：1、number（？px） 2、scale（比例值，跟文字大小成比例 如设置为2，则行高为文字大小的2倍）
- letter-spacing：定义字间距
- word-spacing：定义词间距（针对英文）
p{letter-spacing: 5px;}
div{word-spacing: 10px;}强制折行：（英文和数字不自动折行问题）
- word-break：break-all；（非常强烈的折行）
- word-wrap：break-word；（不是那么强烈的折行，解决）
区别：后者会产生一些空白的区域
同时也可以解决当一个单词过于长已经超出了我们所规定的空间
练习：完成下图的个人简介
<!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>
<style>
div{width: 800px; height: 600px;}
h1{text-align: center ; color: #ff6a18;}
h2{text-indent: 2em; color: #0196ff;}
#p1{text-indent: 2em ; font-style: italic; font-weight: bold;}
#p2{text-indent: 2em ;color: #9bec2d;line-height: 30px;}
#p3{text-indent: 2em; color: #73d8e5;line-height: 30px; font-style: italic; text-decoration: underline;}
#p4{text-indent: 2em; letter-spacing: 10px; line-height: 30px; font-weight: bold;}
#p5{text-indent: 2em;line-height: 30px;color: #cc00cc;}
</style>
</head>
<body>
<div>
<h1>Angelababy简介</h1>
<h2>基本信息</h2>
<p id="p1">
杨颖（Angelababy）,1989年2月28日出生于上海，13岁时移居香港，中国影视女演员。
</p>
<p id="p2">2009年主演电影《全城热恋》。2012年，凭借爱情篇《第一次》获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗、杨幂、倪妮共同当选新一代“四小花旦”；同年在徐克导演的影片《狄仁杰之神都龙王》中担任女主角，并且获得第21届北京大学生电影节最受欢迎女演员奖；4月，Angelababy主演电视剧《大汉情缘之云中歌》。2014年加盟综艺节目《奔跑吧兄弟》并主演电影版；同年主演顾长卫导演的电影《微爱之渐入佳境》，票房突破2.8亿。2015年5月参演好莱坞电影《独立日2》；7月，主演电影《摆渡人》。</p>
<h2>早年经历</h2>
<p id="p3">1989年2月28日，Angelababy出生于上海，中文名杨颖。杨颖自幼随家人到上海定居，在上海的演艺学校学演戏及舞蹈。13岁时，杨颖回归香港加入了Talent Bang，还担任了Viva Club Disney主持。</p>
<h2>个人生活</h2>
<p id="p4">2015年5月27日，黄晓明与Angelababy（杨颖）在青岛民政局领证完婚。</p>
<p id="p5">2015年10月8日，黄晓明和Angelababy在上海展览中心正式举办婚礼，上午8点，Angelababy工作室曝光了两人的婚纱照，照片中，两人以巴黎地标建筑为背景，浪漫亲吻。</p>
</div>
</body>
</html>CSS复合样式
一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合样式写法：
通过空格给多个属性值进行分割。复合写法有的是不需要关心顺序的，例如：background、border；有的是需要关心顺序的，例如：font。
- background：
background: red url(./img/ABC.jpg) no-repeat center center;
- border：（也可以对单独的一条边框进行操作）
border: 2px black solid;
border-right: 2px blue dashed;- font（有序）
- 最少要有两个值 size 、family（先size后family）
- weight style size family
- style weight size family
- weight style size/line-height family
div{width: 300px; height: 300px;
background: red url(./img/ABC.jpg) no-repeat center center;
/* border: 2px black solid; */
border-right: 2px blue dashed;
font: bold italic 30px/100px 宋体;
}注意：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。
复合其实是包含所有单一样式的，如果先写单一再写复合，复合中没有写单一样式内设置的样式，会将单一的样式覆盖掉。复合样式的优先级更高。
CSS选择器
ID选择器
CSS中：#elem{} html中：id="elem"
注意：
- 在一个页面中，ID值是唯一的，一个页面只能出现一次，出现多次是不规范的。
- 命名规范，字母 _ - 数字 （命名的第一位不能是数字）
- 命名方式，驼峰式（建议小驼峰）、下划线式、短线式
- 驼峰写法：searchButton（小驼峰） SearchButton（大驼峰） searchSmallButton
- 短线写法：search-small-button
- 下划线写法：search_small_button
4.命的名最好是有语义的
#div1{background: red;}
#div2{background: blue;}
<body>
<div id="div1">
这是一个块
</div>
<div id="div2">
这又是一个块
</div>
</body>ClASS选择器
CSS：.elem{} html：class="elem"
注意：
- class选择器是可以复用的，这与ID选择器是不同的点
- 可以添加多个class样式
.box{background: red;}
.content{font-size: 30px;}
<body>
<div class="box content">
这是一个块
</div>
<div class="box">
这又是一个块
</div>
<p class="content">
这是一个段落
</p>
</body>3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
.box{background: red;}
.content{font-size: 30px; background: blue;}
.content{font-size: 30px; background: blue;}
.box{background: red;}
4.标签+类的写法（只想要带box的p标签改变）
<style>
p.box{background: red;}
</style>
<body>
<div class="box">
这是一个块
</div>
<div class="box">
这又是一个块
</div>
<p class="box">
这是一个段落
</p>
</body>
标签选择器/TAG选择器
CSS：div{} html：<div>
使用场景：
- 去掉某些标签的默认样式时
- 复杂的选择器中，如 层次选择器
群组选择器/分组选择器
CSS：div，p，span{}
可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。
<style>
div,#text,.title{background: red;}
</style>
<body>
<div>
这是一个块
</div>
<p id="text">
这是一个段落
</p>
<h2 class="title">这是一个标题</h2>
</body>通配选择器
*{ } -> div,ul,li,p,h1,h2...{ }
注：尽量避免使用，因为会给所有的标签添加样式
使用场景：去掉所有标签的默认样式时
<style>
*{ border: 1px red solid;}
</style>
<body>
<div>
这是一个块
</div>
<p id="text">
这是一个段落
</p>
<h2 class="title">这是一个标题</h2>
</body>
层次选择器
- 后代： M N（空格隔开）
让ul标签下的li有样式，类似于在指定的条件下（M），找指定的集合（N）。
<style>
#list li{border: 1px red solid;}
</style>
<body>
<ul id="list">
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
- 父子：M > N（不关心孩子的孩子，只对孩子起作用）
<style>
#list>li{border: 1px red solid;}
</style>
<body>
<ul id="list">
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
- 兄弟：M~N（当前M下面的所有兄弟N标签）
<style>
div~h2{background: red;}
</style>
<body>
<h2>这是一个标题</h2>
<div>这是一个块</div>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
</body>
- 相邻：M + N（当前M相邻的N标签）
<style>
div+h2{background: red;}
</style>
<body>
<h2>这是一个标题</h2>
<div>这是一个块</div>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<h2>这是一个标题</h2>
</body>
属性选择器
| 选择器 | 说明 |
| M[attr] | M元素选择指定为attr属性的集合 |
| M[attr=value] | M元素选择指定为attr属性和value值的集合 |
| M[attr*=value] | M元素选择指定为attr属性并且包含值为value的集合 |
| M[attr^=value] | M元素选择指定为attr属性并且起始值为value的集合 |
| M[attr$=value] | M元素选择指定为attr属性并且结束值为value的集合 |
| M[attr1][attr2] | M元素选择满足多个属性的集合 |
<style>
div[class]{background: red;} /* 只会选择有class的div */
</style>
<body>
<div>aaaaaa</div>
<div class="box">aaaaaa</div>
<div class="search">aaaaaa</div>
</body>
<style>
div[class=box]{background: red;} /* 只会选择class=box的div */
</style>
<body>
<div>aaaaaa</div>
<div class="box">aaaaaa</div>
<div class="search">aaaaaa</div>
</body>
<style>
div[class=box]{background: red;} /* 只会选择class=box的div */
div[class=search]{background: blue;} /* 只会选择class=search的div */
</style>
<body>
<div>aaaaaa</div>
<div class="box">aaaaaa</div>
<div class="search">aaaaaa</div>
</body>
<style>
div[class=box]{background: red;}
div[class*=search]{background: blue;}
</style>
<body>
<div>aaaaaa</div>
<div class="box">aaaaaa</div>
<div class="search">cccccc</div>
<div class="search-button">dddddd</div>
</body>
<style>
div[class=box]{background: red;}
div[class^=search]{background: blue;}
</style>
<body>
<div>aaaaaa</div>
<div class="box">aaaaaa</div>
<div class="search">cccccc</div>
<div class="search-button">dddddd</div>
<div class="button-search">eeeeee</div>
</body>
<style>
div[class=box]{background: red;}
div[class$=search]{background: blue;}
</style>
<body>
<div>aaaaaa</div>
<div class="box">aaaaaa</div>
<div class="search">cccccc</div>
<div class="search-button">dddddd</div>
<div class="button-search">eeeeee</div>
</body>
<style>
div[class][id]{background: red;}
</style>
<body>
<div>aaaaaa</div>
<div class="box" id="elem">aaaaaa</div>
<div class="search">cccccc</div>
<div class="search-button">dddddd</div>
<div class="button-search">eeeeee</div>
</body>
总结：（在M[attr]{ }中）
- =：完全匹配
- *=：部分匹配
- ^=：起始匹配
- $=：结束匹配
- [ ][ ][ ]：组合匹配
伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
:link 访问前的样式 :visited 访问后的样式
<style>
a:link{color: red;}
a:visited{color: green;}
a:hover{color: grey;}
a:active{color: hotpink;}
/* 点击后刷新仍然是绿色，要清空后台清除访问记录 */
</style>
<body>
<a href="#">这是一个链接</a>
</body>:hover 鼠标移入时的样式 :active 鼠标按下的样式
<style>
div{width: 200px; height: 200px; background: red;}
div:hover{background: blue;}
div:active{background: green;}
</style>
<body>
<div></div>
</body>注意：
- link、visited只能给a标签添加，hover和active可以给所有标签添加
- 如果四个伪类都生效，一定要注意顺序：L V H A
- 一般网站只这样去设置：a{ } a:hover{ }
<style>
a{color: red;}
a:hover{color: grey;}
</style>
<body>
<a href="#">这是一个链接</a>
</body>:after :before 通过伪类的方式给元素添加一个文本内容
:checked :disabled 都是针对表单元素的
:focus 获取光标
<style>
div:after{content:"world"; color: red;}
</style>
<body>
<div>hello</div>
</body> <style>
:checked{width: 100px; height: 100px;}
:disabled{width: 50px; height: 50px;}
:focus{background:red;}
</style>
<body>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" disabled>
<input type="text">
</body>
伪类选择器
结构性伪类：
:nth-of-type() :nth-child()
括号内可以是从1开始的数字，表示第一项；也可以是n值，n表示从0~∞，可以实现隔行改样式
<style>
li:nth-of-type(3){background: red;} /* 对第三个li执行 */
li:nth-of-type(2n){background: seagreen;}/* 对第2、4、6...项 li执行*/
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>:nth-of-type() 和 :nth-child() 的区别是：type表示类型，child表示孩子
:first-of-type 对第一个执行 :first-child
:last-of-type 对最后一个执行 :last-child
:only-of-type 仅有一个时执行，有任何别的都不能添加，就算是只有一项 :only-child
CSS样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承
（可以根据控制台查看哪些是被继承的；默认是不能被继承的，但是可以设置继承属性inherit值）
<style>
div{width: 300px ;height: 300px; border: 2px red solid; color: red; font-size: 30px;}
p{border: inherit;}
<body>
<div>
<p>这是一个段落</p>
</div>
</body>思考：跟文字相关的有多少种样式呢？ 这些样式是否都能被继承？
无继承的属性：vertical-align text-decoration width height margin类 border类 padding类 background类 content类 size
有继承的属性：font类 text-indent text-align text-transform color
CSS优先级
相同样式优先级：当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
内部样式与外部样式：内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
单一样式优先级：style行间 > id > class > tag > * > 继承
注意： style行间 权重 1000 （权重代表等级）
id 权重 100
class 权重 10
tag 权重 1
!important:提升样式优先级，非规范方法，不建议使用（不能针对继承的属性进行优先级的提升）
<style>
#elem{color: red !important;}
</style>标签+类与单类： 标签+类 > 单类
<style>
.box{color: burlywood;}
div.box{color: blue;}
</style>群组优先级：群组选择器与单一选择器的优先级相同，靠后写的优先级高
<style>
div,p{color: burlywood;}
div{color: cadetblue;}
</style>
<style>
div,p{color: burlywood;}
div{color: cadetblue;}
</style>层次优先级
1.权重比较（尽量别写太多，三层以内即可）
ul li .box p input{ } 权重：1 + 1 + 10 + 1 + 1
.hello span #elem{ } 权重：10 + 1 + 100
2.约分比较（相同等级的约去）
ul li .box p input{ } 约分后： li p input{ }
.hello span #elem{ } 约分后：#elem{ }
注意：相同的标签写在一起权重为一个标签的权重，权重只是代表等级，与标签的数量无关
比如：多个ul与1个.box相比，后者的权重仍然会大于前者
CSS盒子模型
组成：content -> padding -> border -> margin
与快递相类似： 物品 填充物 包装盒 盒子与盒子之间的间距
content：内容区域 weight和height组成
padding：内边距（内填充）
只写一个值：30px（上下左右）
写两个值：30px 40px （上下、左右）
写四个值：30px 40px 50px 60px（上、下、左、右）
margin：外边距（外填充）
只写一个值30px（上下左右）
写两个值：30px 40px （上下、左右）
写四个值：30px 40px 50px 60px（上、下、左、右）
单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom
注意：
- 背景颜色会填充到margin以内的区域（不包括margin区域且不能修改）
- 文字会在content区域
- padding不能出现负值，margin是可以出现负值的
<style>
#box{width: 200px; height: 200px; background: red;
border: 20px blue solid;
padding: 30px;
margin: 10px;
}
#box2{width: 150px; height: 100px; background: rgb(89, 92, 221);
border: 20px rgb(96, 218, 85) solid;
color: blueviolet;
}
</style>
<body>
<div id="box">这是一个盒子</div>
<div id="box2">这又是一个盒子</div>
</body>- box-sizing：
box-sizing属性允许您以特定的方式匹配某个区域的特定元素。取值为content-box（默认值）| border-box。
表示盒尺寸，可以改变盒子模型的展示形态。默认值为：content-box：width height ->content
border-box：width height ->content padding border
使用场景：1、不用再去计算一些值 2、解决一些100%的问题
<style>
#box{width: 200px; height: 200px; background: red;
border: 20px blue solid;
padding: 30px;
box-sizing: border-box;
}
input{width: 100%; padding: 30px; box-sizing: border-box;}
</style>
<body>
<div id="box">这是一个盒子</div>
<input type="text">
</body>- margin叠加
当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题，会取上下中值较大的。这个问题，只在上下有，左右时没有这个叠加问题的。
#box1{width: 200px;height: 200px; background: red;margin-bottom: 30px;}
#box2{width: 200px;height: 200px; background: blue;margin-top: 30px;}
#box1{width: 200px;height: 200px; background: red;margin-bottom: 30px;}
#box2{width: 200px;height: 200px; background: blue;margin-top: 70px;} 
解决方法：1、BFC规范 2、想办法只给一个元素添加间距
- margin传递
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向时没有传递问题的。
#box1{width: 200px; height: 200px; background: red;}
#box2{width: 100px;height: 100px;background: blue;margin-top: 100px;}
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body> #box1{width: 200px; height: 200px; background: red;}
#box2{width: 100px;height: 100px;background: blue;margin-left: 100px;}
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body> 
解决方案：1、BFC规范 2、给父容器加边框 3、margin换成padding
#box1{width: 200px; height: 200px; background: red;border:3px black solid;}#box1{width: 200px; height: 100px; background: red; padding-top: 100px;}
#box2{width: 100px;height: 100px;background: blue;}把盒子模型的操作添加给span标签会呈现一样的效果吗？—————会，但不完全一样，在margin叠加只出现在左右，跟上下无关。无margin传递。
- margin自适应居中
1、margin左右自适应是可以的，但是上下自适应是不行的 (如果想实现上下自适应的话，需要在后面进行学习)
margin-left:auto; margin-right:auto 或 margin:0 auto;
- 不设置content的现象：width height不设置的时候，对盒子模型的影响，会自动去计算容器大小，节省代码
两个div嵌套时，子div如果不设置width，会默认和父div的width相同，不论对div加border或时padding，子div总的width依旧会与父div相同；若设置，则不同。
#box1{width: 300px; height: 300px; background: red;}
#box2{height: 100px; background: blue;color: white;
padding-left: 30px;border-right:20px black solid;}
#box1{width: 300px; height: 300px; background: red;}
#box2{ width: 300px; height: 100px; background: blue;color: white;
padding-left: 30px;border-right:20px black solid;}
<body>
<div id="box1">
<div id="box2">这是一些内容</div>
</div>
</body> 
练习：创建如下图的盒子
<!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>
<style>
#box1{width:350px; height:350px; border: 1px black dashed;padding: 27px; }
#box2{border: 5px #d7effe solid;padding: 20px;}
#box3{background:#ffa0df ; padding: 41px;}
#box4{border: 1px white dashed; padding: 3px;}
#box5{border: 1px white dashed; padding: 49px;}
#box6{width: 100px; height: 100px;background:#96ff38; border:5px #fcff00 solid;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<div id="box5">
<div id="box6"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>用margin如何创建该盒子？
标签分类
按类型：
- block：块 div、p、ul、li、h1...
特性：1、独占一行
2、支持所有样式
3、不写宽的时候，跟父元素的宽相同
4、所占区域是一个矩形
- inline：内联 span、a、em、strong、img...
特性：1、挨在一起的，形成左右一排
2、有些样式不支持，例如 width、height、margin、padding
3、不写宽的时候，宽度由内容决定
4、所占区域不一定是矩形
5、内联标签之间会有空隙，原因：代码换行产生的。解决方案是在style内添加body{font-size:0;}，再给span添样式的里面添加font-size16px，空隙就消失； 也可以不需要解决，因为span一般是用来修饰文本的，布局一般用块标签。
- inline-block：内联块 input、select...
特性：1、挨在一起，支持框高
2、保持矩形结构
3、两个标签内会有空隙
按显示：
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
标签本身没有什么特别的，需要通过属性的方式让标签显示，如img、input等
非替换元素：将内容直接告诉浏览器，将其显示出来
只写标签就行，不需要属性 ，如h1等
注意：替换元素有自身的特性，不会完全按照标签的类型进行操作，如img属于inline，但是它可以改变宽高
按内容：
- Flow：流内容 最大的部分
- Metadate：元数据 base、command、link、meta、noscript、script、stvle、title
- Sectioning：分区 article、aside、nav、section
- Heading：标题 h1、h2、h3...h6
- Phrasing：措辞 对文本修饰，strong、em等，基本都是内联的标签
- Embedded：嵌入的 添加图片、音频、视频、框架等 audio、canvas、embed等
- Interactive：互动的 用户与界面进行交互，下拉菜单、 输入框
显示框类型
display：
- block：指定对象为块元素
- inline：指定对象为行内元素
- inline-block：指定对象为行内块元素
- none：隐藏对象
<style>
div{width: 100px;height: 100px; background: red;display: inline-block;}
</style>
<body>
<div>块1</div>
<div>块2</div>
</body> 
注意：display：none 是不占空间的隐藏
visibility：hidden 占空间的隐藏
标签嵌套规范
- ul、li dl、dt、dd table、tr、td
- 块标签可以嵌套内联标签
- 块标签不一定能嵌套块标签
例如：<div> <div></div> </div>是可以的；特殊：<p> <div></div> </p>是不符合规范的
- 内联标签不能嵌套块标签，a标签是个例外
例如：特殊：<a href=" #"> <div></div> </a>是可以的；<span> <div></div> </span>是不符合规范的。a标签里面可以写内联的，但是不能再嵌套a了。
溢出隐藏
overflow：
- visible：默认
- hidden：如下
- scroll：出现滚动条，不论内容多少，有x和y两个方向
- auto：内容多的时候会出现滚动条，内容少就不会出现，这是与scroll的区别
auto有只针对某一条边的写法：overflow-x、overflow-y针对两个轴分别设置，如：
div{width: 300px; height: 200px; border: 1px black solid;
overflow-x: auto; overflow-y: scroll;}当块中能容过多时会出现如下情况：
<style>
div{width: 300px; height: 200px; border: 1px black solid;}
</style>
<body>
<div>
溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
</div>
</body>此时，可以用overflow：
div{width: 300px; height: 200px; border: 1px black solid;overflow: hidden;}
文字有一半不显示，在边界进行裁剪
透明度与手势
opacity：0（透明，占空间）~ 1（不透明），0.5（半透明）
注意：所有的子内容也会透明，针对所有内容
解决子内同透明方法： 利用rgba():0 ~ 1,让指定样式透明而不影响其他内容
#div2{width: 100px; height: 100px; background: rgba(255,0,0,0); }最后一个数字表示的是背景的透明度；为0时，背景完全透明，文字仍然存在
cursor：手势
default（默认） 、pointer、move、help
实现自定义鼠标样式：准备图片的格式（.cur / .ico），url后一定要加auto
#div2{width: 100px; height: 100px; background: rgba(255,0,0,0.5);
cursor: url(../images/weather01.ico),auto;}最大、最小宽高
min-width max-width
min-height：当内容没有溢出时的最小高度，溢出了就按内容的多少自己调整
max-height：当内容少的时候自适应，内容多了就按设定的值并且多出的内容依然溢出
注：强化百分比单位的理解 %单位：换算 -> 以父容器的大小进行换算
一个容器怎么适应屏幕的高：容器加height：100%； body：100%； html：100%；
html,body{height:100%;}
.contrainer{height:100%;}
CSS默认样式
有些标签有默认样式，有些标签没有默认样式。
可以在调试台进行查看：选中该标签Styles内盒模型中没有其他值并且无其他样式说明该标签无默认样式
没有默认样式：div、span...
有默认样式：body(margin->8)、h1...h6(margin:上下21.440px; font-weight:bold;)、p(margin：上下16px)、ul(margin：上下16px padding：左40px；默认点：list-style:disc)、a(text-decoration:underline;)...
CSS reset
简单的CSS reset：
- *{ margin:( ) ; padding: 0 ;}
优点：不用考虑那些标签有默认的margin与padding
缺点：稍微的影响性能(单独拿出来写) body,p,h1,ul{margin: 0; padding: 0; }
- ul{ list-style: none;}
- a{ text-decoration: none; color: #666;} 重置a
- img{ display: block;}
问题的现象：图片跟容器底部有一些空隙。
内联元素的对齐方式时按照文字基线对齐，而不是文字底线对其的。
解决方案：①img{ vertical-align: bottom;}
②img{ display: block;}
写具体页面的时候或一个布局效果的时候：
- 写结构
- CSS重置样式
- 写具体样式
Photoshop工具
组成：
菜单项
工具栏
辅助面板
图片格式：
jpg=jpeg：适合色彩丰富的图片
png：可以做成半透明（网页中一般以此为主）
gif：一般为动图
注意：psd
快捷键：Ctrl + R:显示隐藏标尺；在标尺上可以拖拽参考线，可以通过移动工具拖拽回去，也可以再视图菜单中选择清除所有的参考线
图层中的小眼睛可以对当前图层进行显示隐藏
Alt + 滚轮：对图片放大缩小
PhotoShop切图
png等图片切图流程
1、通过矩形选框工具，选择指定的区域
微调： Alt 减少区域 Shift：增加区域 上下左右键进行微调
利用参考线记录量取的位置，以便测量其他的值
2、ctrl + c
3、ctrl + n
4、ctrl + v
5、存储为web格式
利用切片工具也可以
切图小练习：
<!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>
<style>
*{margin: 0; padding: 0;}
ul{list-style: none;}
img{display: block;}
a{text-decoration: none; color:#7c7c7c;}
h1,h2,h3,h4,h5,h6{font-size: 16px;font-weight: normal;}
#main{margin: 20px auto; width: 316px; border: 3px #ebedee solid;border-top: 6px #fb8e18 solid;}
#main h2{height: 45px; border-bottom: 3px #ebedee solid; line-height: 45px; /* color: black; */ padding: 13px;}
/* a标签的优先级高于h2，所以在h2中对文字设置颜色是呈现不出效果的 */
#main h2 a{color: black;}
#main h2 a:hover{color: #fb8e18;}
#main div img{margin: 8px auto 4px auto;}
#main ul{font-size: 18px;line-height: 32px;margin-bottom: 10px;}
#main ul li{ padding-left: 22px; background: url(../images/未标题-3.png) no-repeat 8px center;}
#main ul li.first-line{border-bottom: 2px #ebedee solid;padding-bottom: 2px; margin-bottom: 11px;}
#main ul a:hover{color: #fb8e18; text-decoration: underline;}
</style>
</head>
<body>
<div id="main">
<h2>
<a href=""> 探索趣图 </a>
</h2>
<div >
<a href="#">
<img src="../images/未标题-2.png" alt="">
</a>
</div>
<ul>
<li class="first-line">
<a href=""> 测试文字测试文字 </a> </li>
<li> <a href=""> 测试文字测试文字</a> </li>
<li> <a href=""> 测试文字测试文字 </a> </li>
</ul>
</div>
</body>
</html>步骤：
- 写结构
- 重置样式
- 根据结构把选择器写好
- 通过ps测量相关数值并设置好
psd图片切图流程
PS版本：cc
自动切图
自动生成器
图像资源
企业切图资源
利用工具快速获取样式
蓝湖：https://lanhuapp.com
float浮动
文档流：
文档流是文档中可显示对象在排列时所占用的位置。
float特性：
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float取值： left、right、 none（默认）
<style>
body{border: 1px black solid;}
#box1{width: 100px; height: 100px; background: yellow;float: left;}
#box2{width: 200px; height: 200px; background: red;}
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
<style>
body{border: 1px black solid;}
#box1{width: 100px; height: 100px; background: yellow;float: right;}
#box2{width: 200px; height: 200px; background: red;}
</style>
<style>
body{border: 1px black solid;}
#box1{width: 100px; height: 100px; background: yellow;float: none;}
#box2{width: 200px; height: 200px; background: red;}
</style>
<style>
body{border: 1px black solid;}
#box1{width: 100px; height: 100px; background: yellow;float: left;}
#box2{width: 200px; height: 200px; background: red;float: left;}
</style>
<style>
body{border: 1px black solid;}
#box1{width: 100px; height: 100px; background: yellow;float: left;}
#box2{width: 200px; height: 200px; background: red;float: right;}
</style>
<style>
body{border: 1px black solid;}
#box1{width: 100px; height: 100px; background: yellow;float: right;}
#box2{width: 200px; height: 200px; background: red;float: left;}
</style>
<style>
body{border: 1px black solid;}
#box1{width: 100px; height: 100px; background: yellow;float: right;}
#box2{width: 200px; height: 200px; background: red;float: right;}
</style>
float注意点：
只会影响后面的元素，对于浮动之前的元素不造成影响
<style>
body{border: 1px black solid;}
#box1{width: 100px; height: 100px; background: yellow;}
#box2{width: 200px; height: 200px; background: red;float: left;}
#box3{width: 300px; height: 300px; background: blue;}
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
内容默认提升半层，该现象可以做一些图文混排效果
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"> 文字文字文字文字文字文字</div>
</body>
默认宽根据内容决定
#box4{background: green;}
<div id="box4"> 这是一个没有宽度的块元素 </div>
#box4{background: green; float: left;}
换行排列，当浮动元素在父容器中排列不下时，会折行
特殊情况： 如果高度不同还能按顺序折行吗？
li{width: 100px; height: 100px; background: red;
border: 1px yellow solid; box-sizing: border-box;
float: left;}
li:nth-of-type(1){height: 120px;}
li:nth-of-type(1){height: 120px;}
li:nth-of-type(2){height: 80px;} 
主要给块元素添加，但也可以给内联元素添加
利用clear属性清除float浮动
上下排列：clear属性，表示清除浮动的，left、right、both
#box1{width: 100px; height: 100px; background: red; float: left;}
#box2{width: 200px; height: 200px; background: blue;clear: left;}
#box1{width: 100px; height: 100px; background: red; float: left;}
#box2{width: 200px; height: 200px; background: blue;clear: right;}
#box1{width: 100px; height: 100px; background: red; float: left;}
#box2{width: 200px; height: 200px; background: blue;clear: both;} 
嵌套排列：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素
overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响
#box1{width: 200px; border: 1px black solid; overflow: hidden;}
#box2{width: 100px; height: 200px; background: red; float: left;} 
display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素
#box1{width: 200px; border: 1px black solid; display: inline-block;}
#box2{width: 100px; height: 200px; background: red; float: left;} 
设置空标签：不推荐，会多添加一个标签
<body>
<div id="box1">
<div id="box2"> </div>
<div>这是一个空标签</div>
</div>
aaaaaaa
</body> 
解决方案：
<style>
#box1{width: 200px; border: 1px black solid;}
#box2{width: 100px; height: 200px; background: red; float: left;}
.clear{clear: both;}
</style>
<body>
<div id="box1">
<div id="box2"> </div>
/!-- <div class="clear">这是一个空标签</div> --/
<div class="clear"></div>
</div>
aaaaaaa
</body> 
after伪类：推荐，是空标签的加强版，目前各大公司的做法
（clear属性只会操作块标签，对内联标签不起作用）
<style>
#box1{width: 200px; border: 1px black solid;}
#box2{width: 100px; height: 200px; background: red; float: left;}
/* .clear:after{content: '~~~~~';} */
.clear:after{content: '';}
</style>
<body>
<div id="box1" class="clear" >
<div id="box2"> </div>
</div>
aaaaaaa
</body> 
<style>
#box1{width: 200px; border: 1px black solid;}
#box2{width: 100px; height: 200px; background: red; float: left;}
.clear:after{content: ''; clear:both; display: block;} /* 较流行，最基础语句 */
</style>
<body>
<div id="box1" class="clear" >
<div id="box2"> </div>
</div>
aaaaaaa
</body> 
小练习：利用浮动实现如下图的布局效果
<!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>
<style>
*{margin: 0; padding: 0;}
ul{list-style: none;}
img{display: block;}
a{text-decoration: none; color:#7c7c7c;}
h1,h2,h3,h4,h5,h6{font-size: 16px;}
.l{float: left;}
.r{float: right;}
.clear:after{content:""; display: block; clear: both;}
#main{width: 498px; margin: 20px auto;}
#main .title{height: 30px; line-height: 30px;font-size: 16px;
font-weight: bold; padding-left: 39px;
background: url(../images/未标题-4.png) no-repeat 7px 4px,url(../images/未标题-1.png) repeat-x ;}
/* background提供添加多背景操作，用‘，’隔开，但是要注意有顺序问题 ，先写的要在上面*/
#main ul{overflow: hidden;margin-top: 18px; }
#main li{margin-bottom: 28px;}
#main .pic{width: 132px; border: 1px solid gray; margin-left:10px;}
#main .pic img{margin: 2px;}
#main .content{width: 321px;margin-left: 16px;}
#main .content h2{font-size: 12px;line-height:32px;}
#main .content p{font-size: 12px;line-height:28px;}
</style>
</head>
<body>
<div id="main">
<h2 class="title"> 外媒评论精选 </h2>
<ul>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="../images/图1.png" alt="">
</a>
</div>
<div class="l content">
<h2> <a href="#"> 《加勒比海盗4》————商业味浓郁 </a> </h2>
<p> 本集《加勒比海盗》讲述了杰克船长所受英王所托寻找“不老泉”，与他... <a href="#"> [详细] </a> </p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="../images/图2.png" alt="">
</a>
</div>
<div class="l content">
<h2> <a href="#"> 《雷神托尔》————神话版莎翁戏剧 </a> </h2>
<p> 《雷神》由克里斯·海姆斯沃斯和今年新晋奥斯卡影后娜塔莉·波特曼... <a href="#"> [详细] </a> </p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="../images/图3.png" alt="">
</a>
</div>
<div class="l content">
<h2> <a href="#"> 《源代码》————科幻与惊悚完美结合 </a> </h2>
<p> 《源代码》由杰克·吉伦哈尔、米歇尔·莫娜汉、维拉·法梅加主演。... <a href="#"> [详细] </a> </p>
</div>
</li>
</ul>
</div>
</body>
</html>position定位
position特性：
css position属性用于指定一个元素在文档中的定位方式。top、righ、bottom、left属性则决定了该元素的最终位置。
position取值
static（默认）
relative
absolute
fixed
sticky
relative相对定位：
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其它元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的（元素左上角的点为(0，0)）
absolute绝对定位：
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
<style>
#box1{width: 300px; height: 300px;border: 1px black solid;
margin: 200px;position: relative;}
#box2{width: 100px; height: 100px;background: red;
position: absolute; left: 0;top: 0;}
</style>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>fixed固定定位
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky黏性定位
在指定的位置，进行黏性操作。
body{height: 2000px;} /* 加滚动条操作 */
div{background: red; position: sticky;top: 0;}
position: sticky;top: 0;共同作用，下拉滚动条到div区域时，再继续下拉，div不会随滚动条向下而消失。也可以改变top的值时div在不同的位置
z-index定位层级
默认层级为0（可以取负数）
嵌套时候的层级问题：写了层级的先比较同等层级的，没写用嵌套与外面的比较
#box1{width: 100px;height: 100px; background: red; position: absolute;}
#box2{width: 100px;height: 100px;background: blue;position: absolute;
left: 50px;top: 50px;}
#box1{width: 100px;height: 100px; background: red; position: absolute;z-index: 1;}
#box2{width: 100px;height: 100px;background: blue;position: absolute;
left: 50px;top: 50px;}
#box1{width: 100px;height: 100px; background: red; position: absolute;z-index: 1;}
#box2{width: 100px;height: 100px;background: blue;position: absolute;
left: 50px;top: 50px;z-index: 2;}
<body>
<div id="box1"></div>
<div id="box2"></div>
</body> 
#parent{width: 100px;height: 100px;border: 1px black solid;}
#box1{width: 100px;height: 100px; background: red; position: absolute;z-index: 0;}
#box2{width: 100px;height: 100px;background: blue;position: absolute;
left: 50px;top: 50px;z-index: -1;}
<body>
<div id="parent">
<div id="box1"></div>
</div>
<div id="box2"></div>
</body> 
#parent{width: 100px;height: 100px;border: 1px black solid;
position: absolute;z-index: 1;}
#box1 {width: 100px;height: 100px; background: red;
position: absolute;z-index: 0;}
#box2 {width: 100px;height: 100px;background: blue;
position: absolute;left: 50px;top: 50px;z-index: -1;}
#parent{width: 100px;height: 100px;border: 1px black solid;
position: absolute;z-index: -2;}
#box1 {width: 100px;height: 100px; background: red;
position: absolute;z-index: 0;}
#box2 {width: 100px;height: 100px;background: blue;
position: absolute;left: 50px;top: 50px;z-index: -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>Document</title>
<style>
*{margin:0;padding: 0;}
ul{list-style: none;}
#menu{width: 100px; height: 30px; margin: 20px auto;
border: 1px black solid;position: relative;}
#menu ul{width: 100px;border: 1px black solid;
position: absolute; left: -1px; top: 30px;
background: white;display: none;
}
p{text-align: center;}
#menu:hover ul{display: block;}
#menu ul li:hover{background: gray;}
</style>
</head>
<body>
<div id="menu">
卖家中心
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</div>
<p>测试段落测试段落测试段落测试段落</p>
</body>
</html>小练习二：定位实现居中和装饰点
居中定位：
<style>
#box1{width: 300px;height: 300px;border: 1px black solid;
position: relative;}
#box2{width: 100px; height: 100px;background: red; position: absolute ;
left: 50%;top: 50%;margin: -50px 0 0 -50px;}
</style>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>利用定位制作点：
#main ul li{ padding-left: 22px; position: relative;}
#main ul li:before{content: "";display: block;
width: 5px;height: 5px; background: orange;
position:absolute;left: 8px; top:50%;margin-top: -2px;}CSS添加省略号
width：必须有一个固定的宽
white-space：nowrap 不让内容折行
overflow：hidden 隐藏溢出内容
text-overflow：ellipsis 添加省略号
<!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>
<style>
#content{width: 200px;border: 1px black solid;white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;}
</style>
</head>
<body>
<div id="content">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</body>
</html> 
CSS Sprite
特性：
CSS雪碧也叫做CSS精灵，是一种网页应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处：
可以减少图片的质量，王爷的图片加载速度快
减少图片的请求的次数，加快网页的打开
<!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>
<style>
#box1{width: 20px;height: 21px;
background: url(../images/CSS\ Sprite.jpg) no-repeat left -596px;}
#box2{width: 300px;height: 50px; border: 1px black solid;
line-height: 50px; padding-left: 30px;
background: url(../images/CSS\ Sprite.jpg) no-repeat right -516px;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2">产品中心</div>
</body>
</html>CSS圆角
border-radius：给标签添加圆角，与圆相切
形成正圆：（border-radius: 50%）
#box{width: 200px;height: 200px; background: red;border-radius: 50%;}border-radius: ?px ?px 前一个值代表上下，后一个代表左右
border-radius: ?px ?px ?px ?px 左上 右上 右下 左下
border-radius: ?px / ?px 与椭圆进行相切
半圆：
#box{width: 300px;height: 150px; background: red;border-radius: 150px 150px 0 0 ;}HTML 与 XHTML区别？
DOCTYPE文档及编码
元素大小写
属性布尔值
属性引导
图片的alt属性
单标签写法
双标签闭合
strong 和 b、em 和 i ？
strong和em都是表示强调的标签，表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体。
区别：strong 和 em 是具备语义化的，而 b 和 i 是不具备语义化的。
引用标签
blockquote：引用大段的段落解释
q：引用小段的短语解释
abbr：缩写或首字母缩略词
<p>
<abbr title="World Health Organization">WHO</abbr>成立于1948年。<!-- title内写缩写全称 -->
</p>
address：引用文档地址信息
cite：引用著作的标题
iframe嵌套页面
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
| 属性 | 含义 |
| frameborder | 规定是否显示框架周围的边框 |
| width | 定义iframe的宽度 |
| height | 定义iframe的高度 |
| scrolling | 规定是否在iframe中显示滚动条 |
| src | 规定在iframe中引入url |
| srcdoc | 规定在iframe中显示的页面内容 |
<body>
<!-- src：引入的地址; frameborder：边框1，无边框0;
scolling：有滚动条yes，无滚动条no; 改变显示区域大小：设置width、height;
当srcdoc与src同时存在时，src失效，且srcdoc内可以添加html样式 ---
<iframe srcdoc="<h1> hello world</h1>"></iframe> -->
<iframe src="https://www.taobao.com" frameborder="0" scolling="no" ></iframe>
</body>应用场景：数据传输、共享代码，局部刷新、第三方介入等。
br 与 wbr ？
br 标签表示换行操作，而 wbr 标签表示软换行操作。
提示：如果单词太长，或者担心浏览器会在错误的位置换行，那么可以使用 wbr 元素来添加 Word Break Opportunity（单词换行时机）
pre 与 code ？
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 code 标签。虽然 code 标签通常只是把文本变成等宽字体，但它暗示着这段文字是源程序代码。
<pre>
<code>
<!-- 代码直接复制是无法显示的，需要对"<" ">"转义，但过于麻烦，可以使用markdown -->
<!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>
<body>
hello world
</body >
</html>
</head>
</code>
</pre>map 与 area ？
定义一个客服端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。area 元素永远嵌套再 map 元素内部。area 元素可定义图像映射中的区域。
area 元素的 href 属性定义区域的 url，shape 属性来定义区域的形状，coords 属性定义热区的坐标。area 能添加的热区的形状：矩形(rect)、圆形(circ)、多边形(poly)。
坐标的计算：rect 利用photoshop，取左上角和右下角的坐标即可
circ 取中心点的坐标和半径长度即可
poly 取各个点的坐标
<!-- img标签中的usemap与map中的name相关联 -->
<img src="../images/20220831144446.png" alt="" usemap="#star">
<map name="star">
<!-- <area shape="rect" coords="205 83 386 173" href="https://www.taobao.com" alt=""> -->
<!-- <area shape="circ" coords="300 130 50" href="" alt=""> -->
<area shape="poly" coords="305 99 233 156 256 250 172 197" href="" alt="">
</map>embed 与 object ？
embed 和 object 都表示能够嵌入一些多媒体，如 flash动画、插件等。基本使用没有太多的区别，主要是为了兼容不同的浏览器而已。
object 元素需要配合 param 元素一起完成。
<embed src="./img/flash.swf" type="">
<object>
<param name="movie" value="./img/flash.swf">
</object>
audio 与 viedo ?
audio 标签表示嵌入音频文件，video 标签表示嵌入视频文件。默认控件是不显示的，可通过 controls 属性来显示控件。
为了能够支持多个设备文件的兼容支持，可以配合 source 标签。
属于H5的新功能。
<!-- 无controls属性网页上不会显示，想做指定播放器样式需要配合js
loop：是否循环；autoplay：自动播放 -->
<audio src="./img/johann_sebastian_bach_air.mp3" controls loop autoplay></audio>
<video src="./img/Intermission-walk-in_512kb.mp4" controls loop autoplay></video>
<video>
<!-- 如果第一个浏览器不支持打开，第二个为备选，以此类推 -->
<source src="./img/Intermission-walk-in.ogv"></source>
<source src="./img/Intermission-walk_512kb.mp4"></source>
</video>文字注解与文字方向
ruby 标签定义 ruby 注释（中文注音或字符），rt 标签定义字符（中文注音或字符）的解释或发音。
bdo 标签可覆盖默认的文本方向。
<!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>
<style>
span{direction: rtl; unicode-bidi: bidi-override;}
</style>
</head>
<body>
<ruby>
寒<rt>hán</rt>冬
</ruby>
<p>
<!-- ltr：从左向右；rtl：从右向左 -->
<bdo dir="ltr">爱神的箭</bdo>卡后端框架爱迪生
<bdo dir="rtl">爱神的箭</bdo>卡后端框架爱迪生
</p>
<!-- 利用css实现上述操作 -->
<p>
<span>爱神的箭</span>卡后端框架爱迪生
</p>
</body>
</html>
744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
