HTML、CSS
一、HTML+CSS1.1什么是HTML、CSS1.2宇宙第一编辑器VS Code1.3Chrome浏览器1.4、深入了解网站开发 一、HTML基本操作1.web前端三大核心技术2.HTML初始代码3.HTML注释4.HTML语义化5.标题与段落6.文本修饰标签7.图片标签与图片属性8.引入文件的地址路径9.跳转链接10.跳转锚点11.特殊符号12.无序列表13.有序列表14.定义列表15.嵌套列表16.表格标签17.表格属性18.表单标签19.表格表单组合20.div与span 二、CSS基本语法1.内联样式与内部样式（css样式的引入方式）2.外部样式3.css中的颜色表示法4.背景样式5.背景实现视觉差6.边框样式7.文字样式8.css段落样式——文本修饰9.css段落样式——文本大小写10. css段落样式——文本缩进11.css段落样式——定义行高12.css段落样式——字间距与词间距13.css复合样式14.css选择器——id15.css选择器——class
一、HTML+CSS
1.1什么是HTML、CSS
（1）知识点：是制作网页的编程语言
浏览器把代码解析后的样子就是我们看到的网站
一个网站是由很多个网页组成的
查看网页代码源
（2）.html网页制作
新建一个文件夹——新建记事本——把记事本格式改成demo.html模式——打开方式（打开记事本）——输入要输入的内容——拖拽网页图标到浏览器里
1.2宇宙第一编辑器VS Code
（1）定义
VSCode，全称visual studio code，来自微软，是一个开源的、基于electron的轻量代码编译器。
（2）基本操作
自动换行：设置：文件->首选项->设置（大小、是否换行Word wrap）
学习编辑器基本使用：
创建文件：点击右键
重命名
删除
VScode快捷操作：
Ctrl+S：保存
Ctrl+a：全选
Ctrl+x、Ctrl+c、Ctrl+v：剪切、复制、粘贴
Ctrl+z、Ctrl+y：撤销、前进
shift+end：从头选中一行
shift+home:从尾部向前选中这一行
shift+alt+↓：快速复制一行
shift+↑或↓：快速移动一行
tab：向后缩进
tab+shift：向前缩进
多光标模式：alt+鼠标左键
Ctrl+D：选择相同元素的下一个
1.3Chrome浏览器
Chrome下载地址：google下载地址
1.4、深入了解网站开发
UI设计师：设计稿
web前端开发工程师（HS开发）
设计稿->代码
数据库里的数据->显示到页面
HTML：负责结构
CSS：负责样式
web后端开发工程师
一、HTML基本操作
1.web前端三大核心技术
HTML：结构
CSS：样式
JavaScript:与用户的交互行为
示例：
<style> div{color:red;font-style:italic;}</style><div>缓缓飘落的枫叶像思念，你烛火惺忪点燃岁末的秋天</div><script>let div=document.qierySelector('div');let time=null;let flag=ture;div.onmouseover=function(){ timer=setInterval(()=>{ if(flag){ div.style.color='blue'; div.style.fontstyle='normal'; } else{ div.style.color='red'; div.style.fontstyle='italic'; } flag=!flag; },500); };div.onmouseout=function(){ clearInterval(timer); };</script>2.HTML初始代码
（1）定义
每一个HTML文件都学要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的
（2）内容
<!DOCTYPE html> //文档声明：告诉浏览器这是一个html文件<html lang="en"> //html最外层标签，包裹着所有html标签代码 lang= “en”是用英文网站 lang=“zh-CN"表示中文的网站<head> <meta charset="UTF-8"> //元信息：编写网页中的一些赋值信息 charset="UTF-8”国际编码，让网页不出现乱码的情况 <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> // 网页的标题</head><body> //显示网络内容的区域</body></html>3.HTML注释
（1）写法： 在浏览器中看不到，只能在代码中看见
快捷方式添加与删除注释：Ctrl+/ （不用选中） shift+alt+a（先选中）
示例：
<body> <!-- 注释的内容--></body>(2)意义
a.暂时不用的代码注释起来，方便以后使用
b.对开发人员进行提示
4.HTML语义化
（1）定义：所谓HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写（什么样结构采用什么样的标签）
（2）标签的好处：
（3）常用标签
< h1>~< h6>标签：标题标签，h1等级最高，h6等级最低
header元素：用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框
nav元素：定义页面的导航链接部分区域
main元素：定义页面的主要内容，一个页面只能使用一次。
article元素：定义页面独立的内容，它可以有自己的header、footer、sections等
section元素：元素用于标记文档的各个部分，例如长表单文章的章节或主要部分
aside元素：一般用于侧边栏
footer元素：文档的底部信息
small元素：呈现小号字体效果
strong元素：用于强调文本
（4）标签元素周期表：
5.标题与段落
（1）h标签：标题
在一个网页中，h1标题最重要，并且一个.html文件只能出现一次h1文件，但是可以有很多h2、h3
<h1>标题</h1><h2>标题</h2><h3>标题</h3><h4>标题</h4><h5>标题 </h5> <h6>标题</h6>图片：
（2）p标签：段落
段落标题
<p>english</p>6.文本修饰标签
(1)strong标签:表示强调，会对文本进行加粗
写法：
<strong>这是一首简单的小情歌</strong>结果：
（2）em标签：表示强调，会对文本进行加粗
写法：
<em>故事的小黄花</em>结果：
（3）sub：下标文本 、 sup：上标文本
写法：
a<sub>2</sub>+b<sup>2</sup>=c<sub>3</sub>（4）del：删除文本、 ins：插入文本（一般配合文本使用的）
写法：
<ins>插入文本</ins>结果：
7.图片标签与图片属性
（1）采用标签img<单标签>：图片
scr：引入图片的地址
alt:当图片出现问题的时候，可以显示一段友好的提示文字
title：提示信息
width，height：调节文件大小
方式：
<img src="" alt="">示例：
<img src="https://ttpcstatic.dftoutiao.com/ecms/image/20220727/600x447_62e0e760d0bcb.jpeg_.webp" alt="" title="这还是一个图片的信息 " width="xxx" height="xxx">8.引入文件的地址路径
相对路径：./n
在路径中表示当前路径: …/n
<img src="./5648.png" alt=""> //图片名字…在路径中表示上一级路径(文件+文件)
<img src="./32323/5648.png" alt="">图片示例：
绝对路径
看真真正正图片所在的位置
9.跳转链接
链接标签：
标签：双标签 、
href属性：链接的地址
示例：
<a href="http://www.baidu.com">访问百度</a>target属性：可以改变链接打开的方式，默认情况下：在当前页面打开新窗口
示例：
<a href="http://www.baidu.com" target="_blank">访问百度</a>base标签：（单标签）改变标签的默认行为，写一个打开许多个窗口
<不写在body里，写在head里>
示例：
10.跳转锚点
实现一：#号、id属性
示例
<a href="#html">HTML</a><a href="#css">css</a><a href="#javascript">Javascript</a><h2 id="html">HTML超文本标记语言</h2><p> </p><h2 id="css">CSS层叠样式表</h2><p> </p><h2 id="javascript">Javascript脚本</h2><p> </p>file:///D:/22210305/10.html#html
实现二：#号、name属性
示例
<a href="#html">HTML</a><a href="#css">css</a><a href="#javascript">Javascript</a><a name="html"></a><h2>HTML超文本标记语言</h2><p> </p><a name="css"></a><h2>CSS层叠样式表</h2><p> </p><a name="javascript"></a><h2>Javascript脚本</h2><p> </p>11.特殊符号
在编写一些文本时，经常会遇到无法输入的字符，还有往一段文字中加多个空格时，页面并不会解析出多个空格 。这些特殊字符有专门的代码解决冲突
<body> <p> <dahaoren> </p></body>图片展示（翻译后）：
示例2：
<p> hello world </p> 图片展示：
12.无序列表
ul、li：列表的最外层容器、列表项（ul和li必须是组合出现的，他们之间是不能有其他标签的）。符合嵌套的规范
示例：
<ul> <li>第一项</li> <li>第二项</li> </ul>结果：
type属性：改变前面标记的样式（一般都是用css去控制）
改变形式
练习：
13.有序列表
ol、li:列表的最外层容器、列表项主要用于排行榜
示例：
<ol> <li>第一项</li> <li>第二项</li> </ol> </body>结果：
14.定义列表
列表项需要添加标题和对标题进行描述的内容
dl：定义列表
dt：定义专业术语或名词
dd：对名次进行解释和描述
示例：
<dl> <dt>你</dt> <dd>是</dd> </dl>结果：
15.嵌套列表
列表之间可以互相嵌套，形成多层级列表
<ul> <li> 江苏省 <ul> <li>南京市</li> <li>无锡市</li> <li>徐州市</li> </ul> </li> <li> 山东省 <ul> <li>济南</li> <li>青岛</li> </ul> </li></ul>成果展示：
16.表格标签
table：表格的最外层容器
tr：定义表格行
th：定义表头
td：定义表格单元
caption：定义表格标题
以上之间是有嵌套关系的，要符合嵌套规范
<body> <table> <tr> <th>日期</th> <th>天气情况</th> <th>出行情况</th> </tr> <tr> <td>2022年1月1日</td> <td><img src="./img/tianqi_1.png" alt=""></td> <td>天气晴朗，适合出行</td> </tr> <tr> <td>2022年1月2日</td> <td><img src="./img/tianqi_2.png "alt=""></td> <td>有小雨，记得带伞</td> </tr> </table></body>语义化标签：tHead、tBody、tFood
注：在一个table中，tBody是可以多次出现的，但是tHead、tFood只能出现一次
17.表格属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式
18.表单标签
不需要太多规范。
from;表单最外层容器
input：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等（有一个type属性，决定是什么控件）
还有一些常见的属性：
checked、disabled、name、for…
<body> <form> <h2>输入框：</h2> <input type="text"> <h2>密码框：</h2> <input type="password"> </form></body>成果展示：
<form action="http://www.baidu.com"> <!--提交到什么地方--> <h2>输入框：</h2> <input type="text" placeholder="请输入用户名"> <h2>密码框：</h2>成果展示：
复选框
<body> <form> <h2>输入框：</h2> <input type="text"> <h2>密码框：</h2> <input type="password"> <h2>复选框</h2> <input type="checkbox">苹果 <input type="checkbox">香蕉 <input type="checkbox">葡萄 </form></body>成果展示：
单选框：
<body> <form> <h2>单选框</h2> <input type="radio" name="任意值">男 <input type="radio" name="任意值">女 </form></body>成果展示：
上传文件：
<body> <form> <h2>上传文件</h2> <input type="file"> </form></body>成果展示：
提交按钮和重置按钮：
<body> <form> <h2>提交按钮和重置按钮</h2> <input type="submit"> <input type="reset"> </form></body>成果展示：
textarea：多行文本框
<h2>多行文本框</h2> <textarea cols="30" rows="10"></textarea>成果展示：
<h2>下拉菜单</h2> <select size="3"><!--自动出现几个选项--> <!--把size换成multpie就是第二个下拉菜单（另起一个select）--> <option selected disabled>请选择</option><!--disabled的意思是这个选项不能选--> <option>北京</option> <option>上海</option> <option >徐州</option><!--selected是指将它设为默认选项--> </select> <input type="radio" name="任意值" id="man"><label for="mam">男</label> <input type="radio" name="任意值" id="woman"><label for="woman">女</label><!--id与for后面是相应的，在这里是sex-->成果展示：
19.表格表单组合
表格表单之间可以互相组合形成数据展示效果
<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" placehodler="请输入用户名"></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> </tbody> </table> </form></body>成果展示：
20.div与span
div（块）：
div全称division，“分割、分区”的意思，div标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在div标签中，div中还可以嵌套多层div，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局
span（内联）：用来修饰文字的，div与span都是没有任何默认样式的。需要配合css才行
<body> <div> <h2><a href="#"><span style="color:red">知乎</span> - 有问题，就会有答案 </a></h2> <a href="#"><img src="" alt></a> <p>知乎，中文互联网高质量的问答社区和创作者聚集的原创内容平台，于 2011 年 1 月正式上线，以「让人们更好的分享知识、经验和见解，找到自己的解答」为品牌使命。知乎凭借认真、专业 </p> <a href="#">https://www.zhihu.com</a> </div></body>成果展示：
二、CSS基本语法
格式：
选择器{属性1：值1；属性二：值2}
单位：
px->像素（pixel）、%->百分比
基本样式：
width、height、background-color
CSS注释：
/css注释内容/
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{width:100px;height:100px; background-color:red} </style> </head> <body> <div>这是一首简单的小情歌</div> </body> </html>成果展示：
1.内联样式与内部样式（css样式的引入方式）
内联（行内、行间）样式：
在html标签上添加style属性来实现的
<style> div{width:50%；height:50px; background-color:red} </style> </head> <body> <div>这是一首简单的小情歌</div> </body> 内部样式
在
<div style="width:100px;height:100px;background-color:blueviolet">妹妹说紫色很有韵味</div><div style="width:50px;height:50px;background-color:blue">董</div><div style="width:50px;height:50px;background-color:red">双</div><div style="width:50px;height:50px;background-color:green">玉</div><!--另起一个板-->区别：内部样式的代码可以复用、复合w3c的规范标准，进行让结构和样式分开处理
2.外部样式
引入一个单独的css文件，name，css
link标签：引入外部资源
rel属性：指定资源跟页面的关系（当前文档与被链接的关系）
href属性：资源的地址
@import：通过这种方式引入外部样式（不建议，问题很多）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,inital-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--<link rel="stylesheet" href="./common.css">--> <title>Document</title> <style> @import url('./common.css'); </style> </head><body> <div>董双玉头顶的颜色就是这块的背景色 </div></body></html><!--制作链接：将文件模式改为。css模式-->成果展示
3.css中的颜色表示法
1.单词表示法：red、green等
颜色的英文代码：
2.十六进制表示法：
0 1 2 3 4 5 6 7 8 9 a b c d e f
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ background-color:#000000} </style> </head> <body> <div>这是一首简单的小情歌</div> </body> </html>成果展示：
3.rgb三原色表示法：rgb(255,255,255)
取值范围：0~255
提取颜色的下载地址：https：//www.daidufe.com/fehelper
photoshop
4.背景样式
1.background-color:背景颜色
2.background-image:背景图片
【url背景地址】
默认：会水平垂直都铺满背景图
3.background-repeat:背景图片的平铺方式
repeat-x：x轴平铺
repeat-y：y轴平铺
repeat（x,y都进行平铺，默认值）
no-repeat:都不平铺
4.background-position:背景图片的位置
x y:number （px、%）单词
x:left、center、right
y：top、center、bottom
5.background-attachment:背景图片随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed：（背景位置是按照浏览器进行偏移的）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width：3000px；height：3000px； background-color:red; background-image:url(./img/256.jpg);/*图片位置*/ background-repeat:no-repeat ; background-position:right center; background-attachment: scroll /*fixed*/ } </style> </head> <body> <div></div> </body> </html>5.背景实现视觉差
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{width:1400px;height:800px;background-image:url(./img/1.jpg);background-attachment: fixed;} div{width:1400px;height:800px;background-image:url(./img/2.jpg);background-attachment: fixed;} div{width:1400px;height:800px;background-image:url(./img/3.jpg);background-attachment: fixed;} </style> </head> <body> <div id="div2"></div> <div id="div3"></div> <div id="div1"></div></body> </html>6.边框样式
border-style:边框的样式
solid：实线
dashed：虚线
dotted：点线
border-width:边框的大小（px…）
border-color:边框的颜色(red，#…)
注：针对某一条边进行单独设置
（圆角边框）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{width:300px;height:300px;border-/*right- 上下左右针对某一条边进行设置，放在中间*/style:dashed;border-color:red; border-width:10px;} </style> </head> <body> <div></div></body> </html>成果展示：
练习.利用边框实线三角形
边框加颜色：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{width:300px;height:300px; border-top-style:solid; border-top-color:green; border-top-width:100px; border-bottom-style:solid; border-bottom-color:red; border-bottom-width:100px; border-left-style:solid; border-left-color:blueviolet; border-left-width:100px; border-right-style:solid; border-right-color:yellow; border-right-width:100px; } </style> </head> <body> <div></div></body> </html>成果展示：
三角形：
方法一：（将width与height设置为0，在讲其他方块颜色设置为背景色/不是白色，是与背景图相同的颜色/）
方法二：将每个方块颜色设置为透明色（transparent）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{width:0px;height:0px; border-top-style:solid; border-top-color:transparent; border-top-width:100px; border-bottom-style:solid; border-bottom-color:transparent; border-bottom-width:100px; border-left-style:solid; border-left-color:transparent; border-left-width:100px; border-right-style:solid; border-right-color:black; border-right-width:100px; } </style> </head> <body> <div></div></body> </html>成果展示：
7.文字样式
1.字体类型：font-family
英文、中文
衬线体与非衬线体：
区别：带衬线有棱角，非衬线体比较圆滑
注：设置多字体的方式
如果设置的字体中有空格要带上单引号
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{font-family：Microsoft Yahei;} </style> </head> <body> <div>心中有党，成绩理想</div></body> </html>成果展示：
2.字体大小：font-size（16px默认像素）
第一种：输入像素数字大小（00px）
第二种：有英文形式：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{font-size: 50px;} </style> </head> <body> <div>我怀念的是无话不说</div> </body> </html>成果展示：
3.字体粗细：font-weight
模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）/number（100 200…500都是正常的，600…900都是加粗的）/
4.字体样式：font-style
模式：正常（默认）、斜体（italic）
/*oblique也是表示斜体，用的比较少，一般了解即可，没什么差别 */
区别：（1.）italic：带有属性倾斜字体的才可以设置倾斜操作。
（2.）oblique：没有倾斜属性的字体也可以设置倾斜操作
8.css段落样式——文本修饰
text-decoration：文本修饰
下划线:underline
删除线:line-through
上划线:overline
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{width:300px;text-decoration: line-through;/*添加多个修饰中间直接用空格隔开*/} </style> </head> <body> <p>每个优秀的人的心中都有一段沉默的时光，那段时光是付出了很多努力，却得不到结果的日子，我们把它叫做扎根</p> </body> </html>成果展示
9.css段落样式——文本大小写
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母：capitalize
10. css段落样式——文本缩进
text-indent：文本缩进（一个文字16px——对齐）
首行缩进的效果
em相对单位：相对单位，1em永远与字体大小相同
对齐方式：left、right、center、justify（两端点对齐）
p{ text-align：left: ;}/*调节左右对齐*/ 11.css段落样式——定义行高
line-height：
定义：一行文字的高度
默认：不是固定值，而是变化的。根据当前字体大小在不断的变化。
取值：1.number（px）|scale（比例值，跟文字大小成比例的）
p{ line-height:30px ;}12.css段落样式——字间距与词间距
1.letter-spacing：定义字间距
2.Word-spacing：词之间的间距（针对英文段落）
3.强制折行：（针对英文、数字不自动折行）
（1.）word-break:break-all；（非常强烈的折行）
（2.）word-wrap：break-word；（不是那么强烈的折行，会产生空白区域）
13.css复合样式
一个css属性只控制一种样式，叫做单一样式
一个css属性控制多种样式，叫做复合样式（background、border、font）
复合的写法：是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font
14.css选择器——id
1.ID选择器：
15.css选择器——class
