HTML/CSS笔记01
get 参数拼接在浏览器的地址栏 url?k=v&k=v
请求报文格式: GET /sms/register.action?name=terry&password=123 Content-size:12 user-agent:mac safari post 参数放到请求报文请求体中进行传递
表单元素
1. input 单行文本框 <input type="text"> 密码框 <input type="password"> 单选按钮 <input type="radio"> 复选按钮 <input type="checkbox"> 附件 <input type="file"> 提交按钮 <input type="submit"> h5拓展:搜索框,日期框,数字框,email框... <input type="search"> <input type="date"> <input type="number"> <input type="email"> input的属性 type name 参数的key(不能缺省) value 参数的value(按钮的时候不能缺省) placeholder 提示语 checked 用在单选按钮和复选按钮中表示默认选中 selected 用在下拉菜单中表示默认选中 【注意】:checked和selected可以为单值属性 2. select 下拉菜单 <select name="shenfen"> <option value="shanxi">山西</option> <option value="jiangxi">江西</option> <option value="甘肃">甘肃</option> </select> select中的子元素一定为option,option中一般要添加value表示当选中该元素的时候,select的参数值为该value值,option中的value值可以不设置,那么value默认为文本值 3. textarea 多行文本域 <textarea name="" placeholder="" cols="30" rows="10"></textarea> 4. 插件(日期选择,地址选择,富文本)
css
介绍
用于修饰HTML结构的,层叠样式表成叠
多个样式修饰一个结构 子元素从父元素那里继承样式 优先级
样式表
相关样式在一起定义(封装)
语法
1) 如何在html中应用css1. 定义style属性中 缺点:样式与结构冗余 优点:优先级较高 <div style="color:#fff;background:#333"></div> 2. 定义在head标签中的style标签中 缺点:样式的复用率较低 优点:样式与结构分离 <head> <meta> <title></title> <link rel="stylesheet" href=""> <script></script> <style> //css样式 div { color:#fff; background:#333 } </style> </head> <body> <div></div> </body> 3. 将样式定义在css文件中 优点:样式的复用率高(框架:例如bs),样式与结构分离 style.css div { color:#fff; background:#333 } b.html <head> <link rel="stylesheet" href="./style.css"> </head>
2) 规则 style属性: 属性名:属性值;属性名:属性值; style标签/.css 选择器 { 属性值:属性值; 属性名:属性值; } 3) 注释 /*注释内容*/ 4) 选择器 1. 核心选择器 标签选择器 h2 { } div {规则 } id选择器 #two {} <div id="one"></div> <div id="two"></div> 类选择器 .second{} <div class="second"></div> <div class="second"></div> 逗号选择器 h1,h2,h3 {} 组合选择器 div#two {} 选择id为div的元素 div,#two {} 选择div元素和id为two的元素 普遍选择器 * 2. 层次选择器 子元素选择器 .header > a 选中class为header的元素的直接孩子元素a标签 <div class="header"> <a href=""></a> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <div class="content"> <a href=""></a> <a href=""></a> </div> 后代元素选择器 .header a 选中class为header的元素的后代元素a标签 3. 属性选择器 4. 伪类选择器 5. 伪元素选择器
相关推荐
huha 2020-10-16
TLROJE 2020-10-26
echoes 2020-08-20
nercon 2020-08-01
zhanghaibing00 2020-06-28
Aveiox 2020-06-25
henryzhihua 2020-06-21
zhoutaifeng 2020-06-17
liangzhouqu 2020-06-16
TONIYH 2020-06-11
开心就好 2020-06-10
x青年欢乐多 2020-06-06
KyrieHe 2020-06-03
bertzhang 2020-06-02
haokele 2020-05-29
niehanmin 2020-05-28
davidliu00 2020-05-26