HTML

快捷键

Shift+Alt+f 格式

Shift+Alt+up/down 复制

标题

标题跟SEO挂钩，不能乱用

1
<h1><h1>

h$*6

p,br,hr

段落，换行，水平线

1
<hr color="red" width="300px" size="10px" align="left">

img

src

alt:替代文本

width

height(和width不同时用，防止拉伸)

title:悬停提示

a 超文本链接

1
<a href="">内容，图片文字都可<a/>

文本

1
2
3
4
5
6
em     着重文字
i      斜体
b      加粗
strong 加重语气
span   无特殊含义
del    删除线

列表

有序列表

1
2
3
4
5
6
<ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>桃子</li>
</ol>

无序列表

1
2
3
4
5
<ul type="circle">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

快捷键

ul>li*3

表格

1
2
3
4
5
6
7
8
9
10
11
    <table>
        <tr>
            <td>苹果</td>
            <td>香蕉</td>
        </tr>
    </table>

border
width
height

快捷键

1
table>tr*2>td*2{text}

合并单元格

1
2
3
<td rowspan="3"> 合并不同行
<td colspan="3"> 合并不同列
<td colspan="3" rowspan="3"> 合并9格

Form

1
2
3
4
5
<form action="" method="post">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

元素分类

块级元素

div form h1~h6 hr p table ul

行内元素

a b em i span strong

行内块级

button img input

HTML5新增标签

image

1
2
3
4
5
6
<header></header>
<nav></nav>
<section></section>
<aside></aside>
<footer></footer>
<article></article>

CSS

引入方式

内联样式

没什么b用

1
2
3
<p style="color:red;font-size:30px">
    
</p>

内部样式

也没什么b用

1
2
3
4
5
<style>
    h1{
        background:red;
    }
</style>

外部样式

1
2
3
p{
	color:green;
}
1
<link rel="stylesheet" href="">

选择器

全局选择器

1
2
3
4
*{
	margin:0;
    padding:0;
}

元素选择器

1
2
3
4
5
6
7
p{
	
}

h1{

}

类选择器

1
2
3
4
.oneclass{
	width:800px;
}
<h2 class="oneclass"></h2>

ID选择器

1
2
3
4
<h2 id="mytitle"></h2>
#mytitle{
	border:3px dashed green;
}

字体属性

color

1
2
3
4
color:red;
color:#ff0000;
color:rgb(255,0,0);
color:rgba(255,0,0,.5);

font-size

font-weight

1
2
3
4
5
6
bold
bolder
lighter
100~900,400==default,700==bold


font-style

1
2
italic  斜体
normal

font-family

1
"微软雅黑"

背景属性

background-color

background-image

background-position

1
2
3
4
5
6
7
8
9
10
11
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos

background-repeat 图片 平铺

1
2
3
4
repeat(default)
repeat-x
repeat-y
no-repeat

background-size

1
2
3
4
length
percentage
cover
contain

文本属性

text-align

1
2
3
left
right
center

text-decoration 下划线

1
2
3
underline
overline
line-through

text-transform

1
2
3
captialize  单词开头大写
uppercase
lowercase

text-indent 缩进

1
50px

表格属性

边框

1
2
3
table,td{
border:1px solid black;
}

折叠边框

把多余边框折叠

1
border-collapse:collapse
1
2
width
height

text-align:right

vertical-align:bottom

background-color

color

关系选择器

后代选择器

1
E F{}

子代选择器

1
E>F{}