day 50 form表单,input框,textarea,select,css的引入方式,标签嵌套,选择器,宽高属性,字体属性

form表单

#from 的属性设置 action 是提交地址,method是提交方式,也叫请求方式

 如果是传图片:enctype="multipart/form-data

 

input框


## 文本框
    

用户名 <input type="text" name="user" value="123" hidden/>


密码: name="pwd">

#单选,name属性一致,表示是一组的
    
        性别: name="sex" value="1" >男
checked >女

#多选
    

爱好:"checkbox" name="hobbies" value="bsk" checked/>篮球


rap

#上传文件
    

头像:


#提交按钮

#重置按钮

#普通按钮




select下拉框,可单/多选

<select name="city" id="city" multiple>
    
    
    
    
  



textarea,多行输入框
    





CCS的引入方式


Title

#内部样式


#外部样式
<link rel="stylesheet" href="b.css">


#行内样式(内联样式)







标签的嵌套

#块级元素占一整行
#通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
123
123213



#p标签不能包含块级标签,p标签也不能包含p标签。

asdasd

我是p

asdasd




选择器

#id选择器


Title



id="a">asdasd

asdasd


#类选择器


Title




class="p a">
asdasd

class="a">wo s



#后代选择器,选择范围包括所有后代


Title



<div id="b" class="c">asda
<div>我是第一个儿子

<div class="a">我是第二个儿子
<div>我是孙子





#儿子选择器,选择下一级,但是注意有些属性会继承


Title



class="a">我是爸爸
<div class="b">我是儿子

我是孙子







#兄弟选择器


Title




<div>
<span>span
<h1 class="a">h1
<h2 class="a">h2
<p>p


<h4 class="a">h4

<p class="a">sdsd





#标签选择器,标签选择器,只要是这个标签都会被选中


Title



<div>dasdasda
<div>而知

<div>asdasd

#毗邻选择器


Title



  <div>
  dasd
  </div>
  <p>ppppp


  <p>2ppp




#组合选择器,使用符号“,”


Title




<div class="b">345
<div class="a">123


<div class="a">
678


<p>p


<div class="c">9098

#通用选择器


Title




asdasd

sdasd

asdasd





#伪类选择器


Title



点我




#属性选择器

  
  Title
        /*div[name]{*/
/*color: red;*/
/*}*/
div[name="123"]{
color: red;
}



<div name="123"> div
<div name="455">我是div
<div>没有属性的div


#伪类元素选择器


Title







#选择器的优先级

内联样式 > id选择器 > 类选择器 > 元素选择器






宽高属性

#可以使用像素数,或者占屏幕百分比


Title



div

span



字体属性


Title



我是span

 

你可能感兴趣的:(day 50 form表单,input框,textarea,select,css的引入方式,标签嵌套,选择器,宽高属性,字体属性)