1、常见的标签
>> h1~h6:
标题标签,效果是加粗和字体大小的变化。
>> p:
段落标签,主要用于文本展示。
>> div:
块级标签,没有意义的标签,一般用于布局。
>> span:
文本标签,没有意义的标签,一般用在需要突出显示文字的时候。
2、超链接
<a></a>
>> href 属性
清除a标签的下划线:text-decoration: none;
默认进行链接跳转,设置跳转地址的时候必须加上 http 或者 https。
* 超链接 <a href="http://www.baidu.com">百度</a>
* 执行 JS 代码 <a href="javascript:alert(123);">执行 JS 代码</a>
* 打电话 <a href="tel:13562698714">打电话</a>
* 发短信 <a href="sms:13562698714">发短信</a>
* 发邮件 <a href="mailto:fay@163.com?subject=邮件主题&bodu=邮件内容">发送邮件</a>
>> title(绝大部分标签都有该属性)
鼠标停留在该标签上时,会显示的文字。
>> target:
一般用于链接跳转,代表当前打开的链接在什么位置显示。
_blank:在新标签页打开;
_self:在当前标签页打开;
_top:在顶层窗口打开;
_parent:在窗口打开;
3、图片
<img> 或者 <img />
>> src:图片地址。
>>> 绝对地址:
http://www.baidu.com
c:/
>>> 相对地址:
* 兄弟关系:图片名.后缀名
* 文件与图片的父级是同级:图片所在文件夹名/图片名.后缀名
* 文件父级与图片同级:../图片名.后缀名
* .. 代表返回上一级
>> alt
图片无法展示的时候显示的文字信息。
4、实体符号
空格:
大于符号:>
小于符号:<
5、列表
>> 有序列表
<ol>
<li></li>
</ol>
>> 无序列表
<ul>
<li></li>
</ul>
type:disc、circle、
>> dl、dt、dd
清除li前面的小圆点:list-style: none;
6、 标签嵌套规则
* 原则上块级标签可以嵌套块级标签和内联标签;
* 内联标签原则上只能嵌套内联标签;
* p 和 h1~h6 只能嵌套内联标签;
* ul 和 ol 只能嵌套 li,li 可以嵌套任意标签;
7、 HTML5 新增了一些语义化标签
header:用于定义文档或者章节的头部。
nav:用于定义导航链接部分
footer:用于定义文档或者章节的底部
article:用于定义文档的文章(帖子、新闻、博客)
section:用于定义一个文档的章节
aside:用于定义与当前页面文章内容无关的附属信息
address:用于地址
8、
表格
涉及标签
table:用于定义表格
caption:用于定义表格标题
th:定义列标题,文字自动居中并且有加粗效果
tr:定义行
td :定义单元格
9、表单元素
>> form
>> input
>>> type:
* text:普通文本输入框
* passord:密码框
* radio:单选框同一个组的单选项需要相同的 name 属性值,设置 checked 属性默认选中
* checkbox:多选
* file:上传按钮
>> placeholder:提示占位符
>> value:输入框的值,输入框的数据
>> label
* for 属性:该属性值为表单元素的 id
提示:id 是所有标签都有的一个属性,并且该值唯一。
>> textarea
文本域
>> select & option
下拉选择框
>> button
type:
button
reset
submit(提交)
10、字体属性
>> font-size: 大小(px);
设置字体大小。
>> font-style: normal | italic;
字体样式(斜体)。
>> font-weight: 400;
加粗,值为 100 到 900 之间的正数。或者 bold、lighter 等。
>> font-family: 字体;
使用安全字体。
多个单词和中文字体要打引号,多个字体之间通过逗号分开。
>> line-height: 大小;
行高。
11、background:设置背景
background-color: 颜色代码;
background-image: url(图片地址);
background-repeat: no-repeat; 背景图不重复出现
background-size: 设置背景图大小
* contain:其中一边与盒子一样大,另一边等比例缩放;
* cover:等比例放大图片,一直到最短边与盒子一样大,必然会导致场边会被裁剪;
background-position: center; 背景图定位
12、padding 的写法
padding:四边的大小
padding-left
padding-right
padding-toppadding-bottom
padding: 10px 20px; 上下padding为10px,左右为20px
padding: 10px 20px 30px; 上为 10px,左右为 20px,下为30px
padding: 10px 20px 30px 40px; 上右下左分别为 10px 20px 30px 40px
13、overflow
当内容超出元素范围后,应该如何处理。
visible:超出后依然显示;
hidden:超出的内容会被隐藏掉;
scroll:无论是否超出都会显示滚动条,超出内容通过滚动条查看;
auto:内容超出后就会出现滚动条;
14、display
用于决定当前元素表现的特性。
inline:
当前元素表现为内联标签的特性。
* 无法设置宽高,大小由内容决定。
* 可以设置水平方向 margin、padding、border;
* 垂直方向 padding、border 会遮挡其他元素;
block:
块级标签的特性。
宽度默认父元素 100%,独占一行
inline-block:
* 不会独占一行;
* 可以设置宽高、margin、padding、border
table-cell:
单元格的特性。
15、float: left | right;
清楚浮动的通用代码(挺好用)
.clear::before,
.clear::after {
display: table;
content: '';
}
.clear::after {
clear: both;
}
16、定位
relative
>> 语法:
position: relative;
坐标点:left || right + top || bottom
相对于自己原来的位置。
没有脱离文档流。
absolute
>> 语法:
position: absolute;
left || right: 数值;
top || bottom: 数值;
绝对定位会脱离文档流;
如果当前元素的所有祖先级元素都没有定位,则相对于浏览器当前可视窗口进行定位;
如果祖先级元素有定位,则相对于有定位的祖先级元素进行定位;
定位边界点包含 padding,不包含margin、border。
fixed
>> 语法:
position: fixed;
left || right: 数值;
top || bottom: 数值;
定位相对于浏览器可视窗口,并且不会随着浏览器滚动条的改变而改变位置。
z-index
该属性用于决定定位元素(绝对、相对、固定)的层级关系,如果没有定位,则该属性不生效的。
问题:
一个元素有定位,并且设置了一个很大的z-index 的值,但是依然被一个元素遮挡住了。
解决办法:提高父元素的 z-index。
17、css样式文件的命名(我用过的)
头:header
内容:content/containe
尾:footer
导航:nav
侧栏:sidebar
栏目:column
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
服务:service
注册:regsiter
状态:status