0.本周知识点预览
- HTML基础
- CSS基础
1.HTML基础
1.html表头->head
<!--告诉浏览器是用什么样的类型来解析html文档--> <!DOCTYPE html> <!--设置语言--> <html lang="en"> <head> <!--设置字符集,自闭合标签--> <meta charset="UTF-8"> <!--设置浏览器自动刷新,2秒刷新一次--> <meta http-equiv="Refresh" content="2"/> <!--设置浏览器自动刷新,且2秒后跳转到百度首页--> <meta http-equiv="Refresh" content="2; Url=https://www.baidu.com"/> <!--网页标题--> <title>fuck</title> <!--网页标题前边的图片--> <link rel="shortcut icon" href="1.png"/> </head>
代码解析：html分为head和body，head主要设置一些字符集，浏览器显示外观，自动刷新次数，以及设置样式(重要)等。
需要解释的主要有
1.http-equiv="Refresh"，这个可以设置浏览器自动刷新，可以对之后频率取数据有帮助。
2.content 表示为2s 刷新一次
3.Url="" 这个表示为2s 之后自动刷新到其他界面
4.title 的fuck，意思是浏览器标签的文字
5.link rel="shortcut icon" href = "1.png"，这个1.png 就是浏览器标签的图片
6.最最重要的是style 这个HTML的后半部分会讲一些，会在CSS中详细解释。
7.依然很重要的script，这个是导入js文件的，会在JS中详细解释.
2.html的body
body中主要都是标签，通常分为块级标签和内联标签，标签还有两种表现形式，一个是自闭合标签，一个是成对闭合，例如下边的p标签就是成对闭合，br标签就是自闭合，自闭合尽量写成<br />，这个/ 不写也可以，强烈建议写上，以便区分。下面介绍各种标签。
1.p 和 br
p标签表示段落，默认每个段落之间有间隔
<body> <p>我是P标签</p> </body>
展示页面如下：
br标签代表换行
<body> <p>1111</p> <br /> <p>2222</p> </body>
展示页面如下：
2.a 标签
<h1> <!--a标签很重要,是跳转标签,可以跳转到url,也可以跳转到本地文章,跳转时,href设置的id1(#必须加),和后端div标签内设置的id要一样--> <a href="#id1" style="background-color: black">第一章</a> </h1> <h1> <!--href直接接网址,则直接跳转,有个参数target,可以设置是否打开新标签页--> <a href="https://www.baidu.com" target="_blank">点我跳转百度</a> </h1> <h2> <a href="#id2" style="background-color: palevioletred">第二章</a> </h2> <div id="id1" style="height: 500px">我是第一章</div> <div id="id2" style="height: 400px">我是第二章</div>
代码分析：a 标签是跳转标签，可以跳转到url，可以跳转到本地页面
1.跳转到url时，href里写url地址，target写'_blank'，关于target属性，以下是详细解释：
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
2.跳转到本地页面时，href写入的是一个要跳转的标签的ID，且这个ID在整个html要唯一。
a标签举例：
3.H标签
H标签的主要功能是分段落，层级。
<body> <h1>我是H1</h1> <h2>我是H2</h2> <h3>我是H3</h3> <h4>我是H4</h4> <h5>我是H5</h5> <h6>我是H6</h6> </body>
4.select 标签
1.select 下拉框
<p> <select name="age"> <option value="1"> 18 </option> <option value="2"> 20 </option> <option value="3"> 22 </option> <option value="4"> 24 </option> </select> </p>
界面展示如下：
2.select 多选框(滑动，ctrl多选)
<p> <select multiple size="3"> <option> 20 </option> <option> 21 </option> <option> 22 </option> <option> 23 </option> <option> 24 </option> <option> 25 </option> <option> 26 </option> </select> </p>
页面展示及代码解析：多选框可以设置每次能展示几个 multiple size就是这个设置。
3.select 带组名的下拉框
<p> <select name="age1"> <optgroup label="学生"> <option value="1"> 16 </option> <option value="2"> 17 </option> <option value="3"> 18 </option> </optgroup> <optgroup label="空姐"> <option value="4"> 22 </option> <option value="5"> 24 </option> <option value="6"> 26 </option> </optgroup> </select> </p>
代码解析及展示：name代表当选中的数据发送到服务端后的key的值。label为组名，value代表选中的数据发送到服务端后的value的值。
5.input标签(重要)
1.text
<body> <p>用户名: <input type="text" name="lk1"/></p> </body>
代码解析及展示：普通文本框，类型是text，name是传到服务端的key.
2.password
<body> <p>密码: <input type="password" name="lk2"></p> </body>
代码解析及展示：密码文本框，类型是password，name是传到服务端的key
3.rabio
<p>性别: <br /> 男:<input type="radio" name="ee" value="1"/> <br /> 女:<input type="radio" name="ee" value="2"/> </p>
代码解析及展示：单项选择框，类型是radio，name是传到服务端的key，当name相同时互斥，不同时没约束，value是传到服务端的value。
4.checkbox
<p>爱好: <br /> 女1 <input type="checkbox" name="favor" value="1"> <br /> 女2 <input type="checkbox" name="favor" value="2"> <br /> 女3 <input type="checkbox" name="favor" value="3"> <br /> 女4 <input type="checkbox" name="favor" value="4"> <br /> 女5 <input type="checkbox" name="favor" value="5"> </p>
代码解析及展示：多项选择框，类型是checkbox，name是传到服务端的key，value是传到服务端的value。
5.button、submit、reset、file、textarea(严格说不算input)
<p>选择上传文件: <input type="file"/> </p> <!--可以写多行的文本框--> <p>备注: <textarea name="abc"></textarea> </p> <!--提交按钮--> <input type="submit" value="提交"/> <!--普通按钮,后续会讲--> <input type="button" value="按钮"/> <!--重置表单按钮,需要在form标签内--> <input type="reset" value="重置"/>
代码解析及展示：file类型可以上传文件，不过form属性中enctype='multipart/form-data'才可以上传，textarea是备注、submit定义在form中会提交数据，button只是普通按钮，假如和js联合会有其他效果，reset会重置input中输入的str.
6.label
<p>姓名: <input type="text"/> 婚否: <input type="checkbox"/> </p> <p> <label for="lk1">姓名: <input id="lk1" type="text"/> </label> <label for="lk2">婚否: <input id="lk2" type="checkbox"/> </label> </p>
代码解析及展示：label标签可以在点击文本框名字的时候直接点进文本框
6.dl ol ul
1.dl
<dl> <li>dl1</li> <li>dl2</li> <li>dl3</li> </dl>
代码解析及展示：
2.ol
<ol> <li>dl1</li> <li>dl2</li> <li>dl3</li> </ol>
代码解析及展示：
3.ul
<ul> <li>dl1</li> <li>dl2</li> <li>dl3</li> </ul>
代码解析及展示：与dl不同的是，ul的每行之前会有几个空格。更容易形成目录式
7.table
<!--创建表--> <table border="10"> <!--表头--> <thead> <!--表头也就是第一行数据, 合并单元格 colspan列合并--> <th colspan="2">第一列</th> <!--<th>第二列</th>--> <th>第三列</th> </thead> <!--表体--> <tbody> <!--tr是表的一行--> <tr> <!--td是一列的内容--> <td>内容一</td> <td>内容二</td> <td>内容三</td> </tr> <tr> <td>内容一</td> <!--rowspan是行合并--> <td rowspan="2">内容二</td> <td>内容三</td> </tr> <tr> <td>内容一</td> <!--<td>内容二</td>--> <td>内容三</td> </tr> </tbody> </table>
代码解析及展示：table可以实现表的创建，插入数据、合并单元格
8.form
只有form标签才可以submit
<form action="https://www.baidu.com/s"> 百度: <input type="text" name="wd"/> <input type="submit"/> </form>
代码解析及展示：在form标签中，action是提交后的url，input中的wd是原百度查询的url的key.
2.CSS基础
1.css选择器类别
在html基础中讲到了style标签，不过没说太多，这里主要和css有关
css就是层叠样式表，对页面标签进行美化。当嵌入html时，有三种方式，优先级逐层递减，使用频率逐层增加。
- 1.style标签直接写进标签
- 2.style作为选择器写进表头
- 3.style作为外置文件嵌入html
而想要对某个标签进行美化，首先就要找到这个标签。这里主要分为5种
- 1.标签选择器
- 2.ID选择器
- 3.class选择器
- 4.关联选择器
- 5.组合选择器
以下是五种选择器代码demo：
<!--设置字符集,自闭合标签--> <meta charset="UTF-8"> <style> /*标签选择器，找到所有的标签应用以下样式*/ div { color: green; } /*id选择器，找到标签id等于i1的标签，应用以下样式*/ #i1 { font-size: 100px; } /*class选择器，找到class=c1的所有标签，应用一下样式*/ .c1 { background-color: yellow; } /*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*/ .c2 div p .c3 { background-color: deeppink; } /*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/ .c4,.c5,.c6 { background-color: darkslateblue; } .img1 { background-image: url("2.png"); height: 43px; width: 31px; background-position: 4px -133px; background-repeat: no-repeat; } </style> </head> <body> <div>1000</div> <div id="i1">2000</div> <div class="c1">3000</div> <div class="c2"> <div> <p> <a class="c3">4000</a> </p> </div> </div> <div class="c4">5000</div> <div class="c5">6000</div> <div class="c6">7000</div> <div class="img1"></div> </body>
代码解析及展示：style中，color是字体颜色，font-size是字体大小，background-color是背景色，background-image是背景图片嵌入，background-posotion是嵌入的位置可以通过web直接调整，background-repeat 可以设置图片是否重复，因为假如设置的位置大，图片小，会填满整个位置，no-repeat是不重复。
2.border、margin、padding、display、position、float、opacity
1.border 边框
<body> <div style=" 300px;height: 100px;border: 1px solid red"> </div> <hr /> <div style=" 300px;height: 100px;border: 1px dotted red"> </div> <hr /> <div style=" 300px;height: 100px;border: 1px dashed red"> </div> </body>
代码解析及展示：border边框可以设置宽度(width)，高度(height)、类型: solid(实线)、dotted、dashed(虚线)、边框颜色
2.margin 、padding
对于这两个而言，刚学的时候是最不易理解的，在网上找到了不错的解释。
首先是两个属性的定义：
从图上可以看到，初步结论：margin类似外边框，padding类似内边框，且，每个属性都有4个子属性，分别是四个方向，且顺序为上 - 右 - 下 - 左
然后，引入另一个图分析这两个属性之间的区别和联系：
实例图：
解释：
说明：图中灰色地带是class值为test2的div的边框，它是有宽度的；
①、外边距：外边距指的是margin作用元素（这里是class值为test2的div）边框外延距离另一个元素边框外延（如果另一个元素和margin作用元素同级（这里是class值为test1的div））或内延（如果另一个元素是margin作用元素父级）的距离，如上图；
②、内边距：内边距指的是margin作用元素（这里是class值为test2的div）边框内延距离其子元素边框外延的距离，如上图；
③、内边距和外边距是针对于其作用的元素和其他元素来讲的，某一元素的内边距在另一个元素看来有可能是外边距，比如：class值为test2 div的内边距在class值为test2_test div元素看来就是外边距，所以上面代码也可以这样写：将class值为test2的div样式列表中“padding-top:40px;”去掉，class值为test2_test div元素添加“margin-top:40px;”——这样的效果和代码2-1是一样的；
结论：margin、padding是相对的，某种程度可以达到一样的效果。
3.display
1.none
<h1 style="display: none;background-color: red">我是none类型</h1>
代码解析：设置为none类型后，页面就不在显示了，所以没有展示，这可以用于弹窗。
2.block
<span style="display: block;background-color: red">我是block类型</span>
代码解析：设置为block后，不管之前是什么类型都转为块级标签。span标签就是内联标签，可以转换为块级标签。注意：有换行
3.inline
<div style="display: inline;background-color: red">我是inline类型</div>
代码解析：设置为inline后，不管之前是什么类型都转为内联标签。div就是典型的块级标签，可以转换为内联标签。注意：不换行
4.inline-block
<h1 style="display: inline-block;background-color: red">我是inline-block类型</h1>
代码解析：设置为inline-block后。使内容以块级元素的形式呈现在行内，注意：块级标签，不换行
4.float
float的含义是浮动，可以让两个并行的标签，转为一行，且可以设置左右
<div style=" 300px;border: 1px solid red"> <!--float 可以浮动,不过必须在最后一行写入clear--> <!--假如所有行百分比加起来超过100%,则不会写入到一行--> <div style=" 20%; background-color: blue; float: left">BBB</div> <div style=" 50%; background-color: yellow; float: left">AAA</div> <div style="clear: both"></div> </div>
代码解析及展示：float可以把N行合并到一行，不过要看一行是否能装得下
5.position
1.fixed(固定)
生成绝对定位的元素，相对于浏览器窗口的定位，滑动鼠标，位置也不变
<div style="height: 1000px;background-color: #ddd;"></div> <div style="position: fixed;right:200px;bottom: 100px;">返回顶部</div>
2.absolute(绝对)、relative(相对)
<div style="height: 500px; 400px;border: 1px solid red;position: relative"> <div style="height: 200px;background-color: red;"> <div style="position: absolute;bottom: 0;right: 0;">111</div> </div> </div>
代码解析及展示：relative和absolute一般成对出现，是相对于哪个标签，放在哪个绝对的位置。
