HTML+CSS总结
1.<p></p>标签,段落标签
2.<h1></h1>-<h6></h6>标题标签,不继承font-size和font-weight属性,因为有自己本身的样式.
注意:以上两个标签里面都不能放块级元素.
3.<strong></strong>和<b></b>标签,为字体加粗的标签
4.<i></i>和<em></em>标签,字体倾斜标签,经常用来放字体图标iconfont、icomoon和精灵图
5.<ins></ins>和<u></u>标签,为字体添加下划线
6.<del></del>和<s></s>标签,为字体添加删除线
7.<div></div>和<span></span>无语意标签,通常用来做容器.
8.语义标签<header></header>头部、<footer></footer>底部、<section></section>块、<nav></nav>导航、<article></article>文章、<aside></aside>侧边栏
9.列表
无序列表<ul><li></li></ul> 自定义列表<dl><dt></dt>
<dd></dd></dl> 有序列表<ol><li></li></ol>
10.表格 <table> </table>
<caption></caption>表格标题标签
<th></th>表头
<tr></tr>行
<td>单元格</td>
表格结构标签:只为了分结构,不会影响内容
1.表格标题标签<caption>
2.表格头thead
3.表格体tbody
合并单元格
colspan 跨列合并 横向
rowspan 跨行合并 纵向
注意:外链的CSS要加上border-collapse:collapse,表格边框合并,表格专属
合并单元格步骤
1. 确定跨行合并rowspan 跨列合colspan
2.row行 col列
3.确定目标单元格,原则,左上角为目标单元格
4.确定合并单元格数量
5.删除多余的单元格
cellspacing单元格和单元格之间的距离
cellpadding单元格边框和内容之间的距离
11.表单<input/>单标签
form表单域,块级元素.把用户输入的数据收集起来发送给后台人员处理
type属性值有:
text文本,
password密码,
radio单选按钮(设置相同的name值时,多选一.
checkbox checkbox,复选框,设置checkbox="checkbox"时.默认选中该选项.
file上传文件
submit提交按钮,要提交的内容必须放在form表单中，表单必须有name属性
reset重置表单
button按钮
value所有表单存储的值,设置一个表单默认值="李狗蛋"
placeholder 占位符,设置表单提示属性
12.<select></select>下拉选项框
<option></option>选项 默认值selected="selected"
13.<textarea/>输入区域,不能缩放,resize:"none"
border:none 清除默认边框
text-decoration:none去掉下划线
outline:none去掉外轮廓线
display:none隐藏元素,不占位置
14.<lable><lable/>增大input获取焦点的区域
方法1:<lable for="aaa" >用户名</lable>
<input id="aaa" type="text">
方法2:<lable>用户名<input type="text"></lable>
15.链接 a标签 <a href="要链接的路径"</a>
路径 ,本地路径 分为,相对路径和绝对路径
相对路径: ./直接写文件名,当前目录
../上一级目录
/下一级目录
绝对路径 例如:C:\desktop\songge.html
网络路径 例如:http://www.baidu.com
target属性 blank新建标签页打开,self自身打开
16.<img>图像,src图路径,与上面a标签链接路径同上
title属性鼠标悬停时显示的文本,任何标签都可以使用
alt图片无法加载的提示文本
CSS层叠样式表
三大特性:层叠性、继承性、优先级
层叠性:
相同的选择器下,后面的样式会层叠之前的样式.
注意:left和right是不会重叠的,因为它们是不同的属性
继承性:
字体,颜色,行高会继承.(继承的权重为0)
注意:a标签不会继承字体颜色.因为本身有字体颜色.
标题标签,font-size,font-weight会继承
优先级:
!import权重正无穷大
行内样式权重1000
id选择器权重100
class选择器 类选择器 伪类选择器 权重10
标签选择器 权重1
通配符选择器
继承 权重0
元素的显示方式
display:block,转为块级元素.
块级元素特点:独占一行,可以设置宽高padding margin
display:inline-block ,转为行内块元素
行内块元素:input img td 等
特点:具有块级元素可以设置宽高的特点,也可以在一行上显示
注:img标签,消除底部间隙
1.vertical-align:middle
2.display:block
3.给父元素设置:font-size:0/ling-height:0
display:inline转为行内元素
特点:可以在一行上显示，不可以设置宽高不可以设置垂直方向上的内外边距
display:none,隐藏元素,不占位置
visibility:hidden让元素隐藏占位置
visibility:visible,让元素显示
文字样式
text-align:center/left/right;水平方向上行内块元素的对齐方式
vertical-align:top/bottom/middle/basseline(默认值,基线对齐) 行内块元素和行内元素在垂直方向上的对齐方式
颜色 transparent
字体 font-style ,font-weight,font-family(不同的字体需要用,分隔)
连写:font:font-style font-weight font-size/line-height "Microsoft Yahei";
注意:字体大小写和字体家族是必须别的属性
line-height行高,设置不同文字之间的距离,单行文本垂直居中 line-height:高度:
text-decoration 文本修饰线 underline下划线 none清除文本修饰线 line-through删除线
text-indent 文本缩进 text-index:2em 两个中文字符的间隔,如果后面不带单位,=文字*数值
