Day15,前端
- HTML
- CSS
- JavaScript(浏览器)
document.getElementById('i1')
var xhr = new XMLHttpRequest()
xhr.open('get','https://www.zhihu.com/login/email')
xhr.send()
- jQuery库
$('#id')
$.ajax({
url: https://www.zhihu.com/login/email,
type: 'get'
})
注：jQuery有无必要学js
一、回顾：
HTML
客户端浏览器：
服务器Sokect：
程序员：
接受url
open()
HTML标签：
- table,tr,td,th
- br
- <input type='text' /> type='file' password checkbox radio button submit
- p
- h系列
- span
- label
- a
- div
- form
- img
- textarea
- select
- ul,li ol dl
- body
- html
- input
====>
套路：
绿叶：div,span,url,table
红花：
<form action='要提交的url地址' method='GET或POST' enctype='multipart/form-data'>
<div>
<input type='text' name='user' value='默认值' />
</div>
<div>
<input type='password' name='user' value='默认值' />
</div>
<input type='email' name='user' value='默认值' />
<input type='radio' name='n' value='1' checked='checked' />
<input type='radio' name='n' value='2' />
<input type='checkbox' name='hobby' value='1' />
<input type='checkbox' name='hobby' value='2' />
<input type='checkbox' name='hobby' value='3' />
<input type='file' name='fafafa' />
<select name='city'>
<option value='bj'>北京</option>
<option value='sh'>上海</option>
</select>
<textarea name='ta'>默认值位置</textarea>
<input type='button' />
<input type='reset' />
<input type='submit' />
</form>
Form表单提交：
- GET 提交的数据放置的URL中：https://www.sogou.com/web?query=haitao&v=123&v=456
- POST 提交的数据放置在请求体中
二、css
1.css的概念以及css的初体验
--CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术
--css的语法结构：
color:red;font-size: 20px;
2.css的编写方式
2.1 行内样式
<div style="color:red;font-size: 20px;">css的初体验</div>
2.2 内部样式
-- div{
color:red;
font-size: 20px;
}
<div>css的初体验2</div>
各种选择器
--标签选择器：
div{
color:red;
font-size: 20px;
}
<div>css的初体验2</div>
--id选择器：
#two{
color: yellow;
}
<div id="two">css的初体验2</div>
id不要重复 只能唯一
--类选择器
.three{
color:blue;
}
<div class="three">css的初体验2</div>
<span class="three">span标签</span>
--包含选择器
.four span{
color:green;
}
<div class="four">
<span>css测试dsad</span>
</div>
--分组选择器
div,span,h2{
color:orange;
}
--通用选择器
*{
color:gray;
}
选择器的优先级：
行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器
2.3 外部样式
<link rel="stylesheet" href="a.css">
3.css的基本属性
--文字段落
边框设置：border
宽度，样式，颜色 (border: 1px solid red;)
文本行高：line-height
语法： line-height：行高值(像素)
水平对齐： text-align
left：左对齐；
right：右对齐
center：居中对齐
背景属性
背景颜色：background-color
关键字：red pink orange
背景图像：background-image
使用background-image属性可以设置元素的背景图像。
语法：background-image：url（图像地址）
背景重复：background-repeat
语法：background-repeat：取值
Repeat(默认) 背景图像平铺排满整个网页
repeat-x 背景图像只在水平方向上平铺；
repeat-y 背景图像只在垂直方向上平铺。
no-repeat 背景图像不平铺
背景位置：background-position
background-position-x:200px ;
background-position-y:100px;
4.布局属性
5.浏览器兼容性的问题
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 }
10 body{
11 background-color: #999999;
12 }
13 .p_head{
14 800px;
15 margin: 0 auto;
16 border: 1px solid orange;
17 background-color: white;
18 }
19 .item{
20 float: left;
21 border: 1px solid #dddddd;
22 margin: 10px;
23 padding: 10px;
24 position: relative;
25 }
26 p,span,u{
27 font-size: 10px;
28 }
29 span{
30 color: red;
31 padding-left: 30px;
32 }
33 .hot{
34 position: absolute;
35 right: 0;
36 top:0;
37 }
38 </style>
39 </head>
40 <body>
41 <div class="p_head">
42 <h2>限时抢购</h2>
43 <div class="item">
44 <img src="images/01.jpg" alt="">
45 <p>大是的哈数据库的贺卡<br>
46 不是都快放假了是</p>
47 <span>￥476.00</span> <u>￥1360</u>
48 <div class="hot">
49 <img src="images/xsq.png" alt="">
50 </div>
51 </div>
52 <div class="item">
53 <img src="images/01.jpg" alt="">
54 <p>大是的哈数据库的贺卡<br>
55 不是都快放假了是</p>
56 <span>￥476.00</span> <u>￥1360</u>
57 <div class="hot">
58 <img src="images/xsq.png" alt="">
59 </div>
60 </div>
61 <div class="item">
62 <img src="images/01.jpg" alt="">
63 <p>大是的哈数据库的贺卡<br>
64 不是都快放假了是</p>
65 <span>￥476.00</span> <u>￥1360</u>
66 <div class="hot">
67 <img src="images/xsq.png" alt="">
68 </div>
69 </div>
70 <div class="item">
71 <img src="images/01.jpg" alt="">
72 <p>大是的哈数据库的贺卡<br>
73 不是都快放假了是</p>
74 <span>￥476.00</span> <u>￥1360</u>
75 <div class="hot">
76 <img src="images/xsq.png" alt="">
77 </div>
78 </div>
79 <div class="item">
80 <img src="images/01.jpg" alt="">
81 <p>大是的哈数据库的贺卡<br>
82 不是都快放假了是</p>
83 <span>￥476.00</span> <u>￥1360</u>
84 <div class="hot">
85 <img src="images/xsq.png" alt="">
86 </div>
87 </div>
88 <div class="item">
89 <img src="images/01.jpg" alt="">
90 <p>大是的哈数据库的贺卡<br>
91 不是都快放假了是</p>
92 <span>￥476.00</span> <u>￥1360</u>
93 <div class="hot">
94 <img src="images/xsq.png" alt="">
95 </div>
96 </div>
97 <div class="item">
98 <img src="images/01.jpg" alt="">
99 <p>大是的哈数据库的贺卡<br>
100 不是都快放假了是</p>
101 <span>￥476.00</span> <u>￥1360</u>
102 <div class="hot">
103 <img src="images/xsq.png" alt="">
104 </div>
105 </div>
106 <div class="item">
107 <img src="images/01.jpg" alt="">
108 <p>大是的哈数据库的贺卡<br>
109 不是都快放假了是</p>
110 <span>￥476.00</span> <u>￥1360</u>
111 <div class="hot">
112 <img src="images/xsq.png" alt="">
113 </div>
114 </div>
115 <div style="clear: both"></div>
116 </div>
117 </body>
118 </html>