HTML与CSS学习总结
HTML与CSS学习总结
一、HTML总结
1 概念
HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的
标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。
2快速入门
1.html文档的后缀名
.html和.htm两种都可以，没有区别。我一般习惯使用.html，个人习惯不同而已。
2.标签的分类
- 围堵标签 ：有开始标签和结束标签。eg:
- 自闭和标签 ： 开始标签和结束标签都在一个标签中
3.标签可以嵌套，但格式一定要正确
正确案例：<p><a>a>p>
错误案例：<p><a>p>a>
4.标签的属性
标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引进来，多个属性可以用空格隔开。
<标签名称 属性名1="属性值" 属性名2="属性值">标签名称>
<p id="p1" name="p1">
p>
5.html标签不区分大小写，但是推荐全小写
3 HTML文档的基本结构
HTML文档也叫web页面
3.1基本结构
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面title>
head>
<body>
hello html 这是我的第一个HTML页面
body>
html>
3.1HTML的注释
语法：
HTML注释以结尾。
注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
4HTML常用标签
HTML中的标签有很多，再此我只列举比较常用的标签。其他标签若需要，请咨询查询。
4.1文本标签
4.1.1标题标签 h1-h6:字体逐渐缩小
一般用在文章的标题上。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fy06FfNd-1657112616288)(HTML与CSS学习总结.assets/标题.png)]
4.1.2段落标签
一般用在正文
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gTLowZQt-1657112616290)(HTML与CSS学习总结.assets/Snipaste_2022-06-28_22-08-02.png)]
4.1.3换行标签
一般用在段落中强制换行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xOdb3VOp-1657112616291)(HTML与CSS学习总结.assets/Snipaste_2022-06-28_22-14-55.png)]
4.1.4水平线标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUzQNsZv-1657112616292)(HTML与CSS学习总结.assets/1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tmHl9P6K-1657112616293)(HTML与CSS学习总结.assets/2.png)]
4.1.5标签范围
一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使
用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DJYD44zv-1657112616293)(HTML与CSS学习总结.assets/3.png)]
PS：不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容样子，我们才通过范围标
签包裹，然后修改它的样式。
4.2图片标签
4.2.1基本属性
4.3列表标签
一般用在导航上
4.3.1无序列表与有序列表
<body>
<ul>
<li>一li>
<li>二li>
<li>三li>
ul>
<ol>
<li>一li>
<li>二li>
<li>三li>
ol>
body>
4.4布局标签 层div
一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。
4.5标签分类
html标签可以分为块状元素和行级元素两类。
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
PS:区分的简单方法：是否独占一行。
块状元素和行内元素的区别：
1、 块级元素会独占一行，其宽度自动填满其父元素宽度；
行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
2、块级元素可以设置宽高；行内元素设置宽高无效。
3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖
直方向的padding没有效果。（此处的属性稍后介绍）
我们上面已经讲过的标签中归类一下：
属于块状元素的：
标题标签 h1-h6,
段落标签 p ,
水平线标签 hr,
有序列表标签 ol–li，
无序列表标签 ul–li，
定义描述标签 dl-dt-dd，
容器标签 div：
属于行级元素的：
范围标签：span
图像标签：img
5超链接
超链接标签一般有两个作用：1、用来实现页面间的跳转 2、实现锚链接功能
5.1页面间的跳转
<<a href="baidu.html" target=" _blank" >点击我试试a>
5.2锚链接
当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。这个定位可以实现本页面间的锚链接也可以实现不同页面间的锚链接。
6 表格标签
规则表格
<table border="1" cellpadding="0" cellspacing="0" width="90%" height=" 200px">
<tr>
<th align="center">序 号th><th>商品名称th><th>价格th>
tr>
<tr>
<td>1td><td valign="top"><img src=" img/a . png" />td><td>125td>
tr>
<tr>
<td>2td><td valign="bottom" >Kitty饼干td><td>96.0td>
tr>
table>
7 表单！！！
概念：用于采集用户输入的数据。用于和服务器进行交互。
表单项元素中的一些属性：
id:元素的唯一表示， 不重复
name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class :表示样式名称
readonly:表示只读，用户只能看不能改
disabled:表示禁用，该元素不能改而且背景是灰色
7.1 文本框
<input type="text" id="userName" name="userName" placeholder=" 请输入用户名"/><br/>
7.2 密码框
<input type="password" id="pas sword" name="password" required/><br/>
7.3 单选按钮
性别: <input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
<input type="radio" name=" gender" value="未知" />未知<br/>
婚姻状态: <input type="radio" name="statu" value="1"/>已婚
<input type="radio" name="statu" value="0" checked/>未婚<br/>
7.4 复选框
爱好: <input type="checkbox" name="hobby" value="swim" />游泳
<input type=" checkbox" name="hobby" value="NBA" />NBA
<input type="checkbox" name="hobby" value="movie" />电影
<input type=" checkbox" name="hobby" value="music" />音乐<br/>
7.5 文件域
头像: <input type="file" name= "headImg" multiple="multiple"/><br/>
7.6 日期-h5中的新特性
生日: <input type="datetime-local" name="birthday"/><br/>
7.7 隐藏域
隐藏域: <input type="hidden" name= "userId" value="1001"/><br/>
7.8 下拉选择框
<select name="month">
<option value="1" >1option>
<option value="2">2option>
<option value="3" selected="selected">3option>
<option value="4" >4option>
select><br />
7.9 文本域
协议: <textarea rows="15" cols="50" readonly="readonly" disabled="disabled">
水泊梁山英雄会注册会员条款说明:
1、必须遵守.......
2、...............
textarea><br />
7.10 按钮
<input type="submit" value="注册" id="regBtn" />
<input type="image" src="img/submit.gif" id="regBtn2" />
<input type="reset" value="重置"id="reset" />
<input type="button" value="普通按钮"id="btn" />
button标签可以与input实现的按钮相互替换。
<input type="submit" value="注册" />
<input type="reset" value="重置" />
<input type="button" value="按钮" />
<button type="submit">注册button>
<button type="reset">重置button>
<button type="button">按钮button>
7.11 标签
<label for="userName">用户名: label>
<input id="userName" />
7.12 以上内容综合效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hEpIQJQG-1657112616295)(HTML与CSS学习总结.assets/image-20220630122325942.png)]
二、CSS总结
1、 CSS的概念
层叠样式表(英文全称：Cascading Style Sheets)
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
- 样式定，义如何显示HTML元素
- 样式通常存储在样式表中
- 把样式添加到HTML 4.0中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在CSS文件中
- 多个样式定义可层叠为一一个
CSS很像化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果。
所以，前端程序员相互表白的时候可以说：you are the CSS to my HTML.
2、 CSS的优势
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度、解耦
- 让分工协作更容易
- 提高开发效率
3、 CSS的使用：CSS与html结合使用
根据定义CSS的位置不同，分为行内样式、内部样式和外部样式。
3.1 行内样式
也称为内联样式
直接在标签中编写样式，通过使用标签内部的style属性
一般在测试的时候使用居多：
语法： "样式1：值1;样式2：值2;....样式N：值N;">hello my css
案例：
"color: red;">hello my css
弊端：只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。
3.2 内部样式
定义在head标签内，通过style标签，该标签内容就是CSS代码
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式title>
<style>
div{
color: red;
}
style>
head>
<body>
<div>hello my cssdiv>
body>
html>
3.3 外部样式
1、提前定义css资源文件
2、在head标签内，定义link标签引入外部样式文件。
lina.css文件，放在与html页面同级的css文件夹中：
div {
color: red;
}
html页面中的引入
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式title>
<link rel="stylesheet" href="css/lina.css" />
head>
<body>
<div>hello my cssdiv>
body>
html>
作用域的范围:外部样式表>内部样式表>行内样式表
**优先级：外部样式表<内部样式表<行内样式表; **
同样的样式作用在同一个标签身上：就近原则；不同样式作用在同一个标签身上:叠加生效
4、 CSS语法
基本格式：由两个主要的部分构成：选择器，以及一条或多条声明:
选择器 {
属性1:值1;
属性2:值2;
...
}
选择器:筛选具有相似特征的元素
属性和属性值之间用冒号分割，不同的属性之间用分号隔开。
5、 CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束
/*这是CSS的注释*/
div {
color: red; /*文字颜色是红色*/
}
6、 基本选择器：筛选具有相似特征的元素
6.1 id选择器
选择具有相同id属性值的元素，建议html页面中的id值唯一
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
PS： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效，使用class选择器。
6.2 class选择器
选择具有相同的class属性值的元素。
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
6.3 元素选择器/标签选择器
选择具有相同标签名称的元素。
定义选择器语法：标签名称{}；PS：标签名称必须是html提供好的标签。
使用标签选择器：自动使用在所有的同名的标签上
7 优先级
7.1 选择器的优先级
ID选择器 > 类选择器 > 标签选择器
当多个选择器作用在同一个标签上的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。
7.2 样式表的优先级
行内样式 > 内部样式 >外部样式
同样，三个样式表中都有内容作用在同一个html标签的时候，如果属性冲突，看优先级；如果不冲突，
样式叠加生效。
8 CSS常用样式
8.1 color:字体颜色
跟颜色相关的取值分3种：
1、颜色的单词 red blue…
2、rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)
rgba（红，绿，蓝,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
3、#值1值2值3 ：值的范式是00-FF 十六进制数字组成的 例如：#FF0000
8.2 width height:宽高
PS：只有块状元素可以设置宽高，行级元素设置不生效。
取值方式有2种：
1：数值 绝对数字 单位是像素PX
2：百分比：占据父元素的比例
8.3 背景样式
/*类选择器:作用在具有相同class属性的标签上*/
. bg[{
/*背景色*/
background-color: cornflowerblue;
/*背景图片:背景图片小于标签的宽高的时候，默认平铺*/
background- image: ur1( img/ submit.gif);
/*背景平铺方式:不设置的时候默认xy轴同时平铺
repeat-x:横轴平铺
repeat-y :纵轴平铺
repeat :xy同时平铺
no-repeat:不平铺*/
background-repeat :no-repeat;
/*背景位置: 第一个参数: X轴上的偏移距离:整数向右移动，负数向左移动
第二个参数: y轴上的便宜距离:正数向下便宜，负数向上便宜
*/
background-position: 30px 20px;
}
8.4 文本样式
div{
/*所有的块状元素都有宽和高的属性;行级元素没有高宽*/
width: 500px;
height: 400px;
/*背景样式:建议少用缩写形式*/
background: tan url( img/youhui. png) no-repeat 10px 10px;
/*字体*/
font-size: 18px;
font-family: "微软雅黑";
font-weight: bold ;
/*字体缩写:粗细大小样式*/
font:bold 24px "微软雅黑";
/*文本样式*/
/*划线位置: line . through--中划线underline-下划线 none-.没有划线*/
text-decoration: underline ;
/*文本的水平对齐方式: left right center*/
text-align: center;
/*文本的垂直对齐方式:没有单个属性可以设置垂直对齐;
一般单行的时候使用高度等于行高设置垂直居中:
多行未来使用盒子模型: */
line -height: 400px;
/*文字之间的间隙*/
letter-spacing: 10px;
}
8.5 列表样式
li{
background-color: lemonchiffon;
/*列表祥式:常用取值: none-无样式square-正方形circle-空心 圆decimal-数字*/
list-style-type:decimal;
/*列表祥式为自定义图片*/
list-style-image: ur1(img/b.png);
/*列表的祥式放置的位置*/
list-style-position:outside;
/*列表样式缩写:上面三个的缩写*/
list-style: square ur1(img/b.png) inside;
/*常用的列表样式*/
list-style: none;
}
8.6 边框样式
.border{
/* 边框宽度*/
border-width: 2px;
/*边框颜色*/
border-color: red;
/*边框样式: solid-实线dotted-点线dashed-虛线*/
border-style: dashed;
/*边框缩写:样式颜色宽度*/
border: solid green 5px;
/ *边框可以分为4个方向分别设置*/
border-top: dashed black 4px;
border- bottom: dashed darkblue 4px;
border-left: dashed fuchsia 4px;
border-right: dashed #FFOOFF 4px;
/*没有边框*/
border: none;
/ *常用的细边框样式*/
border: solid 1px #ccc;
}
9 复合选择器
由两个或多个基础选择器，通过不同方式组合而成的。
可以更准确更精细的选择目标元素标签。
9.1 全局选择器
语法：* {} 一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，一般将
* 替换为常用标签的名称，并用逗号分隔，其实就是使用并集选择器。
/*整个网站的通用的样式*/
/*所有的页面都需要去除所有的元素本身的默认样式*/
*{
margin: 0;
padding: 0;
font : normal 14px" 微软雅黑" ;
color:#333;
}
9.2 并集选择器
并集选择器（CSS选择器分组）是各个选择器通过 , 连接而成的，通常用于集体声明。
语法：选择器1，选择器2，…选择器N{}
意思是多个选择器都是通用的样式。任何形式的选择器（包括标签选择器、class类选择器id选择器
等），都可以作为并集选择器的一部分。
div,p,ul,ol,dl,dt{
margin:0;
padding:0;
}
9.3 交集选择器
条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
语法：h3.class{ color:red; }
其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，例如div.list。
交集选择器是并且的意思。 即…又…的意思。
例如： table.bg 选择的是： 类名为 .bg 的 表格标签，但用的相对来说比较少。
9.4 后代选择器
概念：后代选择器又称为包含选择器。
作用：用来选择元素或元素组的子孙后代。
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙
子。
格式：父级 子级{属性:属性值;属性:属性值;}
语法：.class h3{color:red;font-size:16px;}
当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
9.5 子元素选择器
作用：子元素选择器只能选择作为某元素**子元素****(亲儿子)**的元素。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。
语法：.class>h3{color:red;font-size:14px;}
比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
9.6 实现代码
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复合选择器title>
<style>
/*全，局选择器:
一-般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，
*/
*{
color: #333;/*定义全局文字颜色， 统- -色彩基调*/
}
/*并集选择器:通常用于集体声明
替换全局选择器;
*/
div,p, d1dt, dd{
/*去掉浏览器的默认样式*/
margin: 0;
padding: 0;
color: #333;/*定义 全局文字颜色，统一色彩基调*/
/*交集选择器*/
1i. myli{
co1or: red;
}
/*后代选择器*/
ul li{
font-size: 28px;
}
.myUL li{
font-family: "微软雅黑";
}
/*子元素选择器*/
.demo>h3{
color: red;
}
style>
head>
<body>
<ul>
<li>123456li>
<li class="myli">123456li>
<li>789li>
<li>789<a href="">点击我试试a>li>
<li class="myUL">
<ul>
<li>11111li>
<li class="myli">22222li>
<li>33333li>
<li>4444
<a href="">点击我试试a>
li>
ul>
li>
ul>
<ol>
<li>111111li>
<li>222222li>
<li>333333li>
<li>444444li>
ol>
<div class="demo">
div1
<h3>将进酒h3>
<ul>
<li><h3>将进酒-----520h3>li>
ul>
div>
body>
html>
9.7 伪类选择器
伪类选择器：和类选择器相区别类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比
如 :link{} 。
作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，
比如可以选择 第1个，第n个元
素。
因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。
- a:link /* 未访问的链接 */
- a:visited /* 已访问的链接 */
- a:hover /* 鼠标移动到链接上*/
- a:active /* 选定的链接 */
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<tit1e>伪类选择器tit1e>
<style>
/*伪类选择器*/
a:link{
color: red;/*默认颜色 是红色*/
}
a:visited{
color: blue;/*访问过的页面是蓝色*/
}
a:hover{
color:green;/*color: green;/*鼠标悬浮是绿色*/
font-size: 28px;
}
a:active{
color: go1d;/*按 下鼠标不放手是金色*/
font-family: "微软雅黑";
}
style>
head>
<body>
<a href="03-常用样式.html" target="_ blank">常用样式a>
<a href="04-盒子模型1. htm1" target="- b1ank">盒子模型a>
<a href="05-综合练习.htm1" target="_ blank">综合练习a>
body>
head>
html>
注意
- 写的时候，他们的顺序尽量不要颠倒 按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
- 因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
- 因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
- 实际开发中，我们很少写全四个状态，一般我们写法如下：
a { /* a是标签选择器 所有的链接*/
font-weight: 700;
font-size: 16px;
co1or: gray;
}
a:hover { /* :hover 是链接伪类选择器鼠标经过*/
co1or: red; /*鼠标经过的时候， 由原来的灰色变成了红色*/
}
9.8 复合选择器对比
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 p .one |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是**>** .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实 |
学习心得
我觉得html以及css的知识点是比较琐碎的，在学习的过程中，死记硬背概念知识点是远远不够的，要多加联系多加尝试。只有在练习的过程中，才能使学到的知识内化于心。可能在刚开始我们制作的网页都比较素，不是很美观，但只要我们持续输出，持续练习，最后都可以随心所欲的制作出我们心中最美观的网页。