一.HTML概述
1.1 HTML是什么?
HTML(Hyper Text Markup Language): 超文本标记语言
超文本：超级文本（文本、图片、视频、音频等）
标记(标签/元素/节点)：就是由尖括号括起来的一组内容
![]()
等
就是用于开发网页的最基础的语言
关于HTML需要注意的是:
1) 通过HTML开发的网页文件通常是以 .htm 或 .html为后缀
2) 通过HTML开发的网页文件由浏览器负责解析并显示
3) HTML本质就是一个文档(txt,word,html,ppt)
1.2 HTML的结构
1.2.1.例:
网页
1.2.2.HTML结构详解
(1) 文档声明, 用来声明HTML文档所遵循的HTML规范和版本 上面是html5.0的声明, 也是目前最常用的版本
(2) 根标签, 用于包裹所有的网页内容(除了文档声明)
(2) 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3) 体部分, 用来存放可视化的网页内容. 即真正的网页数据
(4) 声明网页的标题
(5) 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.
1.3 HTML语法(了解)
1.3.1、html标签
标签：也叫做标记、元素等，标签分为开始标签，例如：
、
和结束标签，例如:
、
开始标签和结束标签之间还可以包含其他内容。
声明网页的标题
有些标签开始标签和结束标签之间没有内容要包裹，通常可以写成自闭标签，例如：
![]()
等
1.3.2、html属性
在标签上可以声明属性(属性不能独立存在,必须声明在标签上)
这是一个div元素
标签上可以声明多个属性，多个属性之间用空格分隔
标签上的属性的值可以使用单引号或者双引号引起来
1.3.3、html注释
格式:
注释的作用:
(1)为代码添加解释说明
(2)将一些暂时不需要执行的代码注释
浏览器对于html注释中的内容不会解析，也不会显示！
1.3.4、html空格和换行
在浏览器中，多个连续的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。那么：
如何在网页中做一个换行：可以使用
如何在网页中做一个空格：可以使用 或 做空格
补充: HTML中是不区分大小写的！
HTML中对语法要求非常不严格！（比如大小写混用，或者标签只有开始没有结束，或者标签的不合理嵌套），但是我们在书写HTML时要按照规范来写。
2.HTML标签
2.1.图像标签:
注意: 不推荐写带盘符的绝对路径,因为将来项目发布,位置会改变,到时还要修改图片的路径
./ 表示当前目录(当前文件所在的目录)(可省略)
../ 表示当前目录的上一级目录里(也就是当前目录的父目录)
../../ 表示当前目录的上一级目录的上一级目录(也就是当前目录的父目录的父目 录)
2.2.超链接标签:
超链接就是a标签，通过a标签可以在网页中创建指向另外一个文档的超链接 点击超链接可以跳转到另外一个网页(图片/下载路径等)
这里可以包裹文本或图片
其中 href 属性用于指定点击超链接后将要跳转到的URL地址
target属性用于指定以何种方式打开超链接
_self：默认值, 表示在当前窗口中打开超链接
_blank：表示在新的窗口中打开超链接
2.3.表格标签:
table:定义一个表格
tr(table(表格) row(行)): 定义表格中的行
td(table data cell): 定义表格中的单元格
th(table header cell): 用于定义表头中的单元格,其中的文本默认加粗并居中
2.4.表单标签
表单的作用:
用于向服务器提交数据, 此外在超链接或者url地址的后面拼接参数也可以向服务器提交数据!
向服务器提交数据的两种方式：
(1)通过表单向服务器提交数据
action属性:指定表单的提交地址
method(方法)属性:指定提交方法,常用的提交方式为GET和POST,若不指定提交方式,默认为GET方式.
(2)通过超链接向服务器提交数据
http://www.baidu.com?username=张三&pwd=123&like=篮球
百度一下,你就不知道!
在地址栏URL地址的后面通过问号(?)可以拼接参数，参数可以有多个，多个参数之间用&分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如:张三/123/篮球)，在回车后访问百度服务器的同时，就可以将问号后面拼接的参数一并带给百度服务器。
2.5.表单项标签
1、input元素：
(1)普通文本输入框(比如:用户名/昵称/邮箱/验证码等)
(2)密码输入框(比如:密码/确认密码等)
input type="password" name="pwd"/>
(3)单选框(比如:性别/部门等)
男
(4)复选框/多选框(比如:爱好/岗位等)
(5)普通按钮(比如:换一张图片)
普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为~~~~
(6)提交按钮(比如:提交/注册/登录)
提交按钮用于提交表单中的数据到服务器中!
2、select、option标签：
select用于定义一个下拉选框
option用于定义下拉选框上的选项
selected设置当前option选项默认被选中
3、textarea多行文本输入区域：
cols属性: 用于设置文本输入框的列数(宽度)
rows属性: 用于设置文本输入框的行数(高度)
placeholder属性: 设置输入框中的提示消息!
3.表单细节问题
3.1、提交表单时，表单中的数据为什么没有被提交？
对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会被忽略。例如：
3.2、如何让多个单选框只能有一个被选中？
要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！
性别:
男
女
3.3、为什么单选框、复选框选择某一项后提交的值都是on?
因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。
因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)，例如：
男
女
3.4、如何设置单选框或复选框默认选中某一项?
可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前单选框或复选框默认被选中。例如：
男
女
篮球
足球
排球
3.5、如何设置下拉选框默认选中某一项?
在option标签上添加一个selected="selected"属性，可以让当前option选项默认被选中，例：
3.6、下拉选框中option选项上的value属性的作用是什么？
如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。
如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容
3.7、音频,视频标签
音频标签:
audio{
border-radius: 20px; 设置圆角边框
}
audio:focus{ /* 获取焦点audio元素 _/
/_ 设置元素的外围(包在边框外的线) */
outline: none;
}
autoplay="autoplay" 页面加载完毕后自动播放
controls属性:为用户添加播放,暂停,音量控制等插件
视频标签:
audio{
border-radius: 20px; 设置圆角边框
}
video:focus{ /* 获取焦点audio元素 _/
/_ 设置元素的外围(包在边框外的线) */
outline: none;
}
autoplay="autoplay" 页面加载完毕后自动播放
controls属性:为用户添加播放,暂停,音量控制等插件
4.元素类型
div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）
p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）
div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。
span：行内元素，默认可以和其他元素显示在同一行。 同是行内元素的还有:b,i,u,input,img(这两个可以设置宽高)
(1)块级元素（block）
默认情况下，块级元素独占一行
可以设置宽和高，如果设置了就是设置的宽和高
如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)
比如: div/p/h1~h6/form/table/div/p 等元素都是块级元素
(2)行内元素（inline）
默认情况下，多个行内元素可以处在同一行
不能设置宽和高
比如: span/input/img/i/b 等元素都是行内元素
(3)行内块元素（inline-block）
既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)
二.CSS
1.css概述?
CSS:层叠样式表,是用于美化,渲染网页的一门语言和传统的html标签属性设置样式相比,使用CSS设置样式可以实线:将展示数据的html代码和设置样式的CSS代码进行分离,可以增强网页的展示能力.
2.CSS的三大特性
2.1.层叠性
是指多种CSS样式的叠加,是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉.
一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准.
1.样式冲突,遵循的原则是就近原则.那个样式离结构近,就执行那个样式.
2.样式不冲突,不会层叠
2.2.继承性
所谓的继承性是指书写CSS样式表时,子标签会集成父标签的某些样式.
注意:恰当的使用继承可以简化代码,降低CSS样式的复杂性.子元素可以继承父元素的样式(text- , font- , line- 这些元素开头的都可以继承,以及color属性)
2.3.优先级关系
定义CSS样式时,经常出现两个或更多规则应用在同意元素上,这时就会出现优先级的问题.
优先级: !important>内联样式(1000)> id选择器(100)>class选择器(10)>元素名选择器(1)>通用选择器>继承(0)>默认 如果一个选择器中包含多个选择器类别,可以通过权重值相加,权重值大的优先级高如果权重值相同,书写在后面的会覆盖前面的.
权重形同时,CSS遵循就近原则.也就是说靠近元素的样式具有最大的优先级,或者说排在最后面的样式优先级最大.
3.引入CSS
3.1.引入CSS方式一
在标签上添加一个style属性,在style属性内部,可以设置css样式,例如:
这是一个div...
当css代码特别多时,容易造成页面结构的混乱,而且代码无法复用，不利于后期的扩展和维护。这种方式不推荐使用!
3.2.引入CSS方式二
在head标签内部添加一个style标签,在style标签内部可以添加CSS样式.