web准备介绍：
web准备总结：
浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox)、谷歌（Chrome）、猎豹浏览器、Safari和Opera等
「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
总结：渲染引擎是兼容性问题出现的根本原因。
开发工具: Sublime Text Visual Studio Code编辑器 WebStorm PyCharm
html全称HyperText Mackeup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。
作用：HTML是负责描述文档语义的语言。
注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。
一些名词:
网页 : 由各种标记组成的一个页面就叫网页。
主页(首页): 一个网站的起始页面或者导航页面。
标记 : <p>称为开始标记 ，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素 : <p>内容</p>称为元素.
属性 : 给每一个标签所做的辅助信息
HTML 的编写规范:
所有的都要正确嵌套,不能交叉嵌套
所有标记都要小写
所有标记都要关闭
<span></span><br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” />所有的属性值必须加引号 <h1 id="head"></h1>
所有的属性必须有值 <input type="radio" checked="checked" />
对换行不敏感,对tab不敏感
空白折叠现象
标签要严格封闭
新建html文档,输html:5 tab一下 生成下面页面
<!doctype html> #文档声明头 XHTML是严格的、纯净的HTML XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言
<html lang="en">
<head> #头标签 title meta link style
<meta charset="UTF-8"> #提供页面的有关信息
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> #指定网页的标题,在浏览器最上方显示
<link rel="stylesheet" href=""> #定义文档与外部资源的关系。
<style></style> #定义内部样式表与网页的关系
</head>
<body></body>
</html>
---------------------------------------------------
Meta标签 元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
常用的meta标签：
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge">
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
效果如下：
<meta name=viewport content="width=device-width, initial-scale=1">
上面这个标签，是让我们网页支持移动端，移动设备优先
字体标签 : h1 ~ h6 逐渐变小 具有align属性，属性值可以是：left、center、right。 <h1>你好</h1> <h6>你好</h6> 排版标签: <div> 、<span> 、 <br>、<hr>、<center>、<pre> 超链接 <a> 图片标签 <img> 特殊字符 ：空格 （non-breaking spacing，不断打空格） <：小于号（less than） >：大于号（greater than） &：符号& "：双引号 '：单引号 ©：版权© ™：商标™ 要求大家背过的特殊字符： 、<、>、© 比如说，你想把<p>作为一个文本在页面上显示，直接写<p>是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到转义字符。应该这么写： 这是一个HTML语言的<p>标签 ok,下面这几句话，大家一定牢牢记住。HTML标签是分等级的。HTML将所有的标签分为两种： 文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。 从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。 错误写法：（把h系列的标签放到p里） <span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。 div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。 span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。 就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。 <p>标签和<br>标签的区别在于：<p>标签会在段落的前后自动插入一个空行，而<br>标签没有空行；而且<br>标签没有属性。 注意<br> 没有结束标签，把<br>标签写为 <br/> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。
超链接 3 种方法:
1 外部链接: 连接到外部文件 <a href="new.html">点击进入到新网页</a> <a href="http://www.baidu.com" target="_blank">进入百度</a> 2 锚链接: 指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。 首先我们要创建一个锚点,使用name属性或id属性给那个特定的位置起个名字. <a href="#low">去底部</a> <a name="top">顶部</a> 中间是内容 <a href="#top">回顶部</a> <a name="low">底部</a>
3 邮件链接 (使用前提有email客户端且已经配置好了)
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
超链接的属性
href 目标URL
title 悬停文本
name 主要用于设置一个锚点的名称
target 告诉浏览器以什么方式打开页面: _self(默认 本页面打开) _blank(空白页面打开)
img 标签 单边标签 一个就是一张图片 插入的是引用地址,所以也要把图片放到服务器上
<img src="" > img 是image“图片”的简写，src 是英语source“资源”的缩写。
src 属性 : 图片的相对或绝对路径 相对当前页面所在的路径。两个标记.和..分表代表当前目录和父路径
--下面 相对路径 --
<!-- 当前目录中的图片 --> <img src="2.jpg"> <img src=".\2.jpg"> <!-- 上一级目录中的图片 --> <img src="..\2.jpg">
<img src="images/1.jpg">
上方代码的意思是说，当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg
-- 下面绝对路径 --
（1）以盘符开始的绝对路径。举例：
<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">
（2）网络路径。举例：
<img src="http://www.baidu.com/2016040102.jpg">
总结一下：
我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。
相对路径，就是../ image/ 这种路径。从自己出发，找到别人；
绝对路径，就是http://开头的路径。
绝对不允许使用file://开头的东西，这个是完全错误的！
img 标签的常用的其他属性:
width 宽
height 高
title 悬浮文本
align 图片的水平对齐方式
alt 当图片显示不出来的时候,代替图片显示的内容
注意事项：
（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
（2）如果想实现图文混排的效果，请使用align属性，取值为left或right
如果想点击图片的时候跳转到某个链接，应该是：
<a> <img src="images/bojie.jpeg" alt="阿里" title=‘阿里世界‘> </a>
列表标签分为三种 1 无序列表 ul：unordered list，“无序列表”的意思。 li：list item，“列表项”的意思。 <ul> <li>张三</li> <li>李四</li> <li>王五</li> </ul> type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。 列表可嵌套列表
<ul> <li><b>北京市</b> <ul> <li>海淀区</li> <li>朝阳区</li> <li>东城区</li> </ul> </li> <li><b>广州市</b> <ul> <li>天河区</li> <li>越秀区</li> </ul> </li> </ul>
声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。
2 有序列表:Ordered List
<ol>
<li>嘿哈</li>
<li>哼哈</li>
<li>呵呵</li>
</ol>
type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。
3 定义列表 作用非常大
<dl>英文单词：definition list，没有属性。dl的子元素只能是dt和dd。
<dt>：definition title 列表的标题，这个标签是必须的<dd>：definition description 列表的列表项，如果不需要它，可以不加备注：dt、dd只能在dl里面；dl里面只能有dt、dd。
<dl> <dt>第一条规则</dt> <dd>不准睡觉</dd> <dd>不准交头接耳</dd> <dd>不准下神</dd> <dt>第二条规则</dt> <dd>可以泡妞</dd> <dd>可以找妹子</dd> <dd>可以看mv</dd> </dl>
<dl>
<dt>北京</dt>
<dd>国家首都，政治文化中心</dd>
<dd>污染很严重，PM2.0天天报表</dd>
</dl>
<dl>
<dt>上海</dt>
<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
</dl>
<dl>
<dt>广州</dt>
<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>
表格标签用<table>表示。 一个表格<table>是由每行<tr>组成的，每行是由<td>组成的。 所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的
例如，3行4列的单元格： <table> <tr> #行 <td>小马哥</td> #几列 单元格 <td>18</td> <td>男</td> <td>山东</td> </tr> <tr> <td>小岳岳</td> <td>45</td> <td>男</td> <td>河南</td> </tr> <tr> <td>邓紫棋</td> <td>23</td> <td>女</td> <td>香港</td> </tr> </table>
<table>的属性：
border：边框。像素为单位。style="border-collapse:collapse;"：单元格的线和表格的边框线合并width：宽度。像素为单位。height：高度。像素为单位。bordercolor：表格的边框颜色。align：表格的水平对齐方式。属性值可以填：left right center。<td>进行设置）cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。dir="rtl"，那就指的是内容到右边那条线的距离。cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0bgcolor="#99cc66"：表格的背景颜色。background="路径src/..."：背景图片。<tr>：行一个表格就是一行一行组成的嘛。
属性：
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）bgcolor：设置这一行的单元格的背景色。height：一行的高度align="center"：一行的内容水平居中显示，取值：left、center、rightvalign="center"：一行的内容垂直居中，取值：top、middle、bottom<td>：单元格属性：
align：内容的横向对齐方式。属性值可以填：left right center。valign：内容的纵向对齐方式。属性值可以填：top middle bottomwidth：绝对值或者相对值(%)height：单元格的高度bgcolor：设置这个单元格的背景色。background：设置这个单元格的背景图片。 如果要将两个单元格合并，那肯定就要删掉一个单元格。
单元格的属性：
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上<th>：加粗的单元格。相当于<td> + <b><td>标签<caption>：表格的标题。使用时和tr标签并列<caption>你好世界</caption> #相对表格居中的效果
<thead>标签、<tbody>标签、<tfoot>标签这三个标签有与没有的区别：
<table border="1"> <caption>人物介绍</caption> <tbody> <tr> <td>小马哥</td> <th>18</th> <td>男</td> <td rowspan="3">中国</td> #纵向合并, </tr> </tbody> <tfoot> <tr> <td>小岳岳</td> <td>45</td> <td>男</td> </tr> </tfoot> <thead> <tr> <td>邓紫棋</td> <td>23</td> <td>女</td> </tr> </thead> </table>
表单标签用<form>表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。
<form action="提交地址" id="" name="" method="get/post"> </form>
Enctype：
表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
<input>：输入标签（文本框）用于接收用户输入。
<input type="text" />
属性：
type="属性值"：文本类型。属性值可以是：
text（默认）password：密码类型radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。checkbox：多选按钮，名字相同的按钮作为一组进行选择。checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。hidden：隐藏框，在表单中包含不希望用户看见的信息button：普通按钮，结合js代码进行使用。submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。reset：重置按钮，清空当前表单的内容，并设置为最初的默认值image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。file：文件选择框。value="内容"：文本框里的默认内容（已经被填好了的）size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。<form> 姓名：<input value="呵呵" >逗比<br> 昵称：<input value="哈哈" readonly=""><br> 名字：<input type="text" value="name" disabled=""><br> 密码：<input type="password" value="pwd" size="50"><br> 性别：<input type="radio" name="gender" value="male" checked="">男 <input type="radio" name="gender" value="female" >女<br> 爱好：<input type="checkbox" name="love" value="eat">吃饭 <input type="checkbox" name="love" value="sleep">睡觉 <input type="checkbox" name="love" value="bat">打豆豆 </form>
4种按钮的举例
<form> <input type="button" value="普通按钮"><br> <input type="submit" value="提交按钮"><br> <input type="reset" value="重置按钮"><br> <input type="image" src="images/bojie.jpeg" width="400" value="图片按钮2"><br> <input type="file" value="文件选择框"> </form>
<select>：下拉列表标签<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签
<select>标签的属性：
multiple：可以对下拉列表中的选项进行多选。没有属性值。size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。<option>标签的属性：
selected：预选中。没有属性 <form> <select> <option>小学</option><option>初中</option> <option>高中</option> <option>大学</option> <option selected="">研究生</option> </select> <br><br><br> <select size="3"> #有滚动条 <option>小学</option> <option>初中</option> <option>高中</option> <option>大学</option> <option>研究生</option> </select> <br><br><br> <select multiple=""> #多选 <option>小学</option> <option>初中</option> <option selected="">高中</option> <option selected="">大学</option> <option>研究生</option> </select>
<br><br><br> </form>
<textarea>标签：多行文本输入框text就是“文本”，area就是“区域”。
属性：
value：提交给服务器的值。rows="4"：指定文本区域的行数。cols="20"：指定文本区域的列数。readonly：只读。<form>
<textarea name="txtInfo" rows="4" cols="20">路飞学城</textarea>
</form>
-- CSS --
css书写方式:
1 行内式 标签中直接书写
2 内接式 一个页面内接入的 书写在head里的style标签里
3 外接式 link导入 优点:协同开发不同类型的代码分开文件存放
css的选择器：1.基本选择器 2.高级选择器
基本选择器:
1 标签选择器
2 id选择器 同一个页面中id不能重复/任何标签都可以设置id/id命名规范.区分大小写
3 类选择器 4 通配符选择器
-- 1 --
p{
color:red;}
span{
color: yellow;
}
-- 2 --
#s1{
color: red; }
-- 3 --
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
-- 4 --
* {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
------------------------------------ <!-- 公共类 共有的属性 --> <div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p> </div> 到底使用id还是用class？ 答案：尽可能的用class。除非一些特殊情况可以用id 原因：id一般是用在js的。也就是说 js是通过id来获取到标签
高级选择器
后代 使用空格表示后代选择器
/* 后代选择器 */
body li {
color: red;
}
子代 使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p
/*!* 子代选择器 *!*/
body ul > p {
color: green;
}
弟弟选择器
/*!* 弟弟选择器 *!*/
h1 ~ h2 {
color: pink;
}
毗邻选择器
/*!* 毗邻选择器 *!*/
h1 + h2 {
color: #cc6600;
}
组合选择器
/* 组合选择器 */
h1 ~ h2, li, h1 {
color:darkviolet ;
color: green;
}
并集 多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器
交集 使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
属性选择器 -- 根据标签中的属性，选中当前的标签
伪类选择器 -- 伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte
爱恨准则
<style>
/* 爱恨准则LoVe HAte */
a:link {
color: green;
}
a:visited {
color: blueviolet;
}
a:hover {
color: yellow;
}
a:active {
color: red;
}
</style>
<body>
<a href="http://www.jd.com">a标签未被点击时的形态link</a><br>
<a href="#">a标签被点击时的形态</a><br>
<a href="#">a标签点击完毕时的形态</a><br>
<a href="#">a标签悬浮时的形态</a><br>
</body>
伪元素选择器
<style> /* 在文本之前添加内容 */ div:before { content: "SB"; } /* 在文本之后添加内容 */ div:after { content: "翔"; } /* 文本的第一个字母发生变化 */ div:first-letter { color: green; } /* 文本的首行发生变化 */ div:first-line { color: #cc6600; } </style> <div>alex吃...</div>
注意:伪元素选择器,仅仅适用于 块级 标签.
css的继承性和叠层性
叠层性权重相同处理
盒模型
padding(内边距)
-- 一个像大风车那样的图例 -- #box2 { -id- width: 0; height: 0; /* 属性3 */ border-top-width:100px ; border-right-width:100px ; border-bottom-width:100px ; border-left-width:100px ; /*border-top-color:transparent; !* 穿透色,只穿透一层 *!*/ border-top-color:blue; /* 穿透色,只穿透一层 */ border-right-color: red; border-bottom-color:yellow ; /*border-left-color:transparent ;*/ border-left-color:green ; border-style:solid ; /*border-radius: 55px;*/ border-radius: 35%; 可以更改百分比 }
border(边框)
margin(外边距)
标准文档流
块级元素和行内元素
浮动
文字围绕效果
设置浮动后行内标签可以设置宽高; (行内标签设置宽高的第一种方式,display=inlineblock/block
先让为主
浮动的遮盖了标准的盒子
盒子自动换行,且想让换行的进去一点儿,用margin负值
为了让父盒子不浮动,但是高度还能被撑起来.
两个方法
黑方法1:都浮动起来
黑方法2:给父盒子设置高度
方法三,再加一个div,不建议使用
3.5 .clearfix {clear:both};这是一个不讲道理的用法,你在遇到要清除浮动的情况下,可以考虑词用法
第四种写法是一种障眼法,让黑哥出来,再隐藏,给他变成块,又把高度变成0,最后用到clear:both官方推荐写法
.clearfix:after {
clear:both ;
content: "黑哥";
display: block;
visibility: hidden; /* 元素隐藏了 */
height: 0;
}
<div class="father clearfix">
overflow:hiddern;通过这个操作就可以实现清除浮动
overflow:
? visible:默认是它,溢出也课件
? hidden:溢出之后隐藏,不占位
? scroll:出来一个滚轮,溢出之后滚轮才能滑动
? auto:不溢出没有滚轮,溢出之后滚轮才出现
文本属性和字体属性
超链接导航栏案例
background
定位
z-index
原文：https://www.cnblogs.com/zhangchen-sx/p/10391821.html