表单元素
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. 伪元素选择器