html和css学习课件（新版）
第一章：初识HTML
本章目标：
- 理解HTML
- 掌握HTML标签的应用
- 掌握超链接的应用
什么是HTML
- HTML是用来制作网页的标记语言
- HTML是HyperText Markup Language的英文缩写,即超文本标记语言
- HTML不是一种编程语言，而是一种标记语言 [标记语言是一套标记标签 (markup tag)] ，描述网页的语言
- HTML使用标签描述网页中图片、文本、音乐、视频、超链接
- 在HTML中，虽然有文本，但是这些文本需要使用html语言中的标记来标识。
- 当被HTML中的标记标识之后的文本，它就超出了我们所理解的简单文档范畴。不再是一个普通的文本。而这些文本可以被浏览器进行识别，并且以不同的形式展示在浏览器上。
- HTML不需要编译,直接由浏览器执行
- HTML文件必须使用html或htm为文件名后缀
- HTML是对大小写不敏感的,HTML与html是一样的；但是我们一般规定：书写时一律小写
- HTML是由W3C组织的维护的
为什么要学习HTML
- 制作精美的电商、门户等静态网页
- 制作网页中的各种交互、动画效果
- 制作网页游戏
- ……
- 工作~ 挣钱~
HTML的发展历史
1989年，伯纳斯-李提出一个基于互联网的超文本系统。他规定HTML规则，并在1990年底写出浏览器和服务器软件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3x9AkTcv-1645879853736)(assets/image-20210413163727691.png)]
- 超文本标记语言(第一版) – 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)
- HTML 2.0 – 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2 – 1996年1月14日,W3C推荐标准
- HTML 4.0 – 1997年12月18日,W3C推荐标准
- HTML 4.01(微小改进) – 1999年12月24日,W3C推荐标准
- XHTML 1.0 – 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布
- XHTML 1.1 – 于2001年5月31日发布
- XHTML 2.0 –2002年
- HTML 5.0 – 2008年发布 2014年10月由万维网联盟（W3C）完成标准制定
什么是html5
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-27Hu7vGA-1645879853737)(assets/image-20210413164143187.png)]
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用。
HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
开发环境及开发工具
- 开发环境：windows、linux、Mac
- 开发工具：VsCode、Sublime Text、WebStorm……
- VsCode优点：智能的代码补全、代码提示、自动保存……
HTML文档结构
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
img/a/h1....
body>
html>
DOCTYPE 声明了文档类型
html标签 描述了文档类型
lang='en' 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知 道，你的站点是中文站，对html页面本身不会有影响这些现在都是html规范，你的页面越规范，就越容易被收录
head标签 包含了所有的头部标签元素
title标签 定义了浏览器工具栏的标题
meta标签 对页面的元信息进行设置，比如针对搜索引擎和更新频度的描述和关键词
charset 属性规定 HTML文档的字符编码 HTML5中的新属性 UTF-8-Unicode 字符编码
设置当前页面的字符编码格式为 utf-8的格式,字符集是一种统一的标准，全世界有很多很多不同的语言，这时候如果针对每个国家的语言都设置一个字符集的标准，会很混乱，比如我写的页面上可能有了中文就不能有英文了，因为识别不出来，为了解决这个问题，就出现了utf-8这个字符集标准，所有的国家，所有的文字，都生成特定的字节码，这样不论你一个页面出现多少的文本内容，都可以正常的识别出啦了.我们国家的汉语简体的字符集标准是GB2312
body标签 为可视化网页内容
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<body>
body>
html>
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
head>
<body>
body>
html>
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>无标题文档title>
<link rel="stylesheet" href="" />
<script src="xxx.js">script>
head>
<body>
body>
html>
HTML标签
概念：
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如 和
- 标签中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- <标签>我是内容
title-AAA
- 也有单标签，比如
、等
-
HTML基本标签
标题的文字 标签 示例 标题标签 ~
h1>静夜思 段落和换行标签 …
、床前明月光
疑是地上霜水平线标签 斜体 … 举头望明月 字体加粗 … 低头思故乡 无语义标签，主要用于布局…结构标签，用于布局span 无语义标签，类似div … 结构标签，用于布局 -
图像标签
img:标签名 src/alt/width/height:属性 <img src="图片路径" alt="替换文本" width="x" height="y"/> src:要展示的图片的路径 【相对路径、绝对路径】 alt:图片替换文本、当图片路径无效时生效 widht:图片宽度 height:图片高度 -
超链接
<a href="链接地址" target="目标窗口位置">文本或图像a> href:链接路径 target: _self：自身窗口 _blank：新建窗口-
跳转链接
- 页面间的跳转
- 不同网站间的跳转
-
锚链接
-
跳至自身固定位置，或A页跳到B页固定位置，需锚标记
-
#创建锚标记 <a name =“maker” >乙位置a> #创建跳转链接 <a href =“#maker” >甲位置a> #跳转到其他页面的固定位置 <a href="./other.html#maker">其他页面丙位置a>
-
-
功能性链接
-
电子邮件、QQ、电话等链接
-
<a href=“mailto:[email protected]”>发邮件a> <a href="mailto:[email protected]" title="fayoujian">发邮件a> <a href=“tel:xxxxxxxx”>打电话a> <a href="tel:13803780378">打电话给我a> <a href='http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes'>QQa>
-
-
元素分类
-
块级元素：
- 独占一行，换行显示，可以设置宽高，如果不设置，默认占据父元素宽度的100%，块可以套块和行
-
行级元素:
- 在行内显示，与其他行内元素并排显示，一行排不下了才折行显示，内容撑开宽高，不可以设置宽高（img、input除外），行只能套行
-
可以相互转换
-
分类： 块级元素：div p br h1~h6 ul ol dl li 行级元素：span a em strong input img(input和img特殊可以设置宽高)
注释和特殊符号（一定要加注释！！！！）
注释 方便阅读代码 浏览器自动忽略注释内容
vscode 常用快捷键： ctrl+/ ctrl+shilt+/
| 特殊符号 | 字符实体 | 示例 |
|---|---|---|
| 空格 | |
百度 | 新浪 |
| 大于号(>) | > |
如果时间>晚上6点，就坐车回家 |
| 小于号(<) | < |
如果时间<早上7点，就走路去上学 |
| 引号 | " |
W3C规范中，HTML的属性值必须用成对的"引起来 |
| 版权符号 | © |
© 2003-2013阿里巴巴 |
HTML特殊字符编码对照表
http://www.jb51.net/onlineread/htmlchar.htm
W3C标准
标签名称、属性名称必须小写
标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合
属性值必须用引号引起来
html书写规范
-
标签换行写法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o7FxPHmT-1645879853738)(assets/image-20210413174922550.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OUY4DtV1-1645879853739)(assets/image-20210413174932376.png)]
-
标签需要关闭
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-khfALcmh-1645879853740)(assets/image-20210413175003764.png)]
-
标签名的属性不能为空
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UVOa74tW-1645879853741)(assets/image-20210413175008340.png)]
课堂练习
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d2vBAfcJ-1645879853742)(assets/image-20210413175034571.png)]
作业
- 见作业素材
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5gggeKjc-1645879853743)(assets/image-20210524120608887.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zeTEAHlu-1645879853743)(assets/image-20210524120646408.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AujFYJ8D-1645879853744)(assets/image-20210524120843199.png)]
第二章：初识CSS
1、本章目标
掌握CSS的语法结构和在网页中的应用
掌握CSS的文本和字体样式
掌握CSS背景样式
2、为什么要使用css
使用css，可以让原始的页面即黑色文字页面变得丰富起来，漂亮起来，实现我们想要的排版布局的效果
3、css是什么
层叠样式表（Cascading Style Sheet）
html是骨架。css是衣服，起到装饰的作用，花花绿绿的，css是用来修饰网页的，让网页变得更美丽，更好看。
4、CSS的优势
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
5、css语法规则
选择器｛
样式属性：值；
样式属性：值；
｝
例如：
h1{
color:red;
font-size:12px;
}
6、css代码书写的位置
1、内联式（头部）
head标签的内部
写法在同一文件里，写在head里面，写style标签里面。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
h1{
color: red;
}
style>
head>
<body>
<h1>我是h1h1>
body>
html>
2、外联式
需要新建一个css 文件【.css 后缀的文件】使css和html关联起来即可。同一个html文件，可以引入无数个css文件。
关联方式有两种：
-
链接式：使用link标签来链接css和html
-
导入式
@import url('./index.css') @import规则必须在CSS文档的开头。
1.链接式
新建一个css文件 。示例：外联样式.css
index.css
h1{
color: blue;
}
新建html，链接css样式
"en">
"UTF-8">
Document
"stylesheet" href="./index.css">
我是h1
导入式
新建一个css文件 。示例：外联样式.css
index.css
h1{
color: blue;
}
新建html，导入css样式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
@import url('./index.css')
style>
head>
<body>
<h1>我是h1h1>
body>
html>
链接式和导入式的区别
- 标签属于XHTML，@import是属于CSS2.1
- 使用链接的CSS文件先加载到网页当中，再进行编译显示
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
- @import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
3、行内样式
在标签内部，写css样式 在开始标签内部，写style=”color:blue” ，
<body>
<h1 style="color: green;">我是h1h1>
body>
7、css样式的优先级
css样式的优先级
样式优先级 取决于 代码的执行顺序，离页面结构（标签）近的，优先级会高一些。
如果你遇到了，书写的样式没有错误，但是页面效果没有出来，那记得去检测一下样式的优先级
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nYVw3zCA-1645879853744)(assets/hai.gif)]
8、选择器的类型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rxM0AWkx-1645879853745)(assets/zfb.jpg)]
1、标签选择器，通过标签来选择页面元素。直接写标签名，会把页面中所有的相同标签的都选中
h1{
属性：值；
}
2、id选择器
通过自定义的id属性来选择元素，id唯一，不可重复id=”id名”
#id名{
属性：值；
}
3、类选择器
通过自定义的类属性，通过类名来选择元素，类可以重复，可以多个，class=”类名”
.类名{
属性：值；
}
9、选择器优先级
!important > 行内(内联)样式>ID选择器>类选择器>标签选择器
-
css的权重
每一个css的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”。css通过css选择器的权重占比，来计算css选择规则的总权值，从而确定 定义样式规则的 优先级次序；也就是说css选择规则的优先级 是按照 css选择器的权值的比较 来确定的，选择器的权值越大就优先级就高，优先级越高就决定了该元素在页面中的最终呈现的效果。 -
css权重的计算方式
类型 权重 内联样式 如: style=" "，权值为1000。 ID选择器 如：#name，权值为0100。 class类选择器，伪类和属性选择器 如.name，权值为0010。 标签选择器和伪元素选择器 如div p，权值为0001。 -
!important
!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。 div{color:#f00!important;} -
css优先级规则
-
css选择规则的权值不同时，权值高的选择器优先；
-
css选择规则的权值相同时，后定义的选择器规则优先(后面定义的会把前面定义的覆盖)；
-
.one{ color:red;} .one{ color:green;} -
css属性后面加 !important 时，无条件绝对优先；
-
总体来说： !important>行内样式 > id选择器 > class选择器 > 标签选择器 > 通配符选择器
通配符选择器 '*' 选择页面所有的元素 【全局】 往往会用在样式重置上
*{
margin:0;
padding:0;
}
当两个权值进行比较时，从高位到低位逐位进行比较，从高等级开始比较，如果相同等级的权值相同，再继续进行下一个等级的比较。如果不相同，直接应用相同等级权值比较大的选择器对应的样式。而不是把四个等级的权值加起来进行比较。
10、字体样式
修改字体时，只要电脑内有的字体都可以进行修改
怎么看电脑内装的字体，计算机，c盘，Windows，fonts,就可以看到我们电脑上装的所有字体
font-style:
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
font-weight:
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100-900 整百数值 400 === normal 700 === bold
font 复合写法，一个样式属性可以定义以上的多个样式 可以按顺序设置如下属性：
font-style
font-variant
font-weight
font-size/line-height
font-family
//按照样式属性顺序来写 /*复合写法，记得加font-size 否则无效 */
font: font-style font-weight font-size font-family;
11、文本样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QIxFzMqe-1645879853746)(assets/1614779085135.png)]
-
color颜色取值的格式
1、直接写颜色 也要复合写法 yellowgreen 黄绿色
2、16进制
3、RGB RGBA 红绿蓝 三原色
颜色不需要记，ui会给你的
-
文字对齐方式
text-align: center 居中
right 右对齐
left 左对齐
对齐参照点不同 ，对齐的方式也不同，以父级元素为标准，不设宽度，默认为浏览器宽度。暂时有这个概念，盒子模型学完就推翻了
如果想要指定对齐，需要设置宽和高
宽：weight 高：hight
-
text-indent 首行缩进
单位可以是px，像素，也可以是em，即缩几个字体，根据全部字体的大小来变化，首行缩进用em比较合适
开启控制台进行调整
-
line-height： 设置行高，设置文字的垂直居中 line-height，和父元素的高度保持一致，即垂直居中
- height = line-height 可以实现文本垂直居中
- 使用场景：
- 单行文本：垂直居中
- 多行文本：调行间距
-
设置文本装饰
text-decoration: line-through 删除线
underline 下划线
overline 上划线
12、伪类选择器语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MOyulM7M-1645879853746)(assets/wps2.jpg)]
**注释：**在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
**注释：**在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！
love hate
如果四个一起使用，并想看到所有的效果的话 顺序不能乱 link visited hover active
<style>
/*
标签名:伪类的名称{
样式
}
*/
a:link{
color:red;
}
a:visited{
color:greenyellow;
}
a:hover{
color:skyblue;
}
a:active{
color:#000;
}
div{
width: 200px;
height: 200px;
background-color: red;
cursor: help;
}
div:hover{
width: 500px;
height: 500px;
background-color: forestgreen;
}
style>
head>
<body>
<a href="http://www.baidu.com">百度a>
<div>div>
body>
13、鼠标形状 cursor：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0vtgy3lq-1645879853747)(assets/wps3.jpg)]
hover 当鼠标移动到上面的时候，执行的样式
语法 ：
a:hover{
cursor: move;
}
visited 针对a标签超链接，当链接从未访问过时，显示初始颜色，只要点击过，就显示visite设置的颜色。
鼠标指针变化
直接在style下面写属性cursor：值；
其中的值分别代表：
pointer:指针变小手
move: 移动
wait: 等待（不要用）
14、制作京东新闻资讯页
15、背景属性
- 背景颜色：background-color:red;
- 背景图像：
- 图像路径：background-image:url(‘图片路径’)
- 重复方式：background-repeat:no-repeat (不平铺)/ repeat（平铺 默认值）/repeat-x （水平方向平铺） /repeat-y （垂直方向平铺）;
- 背景定位：background-position:10px 15px(定位坐标);
- 像素值：px % em rem
- 关键词：
水平方向：left、center、right
垂直方向：top、center、bottom
- 背景属性简写：background:#f9f9f9 url(img/buy.png) no-repeat 10px 15px;
作业
- 见作业素材
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dgEJ234E-1645879853747)(assets/image-20210416164724359.png)]
第三章：列表、表格
本章目标
- 掌握列表的使用
- 熟悉表格的基本用法
- 掌握表单的用法
- 掌握CSS的高级选择器的用法
列表
一系列相关数据的展示形式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EZFvCEZQ-1645879853748)(assets/image-20210413225533833.png)]
- 有序列表
- 无序列表
- 自定义列表
1、有序列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PJ2IyYmE-1645879853748)(assets/ol.png)]
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<ol>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
......
ol>
示例：
<body>
<ol>
<li>代表委员建议降低个税最高边际税率，该降吗？怎么降？li>
<li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗li>
<li>中国进入“两会”时间 外国记者最关注啥？li>
<li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相li>
ol>
<ol type="a">
<li>代表委员建议降低个税最高边际税率，该降吗？怎么降？li>
<li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗li>
<li>中国进入“两会”时间 外国记者最关注啥？li>
<li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相li>
ol>
<ol start="10" reversed type="a">
<li>代表委员建议降低个税最高边际税率，该降吗？怎么降？li>
<li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗li>
<li>中国进入“两会”时间 外国记者最关注啥？li>
<li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相li>
ol>
body>
2、无序列表
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
<ul>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
......
ul>
比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。
示例：
<body>
<ul>
<li>代表委员建议降低个税最高边际税率，该降吗？怎么降？li>
<li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗li>
<li>中国进入“两会”时间 外国记者最关注啥？li>
<li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相li>
ul>
<ul type='circle'>
<li>代表委员建议降低个税最高边际税率，该降吗？怎么降？li>
<li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗li>
<li>中国进入“两会”时间 外国记者最关注啥？li>
<li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相li>
ul>
脚下留心：
1.
中子元素只能嵌套，直接在
标签中输入其他标签或者文字的做法是不被允许的。
2. 与 之间相当于一个容器，可以容纳所有元素。
3. 列表会带有自己样式属性，放下那个样式，一会让CSS来！
3、自定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1dt>
<dd>名词1解释1dd>
<dd>名词1解释2dd>
...
<dt>名词2dt>
<dd>名词2解释1dd>
<dd>名词2解释2dd>
...
dl>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i136p3mp-1645879853749)(assets/image-20210413230402339.png)]
<body>
<dl>
<dt>雍正dt>
<dd>纯元dd>
<dd>甄嬛dd>
<dd>令妃dd>
dl>
body>
使用场景：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hFdaQZsq-1645879853749)(assets/dldt.png)]
4、列表样式 （通过css 来修改列表的样式）
-
list-style-type 修改列表项标识类型
- none无标记 disc默认 标记是实心圆。 circle标记是空心圆 square标记是实心方块 decimal标记是数字。
-
list-style-position 修改列表标识的位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfOleET1-1645879853750)(assets/image-20210413230706957.png)] -
list-style-image
-
属性使用图像来替换列表项的标记。 url路径
-
<style> ol{ list-style-image: url(./fang.png); } style> <ol> <li>代表委员建议降低个税最高边际税率，该降吗？怎么降？li> <li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗li> <li>中国进入“两会”时间 外国记者最关注啥？li> <li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相li> ol>
-
-
list-style 简写属性,在一个声明中设置所有的列表属性
- 可以按顺序设置如下属性：
- list-style-type
- list-style-position
- list-style-image
- 可以按顺序设置如下属性：
练习
表格
表格的基本结构：行、列、单元格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c5wUYwxP-1645879853750)(assets/image-20210413231131362.png)]
基本语法
<table>
<tr>
<th>表头th>
<th>表头th>
tr>
<tr>
<td>单元格1td>
<td>单元格2td>
……
tr>
……
table>
table：表格
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
td{
border: 1px solid rgb(197, 194, 194);
}
style>
head>
<body>
<table border="0" cellspacing='0' cellpadding='0'>
<tr>
<td>姓名td>
<td>年龄td>
<td>籍贯td>
<td>爱好td>
tr>
<tr>
<td>张三td>
<td>20td>
<td>河北td>
<td>篮球td>
tr>
<tr>
<td>张三td>
<td>20td>
<td>河北td>
<td>篮球td>
tr>
table>
body>
html>
<table border="0" cellspacing='0' cellpading='0'>
表格合并
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R62hBNgT-1645879853751)(assets/%E6%88%90%E7%BB%A9%E8%A1%A8.png)]
- 分析是行合并还是列合并
colspan=‘值’ 列合并 rowspan=‘值’ 行合并 值：要合并的行和列的数
-
在要合并的表格，靠左靠上的td标签中加合并属性
-
删除掉被合并的元素 如果不删除，会多出一块。
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>成绩表title> <style> td{ width: 100px; border: 1px solid black; } style> head> <body> <table> <tr> <td colspan="3">三年级五班学员的语文成绩和数学成线td> tr> <tr> <td rowspan="2">白杨td> <td>语文td> <td>98td> tr> <tr> <td>数学td> <td>96td> tr> <tr> <td rowspan="2">杨晨td> <td>语文td> <td>92td> tr> <tr> <td>数学td> <td>100td> tr> table> body> html>作业：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-haYYgsic-1645879853751)(assets/image-20210527144951718.png)]
第四章：表单
表单
1、什么是表单
表单用于收集用户的信息，是浏览器和用户之间沟通的桥梁。
就是你在注册账号时，让你输手机号，输密码那个小框框，明白了吧
还不明白？ 来 给你个图
现实中的表单，类似我们去银行办理信用卡填写的单子。 如下图
目的是为了收集用户信息。
在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
2、表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="服务器url地址" method="提交方式get/post" name="表单名称">
各种表单控件
form>
例如：你需要把数据提交到 www.aaa.com 这个域名所对应的服务器上 http://www.aaa.com
常用属性：
- Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。 - method
用于设置表单数据的提交方式，其取值为get或post。 - name
用于指定表单的名称，以区分同一个页面中的多个表单。
注意： 每个表单都应该有自己表单域。
3、input 控件(重点)
在上面的语法中，标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，标签还可以定义很多其他的属性，其常用属性如下表所示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ylEv53e-1645879853751)(assets/input.png)]
<body>
<form method="post" action="a.html">
<p> 名字：<input name="name" type="text"> p>
<p> 密码：<input name="pass" type="password"> p>
<p>
<input type="submit" name="Button" value="提交">
<button>提交button>
p>
<p><input type="image" src="./图片.png" style="width: 100px;height: 40px;">
<input type="reset" name="Reset" value="重填">
p>
form>
body>
注意：
size 不能很精确地控制宽度，建议使用css来控制宽度
4、radio单选框多个选项只能选择一个的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lc8TZzqu-1645879853752)(assets/radio.png)]
解决方法，给两个input框添加一个相同的name,关联起来，这样就只能选择一个了
<body>
<form action="">
请选择性别：
<input type="radio" name="sex">男
<input type="radio" name="sex">女
form>
body>
5、label标签
label 标签为 input 元素定义标注（标签）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得焦点
如何绑定元素呢？
for 属性规定 label 与哪个表单元素绑定。 for属性和被绑元素的id属性的值要一致
<label for="male">Malelabel>
<input type="radio" name="sex" id="male" value="male">
<body>
<form action="">
请选择性别：<input type="radio" name="sex" id="man">
<label for="man">男label>
<input type="radio" name="sex" id="woman">
<label for="woman">女label>
form>
body>
type=”checkbox”的时候，复选框。可重复选择
type=”button”的时候，是登陆框。想让文字出现在登陆框里面，需要在input里面添加value属性，value后面跟要添加的文字。
例：
效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2bS8bGXG-1645879853752)(assets/wps1-1618327956755.jpg)]
按钮效果也可以直接用butto双标签，效果一样，注册
6、textarea控件 (多行文本域 )
如果需要输入大量的信息，就需要用到标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
textarea>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xkbcbkHP-1645879853753)(assets/textarea.png)]
开发中评论输入框(发帖)一般使用可编辑的div进行操作
contenteditable=“true” 可以把一个元素改为可编辑状态
<div contenteditable="true">这是一个div标签，点击可以编辑div>
7、下拉菜单
使用select控件定义下拉菜单的基本语法格式如下
<select>
<option>选项1option>
<option>选项2option>
<option>选项3option>
...
select>
注意：
- 中至少应包含一对。
- 在option 中定义selected =" selected "时，当前项即为默认选中项。
8、表单的高级应用
readonly 只读 只能读 不能修改 直接写在表单里面
disabled 禁用
hidden
- 隐藏 hidden 可以用在任意的标签上
- 在表单中作为input 的 type类型值 来使用时 ，此input控件不会在页面显示出来，但是我们可以把此控件作为存数数据的地方 （隐藏域）
- 使用场景：例如我们有一个数据不需要在页面展示出来，但是需要随表单域一同提交到后台，那么这种数据，就可以放在hidden 类型的input控件中。
placeholder属性
input框设置提醒字符，打字的时候会自动消失，比如某些输入框会提醒，请输入 账号等
语法：在input标签内添加placeholder=”要提示的内容”
请输入姓名：<input type="text" placeholder="请输入用户名:">
CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fqmLlgyT-1645879853753)(assets/jiao.png)]
并集选择器
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4l8mfFQ6-1645879853753)(assets/bing.png)]
记忆技巧：
并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
A B{ css样式 } 选择元素A的所有的后代元素B A B之间是空格隔开
div p{ } 选择元素div的所有的后代元素p
A B 选择器的类型没有限制
div.demo p{}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LoxKD3Wu-1645879853754)(assets/li.png)]
示例：
<style>
h1 em{
color: red;
}
style>
head>
<body>
<h1>This is a <em>importantem> headingh1>
<h1>我是第二个h1 <span>span包裹起来了 <em>我是emem>span>h1>
<p>This is a <em>importantem> paragraph.p>
body>
子元素选择器（子代选择器）
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qmi6aK9H-1645879853754)(assets/zi1.png)]
白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
子代和后代的区别，后代只要是后代的都发生变化，即爸爸选中后，儿子，孙子，只要名字一样都发生变化。
子带，爸爸选中后，只有儿子发生变化。
父元素 > 子元素 { }
比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ja9ZAadN-1645879853755)(assets/san.jpg)]
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
h1>strong{
color: red;
}
style>
head>
<body>
<h1>This is <strong>verystrong> <strong>verystrong> important.h1>
<h1>This is <em>really <strong>verystrong>em> important.h1>
body>
属性选择器
只要具备某个属性，或者属性=属性值，就会被选中执行某些操作。
语法：
[属性]{ css声明}
[href]{ css 样式} // 选取所有带有 href 属性的元素
[src]{ css 样式} // 选取所有带有 src 属性的元素
也可以：
[属性=”值”]{ css 声明；}
[href = 'http://www.baidu.com']{} //选取带有href属性 并且属性值是‘http://www.baidu.com’的元素
^= 以某某开头
[href ^='https']{} //选取带有href属性并且是以‘https’开头的元素
$= 以某某结尾
[href $='https']{} //选取带有href属性并且是以‘https’结尾的元素
*= 包含某某
[href *='https']{} //选取带有href属性并且只要包含‘https’的元素
<head>
<meta charset="UTF-8">
<title>属性选择器title>
<style>
/* 只要包含href属性的标签全部选中 */
[href]{
color: red;
}
/* href属性的值必须完全是 'aqiyi.com' */
[href='aqiyi.com']{
color: rgb(161, 30, 30);
}
/* href属性的值是以 h 开头的选中 */
[href ^='h']{
color: yellow;
}
/* href属性的值是以 n 结束的选中 */
[href $='n']{
color: red;
}
/* href属性值中包含baidu的 选中 */
[href *='baidu']{
color: seagreen;
}
style>
head>
<body>
<p><a href="http://www.baidu.com">百度a>p>
<p><a href="www.google.cn">谷歌a>p>
<p><a href="aqiyi.com">爱奇艺a>p>
body>
html>
选择器优先级
!important>内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器> 通配符 > 继承 > 浏览器默认属性
综合练习-完成京东注册页
作业
见作业素材
第五章：CSS 盒子模型(Box Model)
本章目标
会使用盒子属性美化网页元素
理解标准文档流及其组成和特点
会使用display属性设置元素显示方式
什么是盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHWzoZ9N-1645879853755)(assets/box-model-01.png)]
以生活中场景为例：上图照片墙中，可以把相框看作一个盒子，每个盒子都有自己的边框（border），都有自己的内容(content)照片，照片与相框之间的间距(padding)，以及每个相册之间的间距（margin）。这就是生活中的盒子模型。
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
下面的图片说明了盒子模型(Box Model)：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LfuHEZle-1645879853755)(assets/box-model.gif)]
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像 width height。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-itaVXhkq-1645879853756)(assets/image-20210416213650933.png)]
<style>
.inner {
width: 200px;
height: 200px;
padding: 20px;
border: 2px solid #000;
margin: 20px;
background-color: aliceblue;
}
style>
<body>
<div class="inner">div>
body>
边框-border
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cNWQLJRX-1645879853756)(assets/image-20210416214019132.png)]
边框可以设置：
-
边框样式
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yeH2N9SP-1645879853757)(assets/image-20210416214536424.png)]
-
边框颜色
- border-top-color、border-right-color、border-bottom-color、border-left-color
- 复合写法：border-color
-
边框粗细
- border-top-width、border-right-width、border-bottom-width、border-left-width
- 复合写法：border-width
- 关键字： thin、medium、thick
- 像素值：px
-
边框简写
-
可以同时设置边框颜色、粗细、样式
-
border-bottom: 9px #F00 dashed ; border: 9px #F00 solid;
-
内边距-padding
-
padding-left
-
padding-right
-
padding-top
-
padding-bottom
-
padding
-
padding-left:10px; padding-right: 5px; padding-top: 20px; padding-bottom:8px; padding:20px 5px 8px 10px ; padding:10px 5px; padding:10px 5px 7px; padding:10px;
外边距-margin
-
margin-top
-
margin-right
-
margin-bottom
-
margin-left
-
margin
-
margin-top: 1 px margin-right : 2 px margin-bottom : 2 px margin-left : 1 px margin :3px 5px 7px 4px; margin :3px 5px 9px; margin :3px 5px; margin :8px;
盒子模型的尺寸
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oAZ7ewte-1645879853757)(assets/image-20210416222445097.png)]
- 盒子自身的尺寸
- 高度=上下边框+上下内边距+内容高度
- 宽度=左右边框+左右内边距+内容宽度
- 盒子在页面中占位的尺寸
- 高度=上下外边距+上下边框+上下内边距+内容高度
宽度=左右外边距+左右边框+左右内边距+内容宽度
- 高度=上下外边距+上下边框+上下内边距+内容高度
盒子模型的分类
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。所以就有了盒子模型的分类：
-
标准盒模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sInHgNZj-1645879853758)(assets/image-20200626114429381.png)]
-
怪异盒模型（IE盒模型）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9vuxuGlw-1645879853758)(assets/image-20200626114645444.png)]
box-sizing属性
-
content-box：盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框 【标准盒模型】
-
border-box： 盒子的实际高度和宽度包括元素内容、边框和内边距 【怪异盒模型】
display属性
行内元素和块级元素区别
- 块级元素会独占一行，其宽度自动填满其父元素宽度
- 行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
- 块级元素可以设置 width, height属性，行内元素设置width, height无效
- 块级元素可以设置margin 和 padding
display属性
-
控制元素的显示和隐藏
-
块级元素与行内元素的转变
-
值 说明 none 设置元素不会被显示 inline 元素会被显示为内联元素 block 元素会被显示为块级元素 inline-block 行内块元素
标准文档流
标准文档流，文档是按照一定规矩排列的，默认的就是元素会从左至右，从上至下排列，块级会独占一行，行内元素会和小伙伴们共享一行，在没有经过浮动、定位、等css修饰的前提下，拥有默认的排列布局方式的文档。
练习
-
制作京东快报模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OzvJkN8V-1645879853758)(assets/image-20210528120210792.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g6VuLXrh-1645879853759)(assets/image-20210528120221214.png)]
-
制作京东顶部导航
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KR14E5HB-1645879853759)(assets/image-20210420165723505.png)]
作业
见作业素材
第六章：浮动
本章目标
会使用float属性布局网页
会使用clear属性清除浮动
会使用overflow进行溢出处理
浮动在网页中的应用
浮动-float属性
| 属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值，元素不浮动 |
#左浮动
.layer01 {
float:left;
}
浮动的原理及特性
-
float 先浮后动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OWOUNzBv-1645879853759)(assets/image-20210420205710193.png)]
-
所有的元素都可以浮动
-
具有float属性的元素在父标签中是不占空间的（脱离标准文档流）
-
float能解决标签之间有间隙的问题
浮动对行级元素和块级元素的影响
- float 对行内属性标签的影响
- float之后能设置width和height属性，并支持margin和padding属性
- float 对块属性标签的影响
a：在没有设置宽高的情况下浮动后，内容撑开宽度高度，如果设置了宽高，那就按照设置的宽高来显示
b：可以使块属性元素并排排列
清除浮动(扩展盒子高度)的方式
消除浮动对于页面后续布局的影响
-
clear属性
属性值 说明 left 在左侧不允许浮动元素 right 在右侧不允许浮动元素 both 在左、右两侧不允许浮动元素 none 默认值。允许浮动元素出现在两侧 clear：在浮动元素的末尾添加一个空标签，在此空标签上设置clear属性 清除两侧浮动 .clear { clear:both; height:0; overflow:hidden; }
2.overflow属性(本身是做溢出处理)
| 属性值 | 说明 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在盒子之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容， |
overflow 本身的功能是做溢出处理的，
兼职做清除浮动
使用：在浮动元素的父元素上设置overflow：hidden
3.直接给浮动元素的父元素设置height 但是这种方式，基本不用，网页的高度一般是靠内容撑开的。
两种扩展盒子高度的区别
- 使用overflow属性扩展盒子高度减少代码量，也减少了空的HTML标签，使代码更加简洁，清晰，从而提高了代码的可读性和网页性能
- 如果页面中有定位元素，并且元素超出了父级的范围，就必须使用clear属性来清除浮动来扩展盒子高度
练习
作业
见作业素材
课前测：彩妆 20分钟
第七章：定位
本章目标
会使用position定位网页元素
会使用z-index属性调整定位元素的堆叠次序
定位在网页中的应用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-asY6MCn6-1645879853760)(assets/image-20210420220540755.png)]
position属性
只要设置了position属性，就可以产生偏移，我们可以通过top,left,right,bottom 来确定元素在网页中的位置
| 属性值 | 说明 |
|---|---|
| static | 默认值，没有定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
static属性值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xxweGVJw-1645879853760)(assets/image-20210420220607133.png)]
没有定位 以标准流方式显示
relative属性值-相对定位
-
相对自身原来位置进行偏移
-
偏移设置：top、left、right、bottom
- 单位：px
-
#first { position:relative; left:20px; top:-20px; } -
设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
设置了相对定位的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移
absolute属性值-绝对定位
-
偏移设置： left、right、top、bottom
单位：px -
#second { position:absolute; right:30px; } -
使用了绝对定位的元素以它最近的一个“已经定位（相对、绝对、固定）”的“祖先元素” 为基准进行偏移。
-
如果没有已经定位的祖先元素，那么会以body为基准进行定位
-
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
fixed属性值-固定定位
-
偏移设置： left、right、top、bottom
单位：px -
.pos_fixed{ position:fixed; top:30px; right:5px; } -
元素的位置相对于浏览器窗口是固定位置即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关，因此不占据空间
z-index属性
- 调整元素定位时重叠层的上下位置
- z-index属性值：整数，默认值为0
- 设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
- z-index值大的层位于其值小的层上方（值越大越靠上，值越小 越靠下）
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hiyaZZH2-1645879853761)(assets/image-20210420221128310.png)]
练习
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l00MuKJx-1645879853761)(assets/image-20210420221142852.png)]
作业
见作业素材
课前测：轮播图效果 5分钟