html&css

2018-06-04  本文已影响0人  FlyingPeter

网元的四大部分:header,nav,main,footer
article-> section
em 斜体
strong 粗体
span 文本串
q 引用
blockquote 多行引用
br 换行
  空格
hr 水平线
address 地址
code 代码引用
pre 多行代码引用
ul 无序列表 默认前面有点
li
li
/ul
有序列表,默认前面有1,2,3
ol
li
li
/ol
div 用id区分块

<table summary="简介,不会显示出来">
<caption>标题</caption>
<tbody>
<tr>
<th>1的标头</th>
<th>2的标头</th>
<th>2的标头</th>
</tr>
<tr>
<td>1的值</td>
<td>2的值</td>
<td>2的值</td>
</tr>
</tbody>
</table>
<a href="www.baidu.com" title="百度" target="_blank" //新标签页打开>
<a href="mailto:taoxutao@huawei.com?subject=主题&cc=peter.tao@ebistrategy.com">
<img alt="图片不显示时显示的文字" src="路径" title="鼠标划过时显示的文字">

与服务器交互,提交接受信息,form表单,里面的元素一般都用name来沟通,action=“向该网址提交”
input可以用来当输入框type=text,button,submit,reset,checkbox,radio(实现单选要name相同)
name,value,checked
select下拉框 multiple="multiple" 可以多选,安装ctrl(windows),or command(mac)
<select>
<option vaule="love" selected="selected">love</option>
<option value="make">make</option>
</select>

<label for="id(关联控件的id)"></label> //比如ratio前的label,点击后选择


CSS

p{
color:red;
}
.class{
color:red;
}
#id{
color:red;
}

<p class="cls1 cls2"></p>同时用两个class,如果有相同的属性,会覆盖

.first>li 子选择器 作用于下第一代li标签
.first li 包含(后代)选择器 作用于所有的li标签

*{color:red;} 作用于全部的html元素

a:hover{ /超链接,鼠标滑过时的效果/
color:red;
font-size:200px;
}

span p{ /同时对span,p标签起作用/
color:red;
}
p{color:red;} /权值为1/
p span{color:green;} /权值为1+1=2/
.warning{color:white;} /权值为10/
p span.warning{color:purple;} /权值为1+1+10=12/
#footer .note p{color:yellow;} /权值为100+10+1=111/


.class .class 父子,非严格父子
例如:
.father .c3{backcolor:green;}
<div class="father">
<p class="c3">this is the text</p> //显示绿色
</div>

.class.class 链接选择器,且,只有元素同时包含两个class,才会生效
.important{color:red;}
.warning{font-size:20px;}
.important.warning{border:30px;}
<p class="important warning"></p>

上一篇下一篇

猜你喜欢

热点阅读