HTML和CSS
HTML
基础讲解
要点：
- 标记语言不是编程语言
- .html和.htm都是html文档的后缀
- 标签有围堵和自闭两类
- 开始标签中可以定义属性，属性的值要用引号引起来
H5一般用于移动端的开发
文件标签
H5中新增了一个lang标签，放在<!DOCTTPE html>之后，用于表示页面目标群体所在的国家，我们一般这样写：
<html lang="ch">
meta标签用来指定字符集:<meta charset="UTF-8">
注意，html中的注释格式为：<!-- 内容 -->
图片标签
图片标签是自闭标签
<img src="图片的相对路径"/>
相对路径从html所在的文件夹开始，可以用.表示当前文件夹，".."代表上一层目录，"/"代表根目录。如果图片和html放置在同一个文件夹下，则相对路径可以写为./图片名，也可以写为当前文件夹名/图片名，当然，也可以什么都不写，此时默认就是./
img标签下的属性：
图片加载失败了，就显示alt中的文字信息
列表标签
链接标签
<a herf="点击后要跳转到的位置">要显示的文本内容</a>
属性：
target: _self:在本页面打开； _blank：在空白页面打开
mailto:邮箱名：点击之后会启动邮箱对其发邮件：
也可以为图片添加超链接（但这种方法其实不常用，更多时候是用Javascript实现的)：
块标签
div和span，与CSS搭配使用。
span默认在一行中展示，是行内标签；而div会换行，是块级标签
题外话：
标签：
标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。
语义化标签：H5新定义
在html4中，为了区分不同块的作用以及提高文档可读性，我们会在每一个div标签中定义一个id，而在H5中则直接提供了语义化标签：
<header>:头部
<footer>:尾部
这些标签同样是要结合CSS一起来使用的
表格标签
HTML中，表格只有行的概念，列要分别在行中定义单元格进行。输入的时候是一行一行输入
<table>：定义表格，border属性定义表格线，width表示表格宽度
注意，这里border对应的是“1”“2”等，这个1表示的是用几条线包围td\tr，所以如果这个值是1，两个单元格之间其实有两条线。如果要变成一条线，应该将cellspacing属性，也就是定义单元格之间空白的属性，设置为0.
<tr>:定义行
<td>：定义单元格
<th>:定义表头单元格
<caption>:定义表格标题
上面三个没有样式，而同样是为了与CSS搭配，同时增强阅读性
定义了三个部分之后，表格就会按thead-tbody-tfoot的顺序展示，和书写的顺序就无关了
合并单元格：
-
合并行
colspan，值为几就合并从这里向下几个行，合并之后的算在第一行中
例如：
-
合并列
rowspan，值为几就合并从这里向右几个列，合并之后的算在第一列中
如果不使用CSS,table也可以用来做布局，由于网页的布局总是比较复杂的，并不好说有几列，所以多使用table的嵌套来完成，这样每一行就只有一个单元格了
实例：旅游网首页简版
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>黑马旅游网</title>
</head>
<body>
<!--采用Table来完成布局-->
<!-- 最外层Table，用于整体布局-->
<table width="100%",align="center">
<tr>
<td>
<img src="./source/image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="source/image/logo.jpg" alt="">
</td>
<td>
<img src="source/image/search.png" alt=">"
</td>
<td>
<img src="source/image/hotel_tel.png"alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<table width="100%" align="center" cellspacing="0">
<tr bgcolor="orange" align="center" height="45" >
<td>
<a href="https://www.baidu.com">首页</a>
</td>
<td>
门票
</td>
<td>
酒店
</td>
<td>
香港车票
</td>
<td>
出境游
</td>
<td>
国内游
</td>
<td>
港澳游
</td>
<td>
抱团定制
</td>
<td>
全球*行
</td>
<td>
收藏排行榜
</td>
</tr>
</table>
</tr>
<tr>
<!-- 轮播图-->
<td>
<img src="source/image/banner_3.jpg" width="100%">
</td>
</tr>
<tr>
<td>
<img src="source/image/icon_5.jpg">黑马精选<hr color="orange">
</td>
</tr>
<tr>
<td>
<table width="95%">
<tr>
<td>
<img src="source/image/jiangxuan_1.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
<!-- ¥是人民币符号的表示，其后必须加一个分号-->
</td>
<td>
<img src="source/image/jiangxuan_1.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
<!-- ¥是人民币符号的表示，其后必须加一个分号-->
</td>
<td>
<img src="source/image/jiangxuan_1.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
<!-- ¥是人民币符号的表示，其后必须加一个分号-->
</td>
<td>
<img src="source/image/jiangxuan_1.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
<!-- ¥是人民币符号的表示，其后必须加一个分号-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="source/image/icon_6.jpg">国内游<hr color="orange">
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td rowspan="2" height="100%">
<img src="source/image/guonei_1.jpg">
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
</tr>
<tr>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jingxuan_2.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="source/image/icon_7.jpg">*游<hr color="orange">
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td rowspan="2" height="100%">
<img src="source/image/jiangwai_1.jpg">
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
</tr>
<tr>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚*行</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<img src="source/image/footer_service.png" width="100%">
</tr>
<tr>
<td >
<table bgcolor="orange" align="center" width="100%">
<tr>
<td align="center">
<font color="gray" size="2" >
贾丁版权所有
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
表单标签
表单：用于采集用户输入的数据，用来和服务器进行交互
使用的标签：form,用于定义一个范围，表示采集用户数据的范围
表单项中的数据要想被提交，必须指定其name属性
#可以用来表示当前页面
get和post的区别：
-
input:可以通过修改type属性值，改变元素展示的样式
Input常见元素类型：
-
text：文本输入，是input项的默认值
-
password：密码输入框，是密文显示的
-
radio：单选框。要想让多个单选框实现单选的效果，则多个单选框name属性值必须一样，这样才能声明他们是归于同一组的
为每一个单选框设置value属性作为提交时的值，注意，value和name是不一样的，不能混为一谈
4. checkbox：复选框? checked="checked"//默认被选中
placeholder属性：给出输入框的提示信息
题外话：label元素的作用。如果将输入框对应的文字放置在label中：
- file:文件选择框
<input tyep="file" name=‘file‘> - hidden:隐藏域：不被显示，但是值可以被提交，以便于携带隐藏数据一并提交
- submit:提交按钮
- button:一个纯按钮，一般和JavaScript配合使用以实现动态效果
- 用image做按钮：src引用图片位置，input类型中就填image,这样就会把图片作为按钮了
- color：取色器，选中的颜色也会被提交
- data:年月日
- datatime-local:年月日+小时分钟
- email：会自动对输入的内容进行校验，必须符合邮箱格式
- number：自动校验输入内容是否为数字
-
-
select:下拉列表
列表项要用option进行定义，当然我们也要给select加value
一般第一项都会写“请选择之类的引导性的话，当然用户要是提交了这个也不行，所以要对它设计特定的值并在随后检验题外话：最后提交的表单项是一个key:value形式的，这里的key就是select的name（注意不是它的value,我们不会直接对select设置value的，那就没有选的意义了)
-
textarea:文本域
多行的待输入区域
常用属性:
- cols:列数
- rows:行数
CSS
CSS概述
CSS的优点：
- 功能强大
- 将内容的展示和样式的控制分离（解耦）：降低耦合度以便于分工协作、提高开发效率以及CSS的重用性（因为不需要和具体HTML内容绑定了，可以套在不同HTML上）
CSS与HTML结合
-
内联样式：在标签内使用style属性指定css代码
不推荐使用，没有实现解耦的效果，并且只对当前元素生效 -
内部样式:在head标签内定义style标签，其的标签体内容就是css代码
作用域更大了，可以作用域整个HTML页面
-
外部样式:在外部的CSS文件中写CSS代码
- 定义CSS资源文件
- 在head标签内，定义link标签，引入外部资源文件
这种方式下，CSS文件的作用域可以拓展到整个项目
? 也可以写为：
CSS基础语法
CSS格式
选择器：筛选具有相似特征的元素。例如如果我们写div，那么所有的div都会被控制
CSS的注释：
/*
注释内容
*/
注意，每一对属性都要用分号隔开，最后一个可以不加
如果CSS格式有问题，则不会生效
CSS选择器
-
基础选择器
-
id选择器：选择具体id属性值的元素
语法：#id属性值{内容}
注意，对于div和p,我们也能给他们赋id
建议在一个html中选择唯一id
-
元素选择器:选择有相同标签名称的元素
如果一个元素被多个同级别的css控制且控制的类型相同，则后面的会覆盖前面的
id选择器的优先级高于元素选择器
-
类选择器：选择具有相同的class属性值的元素
语法:.class属性值{}//注意前面那个.
在元素内部可以定义类：
类选择器的优先级也高于元素选择器
-
-
拓展选择器
-
*{}:选择所有元素
-
并集选择器，语法为 ；选择器1，选择器2{}。
-
子选择器，语法为“选择器1 选择器2{}“:筛选选择器1元素下的选择器2元素
例如像这样，操作div下的p -
父选择器,语法为“选择器1>选择器2{}":筛选选择器2的父元素选择器1
操作的是p标签的父类div标签 -
属性选择器,语法为"元素名称[属性名=“属性值]{}",一般用于input元素下的选择（因为input元素下的种类太多了，需要通过指定属性名来指定元素）
-
伪类选择器,选择一些元素具有的状态，语法为：“元素：状态{}”，一个典型的使用是用来控制超链接：
-
CSS属性
-
字体、文本
- font-size:字体大小
- color:文本颜色
- text-align:对齐方式
- line-height:行高
-
背景
background:背景，可以使用图片
background: url("image/test.png")no-repeat center; -
边框
-
border:设置边框，是一个复合属性。
四条线组成一个边框，每一条线都可以单独设置，如果泛指border那就是指四个一起。
多个属性值用空格隔开就好了
-
-
尺寸
- width:宽度
- height:高度
-
盒子模型
把元素当成盒子来看待，主要用来控制布局。
- mergin:外边距
- padding:内边距
每一个方向上的内外边距其实都是可以单独设置的内外边距都是相对的，它取决于当前我们所研究的元素是哪个。
举个例子：
注意，修改内边距会改变盒子大小。解决方案：设置盒子属性box-sizing为border-box，让width和height就是最终盒子的大小。
-
浮动：float
left/right:左浮动、右浮动
最最最最最简单的理解是，浮动可以实现元素排列在一行
关于浮动，这里有更加详细的介绍：https://www.jianshu.com/p/07eb19957991