HTML和CSS学习笔记
2024-06-23 21:38:55
拨开云雾见天日 守得云开见月明
一、visual studio code编辑器
- 快捷键：Ctrl+c复制
- ctrl+v粘贴
- ctrl+a全选
- Ctrl+s保存
- ctrl+x剪切
- ctrl+z撤销
- ctrl+y前进
- shift+end从头选中一行
- shift+alt+下箭头：快速复制一行
- alt+上箭头/下箭头：快速移动一行
- tap向后缩进 tap+shift向前缩进
- alt+鼠标左键： 多光标
- ctrl+d ：选择相同元素的下一个
一、HTML
1. 什么是HTML？
Hyper Text Markup Language超文本标记语言（一种做网站编程语言）
超文本：文本内容+非文本内容
标记：<单词>有单标签
和双标签之分
语言：编程语言
HTML负责编写网页的结构
2. 创建方式
将文件的后缀名改成 .html
3. html初始代码
在vscode中 “！+tab” 可快速写出初始代码
<!--DOCTYPE：文档类型 告诉我们的浏览器我们要使用的是什么规范-->
<!DOCTYPEhtml>
<html>
<!--head:网页头部-->
<head><metacharset="utf-8"><!--title:网页标题-->
<title></title>
</head>
<!--body：网页主体--><body></body>
</html>
注释：<!-- -->（在vscode中用ctrl+/或shift+alt+a快捷键可快速注释）
优点：
1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员进行提示。
4. HTML语义化
含义：根据网页中内容的结构，选择合适的HTML标签进行编写。
好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO ,让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析(如屏幕阅读器、盲人阅读器等).
4.便于团队开发与维护。
网页中：结构代码都是以"标签"形式存在
1.网页最上面的标签<!DOCTYPEhtml>用于声明当前文档是一个网页文档
2.网页的根标签
3.网页设置支持中文<metacharset=“utf-8”>
网页标题
<link rel="shortcuticon" type="image/png" href="img/aaa.jpg"/>
<!--rel="shortcuticon" 图标
type="image/png" 图片类型
href=""图片路径
-->
5. 基本标签
1.标题标签
<h1 align="center">一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 独占一行
- 一个网页中最多只能存在一个h1标签，
- 标题align属性，可以让标题居左/居中/居右
- 网页里面存在6级标题，值越大字越小
- h5,h6标签不常用
2. 段落标签
<p>111</p>
<p>222</p>
独占一行，会自动换行
3. 换行标签
<br/>
- 换行
4. 水平线标签
<hr color="aqua" width="50%" align="center" size="5px"/>
- 独占一行
5. 字体标签
<fontsize="7" color="aqua" face="楷体">欢迎来学html！</font>
<!
--
size:字体大小 范围 1~7值越大字体越大
color:字体颜色face:字体样式
-->
6. 特殊文字样式
<b></b>（<strong></strong>）字体加粗
<i></i><em></em>字体倾斜
<u></u>下划线
<ins></ins>下划线（促销：原价<dei>300</del>现价<ins>100</ins>）
<del></del>删除线
<strike></strike>删除线
<big></big>大字体
<small></small>小字体
<sup></sup>上角标(a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>)
<sub></sub>下角标(h<sub>2</sub>o)
<mark></mark>标记
- 加粗和斜体都表示强调作用，加粗的强调效果强
- 一般情况下ins与del连用
7. 特殊符号
空格
大于号>
小于号<
和号&
人民币¥
摄氏度°
版权符号©
注册商标®
8. 图片标签
<imgsrc="img/4.png" title="美人画骨" alt="图片丢失"
width="250px"
border="1px"
vspace="5px"
hspace="5px"/>
<!--src：图片路径 title:鼠标放到图片上显示的文字
alt：图片丢失显示的文字
width height:设置图片高度宽度
border：图片的边框
vspace:距离上边的距离
hspace:距离左边的距离
-->
引入文件的地址路径：
1.相对路径：.在路径中表示当前路径（同一文件夹下）
…在路径中表示上一级路径（不同文件夹下）
2.绝对路径：http://cmsbucket.ws.126.net/2019/04/16/7a5b31eOce5474a7515.jpeg（直接引人图片所在地址）
9. 超链接标签
<a href="http://www.4399.com" target="_blank">百度一下</a>
- a标签里面可以放文字或者图片，在这个文字或者图片上加链接
- href用户点击以后要跳转的网页
- target指定打开网页的位置
target="_self"在当前网页打开
target="_blank"在新的网页打开
target="iframe名称"
<!--iframe的name值，这个值比较特殊，它可以把某个网址在iframe中打开-->
<a href="http://www.4399.com" target="f1">百度一下</a>
<iframe width="800px" height="300px" name="f1"></iframe>
默认是_self在当前页面打开，可以用base改变默认方式
base使用方法：在head标签中申明
<head>
<base target="_blank">
</head>
锚链接
在文本关键字上带一个链接
A.从甲页面A位置跳转到甲页面的乙位置
<a href="#top">返回顶部</a>
<a href="#center">返回中间</a>
<a href="#sub">返回结尾</a>
<a name="top">顶部</a>
<h2 id="top">1111</h2>
<p>111111111</p>
<p>111111111</p>
<a name="center">中间</a>
<h2 id="center">1111</h2>
<p>222222222</p>
<a name="sub">下面</a>
还可以用#和id完成
<a href="#top">返回顶部</a>
<a href="#sub">返回结尾</a>
<a href="#center">返回中间</a>
<h2 id="top">1111</h2>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<h2 id="sub">1111</h2>
<p>222222222</p>
<p>222222222</p>
<p>222222222</p>
<p>222222222</p>
B、从甲页面A位置跳转到乙页面的B位置
<a href="锚链接.html#center">跳转</a>
10. 列表标签
1.无序列表
<ul type="circle">
<li>孟老师</li><ul><li>杨老师</li></ul>
<li>刘老师</li>
<li>班主任</li>
</ul>
- 无序列表是一对父子标签通过ul和li组合完成，ul和li之间不能有其他标签
- 列表前的样式可以通过type修改
- circle：空心圆 disc：实心圆（默认） square：实心方块
- 无序列表，有序列表，定义列表之间可以嵌套，但嵌套的地方会默认成空心圆
2.有序列表
<ol type="i">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
- 列表前的样式可以通过type修改
- 1：（1 2 3 4 5） a：（a b c d） A：(A B C D)
i：（i ii iii iv）I:(I II III IV)
3.定义列表
<dl><dt>男生</dt><dd>杨政</dd><dd>张龙飞</dd><dd>邓子强</dd><dt>女生</dt><dd>王紫薇</dd><dd>张落落</dd><dd>赵依婷</dd>
</dl>
11. 表格标签
<!DOCTYPEhtml>
<html><head><meta charset="utf-8"><title></title>
</head>
<body><table width="500px" border="1px" align="center" cellpadding="0"cellspacing="0" bgcolor="aqua" bordercolor="red"><caption><h1>表格</h1></caption><colgroup><col bgcolor="pink" width="200px"/><col/><col/></colgroup><tHead>
<tr><th>第一列</th><th>第二列</th><th>第三列</th>
</tr>
</tHead>
<tBody>
<tr><td>1-1</td><td>1-2</td><td>1-3</td>
</tr><tr><td>2-1</td><td>2-2</td><td>2-3</td>
</tr>
</tBody>
<tr height="50px"><td align="center">3-1</td><td valign="top">3-2</td><td valign="bottom">3-3</td>
</tr></table></body></html>
- table表格标签
border表格边框
width表格宽度
cellpadding设置单元格内容和边框的距离
cellspacing设置单元格和单元格之间的距离
align表格对齐方式
bgcolor背景颜色
bordercolor边框颜色 - caption设置表格的标题它是table的子标签
- colgroup用于标记列col代表表格中的每一列
- tr行
- th标题的列字体加粗自动居中
- td列（td上常用的属性align设置左右对齐方式valign设置垂直的排列）
- 语义化标签： (让表格看起来更规范，对网页没有影响)
在一个table中只能出现一次
align="left|center|right"
valign="top|middle|bottom"
跨行和跨列
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head>
<body>
<table width="400px" border="1px" align="center" cellpadding="0" cellspacing="0"
bgcolor="aqua" bordercolor="red">
<tr align="center"><td colspan="3">1-1</td>
</tr><tr>
<td rowspan="2">2-1</td><td>2-2</td><td>2-3</td>
</tr>
<tr><td>3-2</td><td>3-3</td>
</tr></table></body>
</html>
- colspan合并列
- rowspan合并行
12. 表单标签
表单的作用：用来显示，收集信息并提交给服务器
<form action="填写的内容提交给谁？" method="get|post">
</form>
- action表单的提交地址（例：https://www.baidu.com）
- method提交数据的方法，get可以在地址栏看到我们的信息，post不可以
- 表单的最外层容器
13. input标签（单标签）
<input type="类型"name="为了和后端数据进行交互，没有name数据传递不了"
id="页面的唯一标识"
placeholder="占位符属性，用户输入内容之后就不在显示了"（例：在密码框中显示请输入密码）
/>
<1>type=“文本输入框”
<label for="uname">账号：</label>
<input type="text" id="uname" name="uname" value=""placeholder="请输入账号">
例如这里单选框的时候点击单选的那个圆圈是可以进行选择的，但点击人名不行，这里加上label就可以实现加人名也可以进行选择。
<!-- lable标签：语义化标签点击文字，光标定位到对应的文本中增强用户的体验
lable中for里面的属性值要和id的属性值一样
-->
这里面的value是初始值
<2>type="password"密码输入框
<input type="password"name="pwd"placeholder="请输入密码"/>
<3>type="radio"单选按钮
<input type="radio" name="sex" value="男"checked="checked">男
<input type="radio" name="sex" value="女">女
<!
<--一组单选按钮，name属性值必须一样
checked默认选中(checked可以不写值)
-->
<4>type="checkbox"多选按钮
<input type="checkbox"name="hobby"value="吃饭"/>吃饭
<input type="checkbox"name="hobby"value="睡觉"/>睡觉
<input type="checkbox"name="hobby"value="打豆豆"/>打豆豆
提交表单时，只有处于勾选状态的复选框的数据值才会发送给服务器。
<5>type="number"数字
<input type="number"name="age"value="10"min="1"max="150"step="10"/>
<!--value:默认值min:最小值max：最大值step:每次值增加或者减少的值注意：当min最小为1时，step为10的时候，那么只能是1，11、21，31，41。
-->
<6>type="date"日期
<input type="date"name="date"value="2020-05-01"/>
<7>type="time"时间
<input type="time"name="time"value="15:30">
<8>type="datetime-local"日期与时间
<input type="datetime-local"name="date_time">
<9>type="range"滑块
<input type="range"name="yl"min="0"max="100"step="10">
<10>type="button"普通按钮
<input type="button"value="普通按钮">
<11>type="submit"提交按钮
<input type="submit"value="提交按钮"/>
<12>type="image"图片按钮
<input type="image"src="../1.jpg"width="100px"height="30px">
<13>type="reset"重置按钮
<input type="reset"value="重置按钮">
<14>type="file"文件上传组件
<input type="file"name="photo"/>
<15> type="hidden"隐藏域
<input type="hidden"name="uid"value="1">
<!--
页面上看不到，但是可以传递给服务器
-->
<16>只读 一般给文本框使用
<input type="text"value="张三"name="myname"readonly="readonly">
<17>禁用 一般给按钮使用
<input type="button"value="张三"name="myname"disabled="disabled">
<18>下拉选项框
<select><option>请选择</option><option value="1">河南</option><option value="2"selected>湖北</option><option value="3">湖南</option><option value="4">河北</option>
</select>>
-下拉选项框是一个组合标签，它通过option一起来设置下拉选项
- 默认选择其中一个在对应的<option +selected>
- <select size="1/2/3>"表示下拉框显示几列
- mutiple表示多选，也可以用在file中可以一次性选择多个文件
③文本域
<textarea id="info"name="info"rows="10"cols="50">内容</textarea>
- rows代表行 cols代表列
- 没有value属性，它的内容在开始标签和结束标签的内容
value属性
input标签的value属性的作用是由input标签的type属性的值决定的
当type的取值为button、reset、submit中的其中一个时，此时value属性的值表示的是按钮上显示的文本
当type的取值为text、password、hidden中的其中一个时，此时value属性的值表示的是输入框中显示的初始值，此初始值可以更改，并且在提交表单时，value属性的值会发送给服务器（既是初始值，也是提交给服务器的值）
当type的取值为checkbox、radio中的其中一个时，此时value属性的值表示的是提交给服务器的值
表格表单的联合使用
<html><head><title>表格表单的联合使用</title></head><body><form action="">
<table cellpadding="30" border="1"><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><td colspan="2"><input type="submit"> <input type="reset"></td></tr>
</table></form></body>
</html>
div和span
div (块) :div全称为division,“ 分割、分区”的意思，
标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在
标签中，
中还可以嵌套多层
,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span (内联) : 用来修饰文字的，div 与span都是没有任何默认样式的，需要配合CSS才行。
span (内联) : 用来修饰文字的，div 与span都是没有任何默认样式的，需要配合CSS才行。
<html><head><title></title></head><body><div><h2><span>HTML5</span>教程_w3cschool 教程_w3cschool</h2><a href="#">https://www.runoob.com/html/html5-intro.html</a><ul><li>什么是 HTML5?HTML5 是下一代 HTML 标准。HTML , HTML 4.01的上一个版本诞生于 1999 </li><li>HTML5 是如何起步的？HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web </li><li>HTML5 <!DOCTYPE><!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简</li><li>最小的HTML5文档。下面是一个简单的HTML5文档：<!DOCTYPE html> <html> <head></head></li></ul><a href="#"><img src="www.baidu.com" alt="cuowu"> </a></div></body>
</html>
在span中加入颜色HTML5会发生相应的颜色变化。（）
CSS
什么是CSS？
1.1.CSS是什么？
2.CSS怎么使用？
3.CSS选择器（重点+难点）
4.美化页面
5.盒子模型
6.浮动
7.定位
1.1、什么是CSS？
Cascading Style Sheet层叠级联样式表
CSS：表现层
1.2、CSS发展史
CSS1.0加了一些最基本的样式，加粗之类
CSS2.0 div(块元素) css提出来结构和表现分离的思想，使网页变的跟简单
CSS2.1浮动定位
CSS3.0圆角阴影动画…浏览器的兼容性~~有些浏览器是不支持动画。
1.3、快速入门
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title></title>
<style type="text/css">/*
规范：在style标签里面编写CSS代码，每一个声明都需要使用;
结尾语法：
选择器{声明1;声明2;声明3;}
*/
h1{color:aqua;}</style></head><body><h1>helloworld</h1></body>
</html>
注意：Style可以写在别的位置，但是最好写在head标签里面建议使用这种规范
CSS
优势：
1.内容和表现分离正常情况下HTML代码很少CSS代码却很多。CSS代码很容易就成千上万行所有的代码都写在HTML里面，你的网页加载很慢
2.网页结构统一，可以实现复用
3.样式丰富
4.建议使用独立于HTML以外的CSS文件
1.4.CSS的三种独立导入方式
<1>内部，内联样式
内部样式（优点：可以复用代码）
<html><head><title></title><style>h1{ width: 30;background-color: red;}</style></head><body><h1>你好</h1></body>
</html>
内联样式
<html><head><title></title></head><body><h1 style="width: 30;background-color:red">你好</h1></body>
</html>
<2>外部样式
<! DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title></title>
<!--外部样式-->
<link rel="stylesheet"type="text/css"href="css/style.css"/>
</head><body><h1>hello world</h1></body>
</html>
/*外部样式*/
h1{
color:red;
}
拓展：外部样式的两种写法
- 链接式
html
<link rel="stylesheet"type="text/css"href="css/style.css"/>
rel：指定资源跟页面的关系
- 导入式CSS2.1
<!--导入式-->
<style type="text/css">@importurl("css/style.css");</style>
<3>行内样式（内联）
<!DOCTYPEhtml>
<html><head><meta charset="utf-8"><title></title></head><body><h1 style="color:chocolate;">helloworld</h1></body>
</html>
三种样式的优先级：
理论上：行内>内部>外部
真实情况:就近原则
CSS中的颜色表示法
- 单词表示法：red blue…
- 十六进制表示法：#000000黑色#ffffff白色…
- RGB三原色表示法（取值范围0~255）：rgb（0,0，0）黑色（255,255,255）白色
CSS背景样式
- background-color背景颜色
- background-image背景图片
url（图片地址）默认会水平垂直铺满背景块 - background-repeat背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat（x，y都平铺，默认）
norepeat不平铺
如果图片小于块容量图片默认放在左上角，大于块容量的话，只会在块中显 示部分图片 - background-position背景图片的位置
x，y： 100px，30px；
x:left，center，right
y:top，center，bottom
用百分比也可以 - background-attachment背景图片随滚动条的移动方式
scroll：图片随滚动条滚动（默认）（图片所在位置以块为标准）
fixed：图片不随滚动条滚动（此时图片所在位置是以网页为标准的）
CSS边框样式
border-style:边框的样式
solid实线
dashed虚线
dotted点线
border-width边框的大小
px…
border-color边框的颜色
注：针对每一条单独设置
<html><head><head></head><style>div{ width: 300;height: 300;border-style: dashed;border-color: red;border-width: 30px;}</style></head><body><div></div></body>
</html>
如果要只设置一条边在border-right-style:dashed;
透明颜色 transparent（与背景色相契合）
CSS文字样式
- font-family:字体类型
英文字体：Arial…(针对中文不起作用 )
中文字体:微软雅黑(默认)，楷体，宋体…（对中英文都起作用）
中文字体的英文名称：
微软雅黑：MicrosoftYaHei
宋体：SimSun
<html><head><title></title><style>div{font-family: Arial,宋体，微软雅黑;
}</style></head><body><div>你好</div></body>
</html>
注：
- 在设置字体时为了避免电脑中没有对应的字体，一般会设置多种字体按照从前到后的顺序进行选择，假如电脑中都没有相应字体则会以电脑默认字体输出。
- 引号的问题：字体中没有空格就不用加引号，有空格就必须加（‘Time New Roman’）
- 衬线体（宋体）和非衬线体（微软雅黑）
注：左侧为衬线体，右侧为非衬线体
3. 字体大小
font-size(默认大小为16px)
<html><head><title></title><style>div{font-size: 20px;
}</style></head><body><div>你好</div></body>
</html>
4. 字体粗细：font-weight
模式：正常和加粗两种
写法：单词（normal ，bold）数字（100~900）
注：100500都是正常大小，600900是加粗的，输入数字为100的整数倍
5. 字体样式：font-style
模式：正常（normal）和倾斜（italic）两种
写法：单词（normal ，italic）
注：oblique也表示倾斜，但用的比较少
区别：italic：带有倾斜属性字体才可以设置倾斜
oblique：没有倾斜属性字体也可以设置倾斜
段落样式
1. text-decoration:文本装饰
下划线：underline
上划线：overline
删除线：line-through
无任何装饰：none
注：可以添加多个文本修饰，空格隔开
<html><head><title></title><style>p{text-decoration: underline;
}</style></head><body><p>你好</p></body>
</html>
2. 文本大小写：text-transform(针对英文段落)
小写：lowercase
大写：uppercase
只对首字母大写：capitalize
<html><head><title></title><style>p{text-transform: lowercase;
}</style></head><body><p>difnddfmdkHBBIHUHkg</p></body>
</html>
3. 文本缩进：text-indent（首行缩进）
em单位，这是一个相对单位，1em永远跟字体大小相同
注：缩进的文本内容中有英文的话可能会导致对齐错误
<html><head><title></title><style>p{text-indent:1em ;font-size: 16px;
}</style></head><body><p>你好</p></body>
</html>
4. 文本对齐方式text-anlign
对齐方式：left，right，center，justify（两端对齐）
<html><head><title></title><style>p{text-align: justify;
}</style></head><body><p>你好</p></body>
</html>
- 行高：line-height=上边距+下边距+字体高度
默认行高：不是固定的，根据字体大小不断变化。
取值：1.numbei（px）
2.scale（比例值，跟字体大小成比例）
<html><head><title></title><style>p{line-height: 2;
}</style></head><body><p>你好</p></body>
</html>
- 定义字间距：letter-spacing
定义词间距：word-spacing（针对英文）
英文和数字不自动折行的问题
work-break:break-all(非常强烈的折行)
work-wrap-break-word(不那么强烈的折行，可能会产生一些空白区域)
<html><head><title></title><style>p{line-height: 2;
}</style></head><body><p>你好</p></body>
</html>
复合样式
一个CSS属性只控制一个样式，叫做单一样式
一个CSS属性控制多个样式，叫做复合样式
复合样式
写法：通过空格的方式实现
复合写法有的不要关心写法顺序（background border），有的需要
例：
- background
- border
- font（最少两个值）
weight style size family
style weight size family
weight style size/line-height family
<html><head><title></title><style>div{width: 300px ;height: 300px;
background :red no-repeat center center;
border-right:blue dashed 2px ;
font:bold italic 30px 宋体;
}</style></head><body><div>你好</div></body>
</html>
注：尽量不要混写，非要混写，先写复合样式，再写单一样式，避免被覆盖
选择器
作用：选择页面上的某一个或则某一类标签
2.1基本选择器
<1>标签选择器
标签名{}
<!DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">/*
会选择这个页面所有的这个标签的元素
*/
h1{color:#FFA500;}
p{color:aqua;}</style>
</head>
<body>
<h1>hello world</h1>
<p>11111</p>
<p>22222</p>
<p>33333</p>
</body>
</html>
<2>类选择器
class名称{}
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style
type="text/css">/*
类选择器可以多个标签归类，同一个class可以实现复用，也可以跨标签使用
*/
.one{color:chartreuse;font-size:20px;}</style>
</head>
<body>
<h1 class="one">hello world</h1>
<pclass="one">11111</p>
<pclass="one">22222</p>
<p>33333</p>
</body>
</html>
<3>id选择器
id名称{}
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">/*
id选择器:必须保证全局唯一，不能出现同名的
*/
#one{color:#FFA500;}
#two{color:aquamarine;}</style>
</head>
<body>
<h1 id="one">hello world</h1>
<p>11111</p>
<p id="two">22222</p>
<p>33333</p>
</body>
</html>
<4>三种基本选择器的优先级
id选择器>类选择器>标签选择器
2.2层次选择器
1. 后代选择器：
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title><style>type="text/css">
/*后代选择器中间有一个空格*/
/*选中ul下的所有p标签*/
ul p{background:green;}</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul>
</body>
</html>
2. 子代选择器
<! DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title></title><style>type="text/css">
/*子代选择器中间是一个>符号，只能选中下一代*/
/*选中body子代的p标签*/
body>p{background:green;}</style></head><body><p>p1</p><p>p2</p><p>p3</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul></body>
</html>
3. 兄弟选择器
<! DOCTYPE html>
<html><head><meta charset="utf-8">
<title></title><style>type="text/css">
/*兄弟选择器：对下不对上*/
#one+p{background:aqua;}</style></head><body><p>p1</p><p id="one">p2</p><p>p3</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul><p>p7</p>
</body>
</html>
4. 通用选择器
<! DOCTYPE html>
<html><head><meta
charset="utf-8">
<title></title><style>type="text/css">
/*通用选择器:当前选中元素向下的所有兄弟元素*/#one~p{background:aqua;}</style></head><body><p>p1</p><p id="one">p2</p><p>p3</p><p>p3.5</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul><p>p7</p><p>p8</p>
</body>
</html>
2.3结构伪类选择器
<! DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/*不能使用class和id选择器*/
/*选中ul下的第一个子标签*/ul li:first-child{background:#00FFFF;}
/*选中ul下的最后一个子标签*/ul li:last-child{background:#FF0000;}
/*高级的结构伪类选择器，不需要掌握，要个脸熟*/
/*选中p1:先定位到父级元素，选中父级元素下的第一个孩子顺序并且是当前元素才能*/p:nth-child(2){background:#b9e2fe;}
/*选中父元素下的第二个类型*/p:nth-of-type(1){background:#FFA500;}</style>
</head>
<body><h1>hello</h1><p>p1</p><p>p2</p><p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul>
</body>
</html>
2.4属性选择器（常用）
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.demo a{
float:left;
display:block;
height:50px;
width:50px;
border-radius:10px;
background:#FFA500;
text-align:center;
color:#b9e2fe;
text-decoration:none;
margin-right:5px;
font:bold 20px/50px Arial;
}
/*属性选择器的格式：选中存在id属性 标签[]{}*/
/*a[id]{
background:yellow;
}*/
/*选中id=first的元素*/
/*a[id=first]{background:#00FFFF;
}*/
/*选中class中含有links的元素*/
/*
a[class*="links"]{
background:
#FF0000;
}*/
/*选中以http开的元素*/
/*
a[href^=http]{
background:
#ddff7e;
}*/
/*选中以doc结尾的元素*/
a[href$=doc]{
background:
#f2fcfe;
}</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com"
class="links item first"id="first">1</a>
<a href="https://www.4399.com"class="links item active">2</a>
<a href="123.html"class="links item">3</a>
<a href="123.jpg"class="links item">4</a>
<a href="123.png"class="links item">5</a>
<a href="abc"class=" item">6</a>
<a href="a.pdf"class="links item">7</a>
<a href="abc.pdf.class="linksi tem">8</a>
<a href="abc.doc"class="links item">9</a>
<a href="abcd.doc"class="links item last"id="last">10</a>
</p>
</body>
</html>
3.美化页面
3.1为什么要美化页面?
- 有效的传递页面信息
- 吸引用户
- 凸显网页主题
-用于 提高体验
span标签：
重点要突出的字，用span标签套起来
<! DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.one{font-size:50px;}</style></head>
<body>
莫等闲，白了少年头，<span class="one">空悲切</span>。
</body>
</html>
3.2字体样式
font-size:字体大小
font-famliy:字体
font-weight:字体粗细
color:字体颜色
font-style:字体风格
italic字体倾斜
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">/*
body{
font-family:楷体;color:#FFA500;
}*/
h1{
color:#FF0000;
font-size:50px;
}
/*.p1{
font-weight:bolder;
}
.p2{
font-weight:bold;
}*/
/*font:字体风格 字体粗细 字体大小 字体*/
/*p{font:italic bolder 15px "楷体";}*/</style>
</head>
<body>
<h1>迪迦奥特曼</h1>
<p class="p1">迪迦奥特曼，日本圆谷特摄剧《迪迦奥特曼》及其衍生作品中的主角，也是首位拥有形态转化能力的奥特曼。</p>
<p class="p2">不同于其他奥特曼的是，迪迦奥特曼是在地球的超古代时期就已经出现的巨人，但并非是地球出生的奥特曼。他原本是黑暗巨人，也是其中的领袖，后在超古代时期的地球警备队队长幽怜的劝说下弃暗投明，吸收了三个同伴的力量再封印了他们，最终成为光之巨人迪迦奥特曼。</p>
</body>
</html>
3.3文本样式
1. 颜色
color:orange;
a、单词：red green blue pink
b、RGB0-F16进制 #FF0000红色 RGB(255,0,0)
c、RGBA A表示透明度 RGBA(255,0,0,0.5)；
2. 文本对齐方式
text-align:center;居左|居中|居右
3. 首行缩进
text-indent:2em;/*2em表示缩进两个字体*/
4. 行高
height:100px;
line-height:100px;
当你想行内容上下左右都居中，就把块高度和行高设置成一样的
5. 装饰
text-decoration:underline;下划线
text-decoration:line-through;中划线
text-decoration:overline;上划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.a{
color:red;
text-align:center;
background:orange;
height:100px;
line-height:100px;
text-decoration:underline;
}
.b{
/*color:#FF0000;*/
color:rgb(255,0,0);
text-decoration:line-through;
}
.c{
color:rgba(255,0,0,0.5);
text-decoration:overline;
}
.p1{
text-indent:2em;
/*2em表示缩进两个字体*/
}</style>
</head>
<body>
<p class="a">11111111</p>
<p class="b">22222222</p>
<p class="c">33333333</p>
<h1>迪迦奥特曼</h1>
<p class="p1">迪迦奥特曼，日本圆谷特摄剧《迪迦奥特曼》及其衍生作品中的主角，也是首位拥有形态
转化能力的奥特曼。</p>
<p class="p2">不同于其他奥特曼的是，迪迦奥特曼是在地球的超古代时期就已经出现的巨人，但并非是地球出生的奥特曼。他原本是黑暗巨人，也是其中的领袖，后在超古代时期的地球警备队队长幽怜的劝说下弃暗投明，吸收了三个同伴的力量再封印了他们，最终成为光之巨人迪迦奥特曼。</p>
</body>
</html>
3.4超伪类连接
a:link设置超链接在未被访问的样式
a:visited设置超链接在已被访问的样式
a:hover设置超链接在鼠标悬浮的样式
a:active设置超链接在鼠标点击的样式
注意：a:hover必须位于a:link和a:visited的后面a:active必须位于a：hover后面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">a{
text-decoration:none;
}
/*没有访问之前的样式*/
a:link{
color:black;
}
/*已被访问的样式*/
a:visited{
color:red;
}
/*鼠标悬浮状态*/
a:hover{
color:orange;
}
a:active{
color:#00FFFF;
}</style>
</head>
<body>
<p><a href="#">java从入门到放弃</a></p>
<p><a href="#">数据库从删库到跑路</a></p>
<p><a href="#">JS从入门到入土</a></p>
</body>
</html>
3.5阴影
/*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">a{
text-decoration:none;
color:#000000;
}
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
.one{
text-shadow:red 2px -2px 1px;
}</style>
</head>
<body>
<p> <a href="#">java从入门到放弃</a></p>
<p><a href="#">数据库从删库到跑路</a></p>
<p class="one"><a href="#">99</a></p>
</body>
</html>
3.6列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">#nav{
width:300px;
background:#cdcdcd;
}
.title{
font-size:18px;
font-weight:bold;
text-indent:2em;
line-height:30px;
background-color:#FF0000;
}ul{
background:#cdcdcd;
}
/*list-style：设置列表前的样式none去掉圆点circle空心圆decimal数字square正方形*/
ul li{
height:30px;
list-style:none;
text-indent:1em;
}
a{
text-decoration:none;
font-size:14px;
color:#000000;
}
a:hover{
color:orange;
text-decoration:underline;
}</style>
</head>
<body>
<div id="nav">
<h2 class="title">分类</h2>
<ul>
<li>
<a href="#">美妆</a>
<a href="#">
饰品</a>
<a href="#">洗护</a>
</li>
<li>
<a href="#">男装</a>
<a href="#">运动</a>
<a href="#">百货</a>
</li>
<li>
<a href="#">手机</a>
<a href="#">数码</a>
<a href="#">电器</a>
</li>
<li>
<a href="#">食品</a>
<a href="#">生鲜</a>
<a href="#">医药</a>
</li>
</ul>
</div>
</body>
</html>
3.7背景
background-repeat
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">div{
width:800px;
height:600px;
border:10px
solidred;
background-image:url(img/44.png);
/*图片默认平铺*/
}
.div1{
background-repeat:repeat-x;/*水平平铺*/
}
.div2{
background-repeat:repeat-y;/*垂直平铺*/
}
.div3{
background-repeat:no-repeat;/*不平铺*/
}</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3">
</div>
</body>
</html>
4.盒子模型
- 布局必须遵循一个规范（盒子模型）
- 页面上所有的内容都是HTML标签组成的，每一个标签都有自己的特点
- HTML里的标签可以分为三类：块级元素 行内元素 行内块元素
4.1什么盒子模型？
margin :外边距
border：边框
padding：内边距
4.2HTML标签分类
1. 块级元素
网页中类似于：p h1~h6 div
特点：
1独占一行2.可以通过width/height设置大小3.默认的宽度是100%,高度是04.可以这margin和padding
2. 行内元素
网页中类似的元素：a,span
特点：
1默认排列在一行
2行内元素不能设置width和heright,大小和内容大小一样
3行内元素如果想要实现居中，必须在父级元素上添加text-align:center;
行内元素添加text-align:center;
没有效果只能在父级元素（块元素）上设置
4行内元素的width和height默认为05设置marginpadding无效
3. 块级行内元素
具备块级元素和行内元素的特点：img
4.3边框
粗细 样式 颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.box{
width:300px;
border:1px
solidblack;
text-align:center;
margin:0
auto;
}
h2{
font-size:14px;
background-color:#009E94;
line-height:30px;
margin:0;
}
form{
background-color:#009E94;
padding-bottom:20px;
}
/*border:粗细样式颜色*/
div:nth-of-type(1)>input{
border:2px solid red;
}
div:nth-of-type(2)>input{
border:2px dashed orange;
}
div:nth-of-type(3)>input{
border:2px
doubleblack;
}</style>
</head>
<body>
<div class="box">
<h2>用户登录</h2>
<form action="#">
<div>
<span>账号</span>
<input type="text"/>
</div>
<div>
<span>密码</span>
<input type="text"/>
</div>
<div>
<span>邮箱</span>
<input type="text"/>
</div>
</form>
</div>
</body>
</html>
HTML和CSS学习笔记相关推荐
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- 前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
- CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...
最新文章
- jQuery 学习笔记之九 (jQuery 图片提示 )
- 计算机视觉领域最全汇总（第2部分）
- 【算法基础】数据结构导论第六章-查找.pptx
- 【Linux】一步一步学Linux——cp命令(31)
- list redis 怎样做排行_list类型的应用场景 —— Redis实战经验
- 【matplotlib笔记】在图表中使用中文信息作为标签
- 用python查看和更改系统默认编码
- xxx is not in the sudoers file. This incident will be reported.
- ARM处理器系统初始化过程
- AtCoder Grand Contest 016
- android点击改变字体颜色,Android Textview 动态 部分文字点击 改变颜色
- 日立电梯服务器显示地址偏移异常,日立电梯所显示的故障报警代码
- 基于R语言的DynNom包绘制动态列线图
- LSTM实现情感分类
- 【模电】0001 实用运放电路分析
- 哔哩哔哩2020校园招聘技术类笔试卷（二）
- USACO2013 island travels
- 深度剖析数据在内存中的存储（修炼内功~吊打面试官）
- Sanic框架登录验证——Sanic-Auth的使用方法
- Spark入门实战系列--5.Hive（上）--Hive介绍及部署