HTML/CSS

HTML基础

Web三要素:浏览器、服务器、HTTP协议

元素显示方式:块级元素、行内元素

HTML常用元素

注意:并非所有元素没有内容时都可写成自闭合标签。常用的自闭合标签有:<meta /><link /><br /><hr /><img /><input />

元素

名称及注释

全局及头部元素

<!DOCTYPE html>

<html>

<head></head>

<body></body>

</html>

HTML5文档声明

HTML5基本结构

<meta charset="UTF-8">

文档编码(UTF-8)

<link rel="stylesheet" type="text/css" href="*.css" />

引用外部样式表

<script src="....js" type="text/javascript"></script>

引用外部JavaScript脚本

<style></style>

内部样式表

<script></script>

客户端脚本

<title></title>

标题

分区元素

<div></div>

块分区

<span></span>

行分区

标题和段落

<h1></h1> … <h6></h6>

标题(heading)(分六级)

<p></p>

段落(paragraph)

<br />

折行(break)

<hr />

水平线(horizontal rule)

文本格式化

<b></b>

粗体(bold)

<i></i>

斜体(italics)

<strong></strong>

以粗体加重

<em></em>

以斜体着重(emphasize)

<big></big>

大号

<small></small>

小号

<sub></sub>

下标(subscript)

<sup></sup>

上标(superscript)

<del></del>

删除字

<ins></ins>

插入字(与删除字连用)

<u></u>

下划线(underlined)

<pre></pre>

预格式文本

图像

<img src="" />

src=""

width=""

height=""

border=""

alt=""

align=""

图像

边框

替换文本

对齐方式

<a href=""><img src="" /></a>

图像带链接

超链接

<a href=""></a>

target="_self"

target="_blank"

target="_top"

target="_parent"

target="框架名"

超链接

在本框架中打开

在新窗口中打开

打开时跳出框架

在父框架中打开

在指定框架中打开

<a name="..."></a>
<a href="#..."></a>

<a href="#"></a>

创建锚点

链接锚点

回到顶部

列表和表格

<ol><li></li>…</ol>

有序列表&列表项(ordered lists)

<ul><li></li>…</ul>

无序列表&列表项(unordered lists)

<table></table>

属性:width/height/align border/cellpadding/cellspacing/

表格

属性:/宽/高/水平对齐方式/

边框/单元格边距/单元格间距

<caption></caption>

表格标题

<tr><td></td></tr>

tr属性:align/valign

td属性:align/valign/

width/height/rowspan/colspan

表格行、表格列(单元格)(td:table data

tr属性:水平/垂直对齐方式

td属性:水平/垂直对齐方式

/宽/高/跨行/跨列

<th></th>

表头

<thead></thead>

表头行分组

<tbody></tbody>

表主体行分组

<tfoot></tfoot>

表尾行分组

表单

<form></form>

action=""

method=""

enctype=""

表单

提交地址

提交方式

编码方式

<input type="text" />

<input type="password" />

value=""

maxlength=""

placeholder=""

readonly

文本框

密码框

输入内容

最大长度

提示

只读

<input type="radio" />

<input type="checkbox" />

value=""

name=""

checked="checked"(或直接checked)

单选框

复选框

提交的值

分组名

设置选中

<input type="submit" />

<input type="reset" />

<input type="button" />

value=""

提交按钮

重置按钮

普通按钮(用于执行客户端脚本)

按钮名字

<input type="hidden" />

<input type="file" />

隐藏域

文件选择框

<textarea></textarea>

cols=""

rows=""

readonly

文本域

列数

行数

只读

<select>

<option></option> …

value=""

selected="selected"(或直接selected)

</select>

下拉选

下拉选项……

提交的值

设置选中

下拉选

<label for="控件id">文本</label>

绑定文本到控件,增加控件焦点

HTML常用字符实体

显示结果

描述

实体名称

实体编号

空格

<

小于号

<

<

>

大于号

>

>

&

和号

&

&

"

引号

"

"

'

撇号

' (IE不支持)

'

分(cent)

¢

¢

£

镑(pound)

£

£

¥

元(yen)

¥

¥

欧元(euro)

§

小节

§

§

©

版权(copyright)

©

©

®

注册商标

®

®

商标

×

乘号

×

×

÷

除号

÷

÷

HTML/CSS易混淆代码

bgcolor="背景颜色"

background="背景图片地址"

style="background-color:背景颜色"

style="background-image:url(背景图片地址)"

style="color:文字颜色"

CSS基础

样式优先级

  1. 从低到高依次为:浏览器默认样式 < 外部或内部样式(就近优先) < 内联样式
  2. 相同的样式,如果重复定义,以最后一次的为准。

CSS选择器分类

id选择器、类选择器、元素.类选择器、元素选择器、选择器组、派生选择器(后代选择器、子元素选择器、相邻兄弟选择器)、属性选择器、伪类选择器(常用伪类::link未访问的超链接;:visited已访问的超链接;:hover悬停元素;:focus焦点元素;:active激活元素)。

CSS常用样式单位:百分比%、像素px、当前字体尺寸em。

CSS颜色表示方法:十六进制#FF0000、十六进制简写#F00、十进制rgb(255,0,0)、百分比rgb(100%,0%,0%)、单词red。

CSS选择器参考

选择器

例子

例子描述

CSS

#id

#firstname

选择 id="firstname" 的所有元素。

1

.class

.intro

选择 class="intro" 的所有元素。

1

element.class

p.center

选择 class="center" 的 所有<p> 元素

*

*

选择所有元素。

2

element

p

选择所有 <p> 元素。

1

element1,element2

div,p

选择所有 <div> 元素和所有 <p> 元素。

1

element1 element2

div p

选择 <div> 元素内部的所有 <p> 元素。

1

element1>element2

div>p

选择父元素为 <div> 元素的所有 <p> 元素。

2

href="http://www.w3school.com.cn/cssref/selector_element_plus.asp" title="CSS element+element 选择器" element1+element2

div+p

选择紧接 <div> 元素之后的 <p> 元素。

2

element1~element2

p~ul

选择同父元素下前有 <p> 元素的 <ul> 元素(不必紧接)。

3

[attribute]

[target]

选择带有 target 属性所有元素。

2

[attribute=value]

[target=_blank]

选择 target="_blank" 的所有元素。

2

[attribute~=value]

[title~=flower]

选择 title 属性包含单词 "flower" 的所有元素。

2

[attribute|=value]

[lang|=en]

选择 lang 属性值以 "en" 开头的所有元素(全词匹配)。

2

[attribute^=value]

a[src^="https"]

选择其 src 属性值以 "https" 开头的每个 <a> 元素。

3

[attribute$=value]

a[src$=".pdf"]

选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。

3

[attribute*=value]

a[src*="abc"]

选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。

3

:link

a:link

选择所有未被访问的链接。

1

:visited

a:visited

选择所有已被访问的链接。

1

:active

a:active

选择活动链接。

1

:hover

a:hover

选择鼠标指针位于其上的链接。

1

:focus

input:focus

选择获得焦点的 input 元素。

2

:first-letter

p:first-letter

选择每个 <p> 元素的首字母。

1

:first-line

p:first-line

选择每个 <p> 元素的首行。

1

:first-child

p:first-child

选择属于父元素的第一个子元素的每个 <p> 元素。

2

:before

p:before

在每个 <p> 元素的内容之前插入内容。

2

:after

p:after

在每个 <p> 元素的内容之后插入内容。

2

:lang(language)

p:lang(it)

选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。

2

:first-of-type

p:first-of-type

选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

3

:last-of-type

p:last-of-type

选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

3

:only-of-type

p:only-of-type

选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

3

:only-child

p:only-child

选择属于其父元素的唯一子元素的每个 <p> 元素。

3

:nth-child(n)

p:nth-child(2)

选择属于其父元素的第二个子元素的每个 <p> 元素。

3

:nth-last-child(n)

p:nth-last-child(2)

同上,从最后一个子元素开始计数。

3

:nth-of-type(n)

p:nth-of-type(2)

选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

同上,但是从最后一个子元素开始计数。

3

:last-child

p:last-child

选择属于其父元素最后一个子元素每个 <p> 元素。

3

:root

:root

选择文档的根元素。

3

:empty

p:empty

选择没有子元素的每个 <p> 元素(包括文本节点)。

3

:target

#news:target

选择当前活动的 #news 元素。

3

:enabled

input:enabled

选择每个启用的 <input> 元素。

3

:disabled

input:disabled

选择每个禁用的 <input> 元素

3

:checked

input:checked

选择每个被选中的 <input> 元素。

3

:not(selector)

:not(p)

选择非 <p> 元素的每个元素。

3

::selection

::selection

选择被用户选取的元素部分。

3

CSS常用属性

属性/语法/例子

描述

CSS

尺寸属性(Dimension)

描述

height

设置元素内容区高度。

1

width

设置元素内容区宽度。

1

max-height

设置元素内容区的最大高度。

2

max-width

设置元素内容区的最大宽度。

2

min-height

设置元素内容区的最小高度。

2

min-width

设置元素内容区的最小宽度。

2

边框属性(Border 和 Outline)

多值且不同单位的,可不设某值,可不定顺序

border(多值)

border-width

border-style

border-color

设置四边框属性。style值:solid / …

设置四条边框的宽度。

设置四条边框的样式。

设置四条边框的颜色。

1

1

2

2

border-bottom多值

border-bottom-width

border-bottom-style

border-bottom-color

设置下边框属性。

设置下边框的宽度。

设置下边框的样式。

设置下边框的颜色。

1

1

2

2

border-left(多值)border-left-width

border-left-style

border-left-color

设置左边框属性。

设置左边框的宽度。

设置左边框的样式。

设置左边框的颜色。

1

1

2

2

border-right(多值)

border-right-width

border-right-style

border-right-color

设置右边框属性。

设置右边框的宽度。

设置右边框的样式。

设置右边框的颜色。

1

1

2

2

border-top(多值)

border-top-width

border-top-style

border-top-color

设置上边框属性。

设置上边框的宽度。

设置上边框的样式。

设置上边框的颜色。

1

1

2

2

outline(多值)

outline-color

outline-style

outline-width

设置轮廓属性。

设置轮廓的颜色。

设置轮廓的样式。

设置轮廓的宽度。

2

border-radius多值

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

设置边框圆角大小(值:length / %)。

定义边框左上角的圆角大小。

定义边框右上角的圆角大小。

定义边框左下角的圆角大小。

定义边框右下角的圆角大小。

3

border-image(多值)

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

设置边框图像。

规定用作边框的图片。

规定图像边框的向内偏移。

规定图片边框的宽度。

规定边框图像区域超出边框的量。

边框图像重复模式:平铺(repeated)、铺满(rounded)或拉伸(stretched)。

3

box-decoration-break

3

box-shadow

向方框添加一个或多个阴影。

3

边距属性(Margin 和 Padding)

描述

CSS

margin(1到4值)

margin-top

margin-right

margin-bottom

margin-left

设置外边距属性。(四值:上、右、下、左;三值:上、左右、下;二值:上下、左右;一值:上下左右)(二值时第二值为auto则左右居中)

设置元素的上外边距。设置元素的右外边距。

设置元素的下外边距。设置元素的左外边距。

1

padding(四值或统一单值)

padding-top

padding-right

padding-bottom

padding-left

设置内边距属性。(四值:上、右、下、左;三值:上、左右、下;二值:上下、左右;一值:上下左右)

设置元素的上内边距。设置元素的右内边距。

设置元素的下内边距。设置元素的左内边距。

1

背景属性(Background)

描述

CSS

background(多值)

设置背景属性。

1

background-color

设置元素的背景颜色。

1

background-image

设置元素的背景图像:url(...)

1

background-repeat

设置是否及如何重复背景图像(默认重复):repeat / repeat-x / repeat-y / no-repeat

1

background-position

设置背景图像的开始位置:x y / x% y% / left / center / right / top / bottom

1

background-attachment

设置背景图像是否随页面滚动(默认是):scroll / fixed

1

background-clip

规定背景的绘制区域:border-box / padding-box / content-box

3

background-origin

规定背景图片的定位区域:border-box / padding-box / content-box

3

background-size

规定背景图片的尺寸:x y / x% y%

3

Box 属性

描述

CSS

overflow

当内容溢出元素框时如何处理:visible / hidden / scroll / auto / ...

2

overflow-x

如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪:visible / hidden / scroll / auto / no-display / no-content

3

overflow-y

如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪:visible / hidden / scroll / auto / no-display / no-content

3

overflow-style

规定溢出元素的首选滚动方法。(尚无浏览器支持)

3

rotation

围绕由 rotation-point 属性定义的点对元素进行旋转。(尚无浏览器支持)

3

rotation-point

定义距离上左边框边缘的偏移点。(尚无浏览器支持)

3

定位属性(Positioning)

描述

CSS

float

浮动定位用于块元素横排:none / left / right (左顺右逆)

1

clear

规定元素的哪一侧不允许其他浮动元素:none / left / right / both

1

position

(相对定位不释放原空间,偏移量小,如照片墙抖动;绝对定位释放空间,偏移量大,如文字放图片上)

规定元素的定位类型:static / relative / absolute / fixed (流定位/相对定位/绝对定位/固定定位)

相对定位例子:

{position:relative; left:5px; top:5px;}

绝对定位例子:

参考元素 {position:relative;}(非必需)

目标元素 {position:absolute; left:50px; top:50px;}

固定定位例子:

{position:fixed; bottom:5px; right:5px;}

2

left / right / top / bottom

设置定位元素 左/右/上/下 外边距边界与其包含块 左/右/上/下 边界之间的偏移。

2

z-index

设置元素的堆叠顺序。值可负,值越大越靠前。

2

display

规定元素应该生成的框的类型:none / block / inline / inline-block (常用于后期代码维护、图片轮播处理)

1

cursor

规定光标形状:default / pointer / crosshair / text / wait / help

2

vertical-align

设置元素的垂直对齐方式。

1

visibility

规定元素是否可见。

2

clip

剪裁绝对定位元素。

2

列表属性(List)

描述

CSS

list-style

设置所有的列表属性。

1

list-style-type

设置列表项标记的类型。

无序列表取值:none / disc / circle / square

有序列表取值:none / decimal / lower-roman / upper-roman / ...

1

list-style-image

将图象设置为列表项标记:url(...)

1

list-style-position

设置列表项标记的放置位置:outside / inside

1

marker-offset

2

表格属性(Table)

表格亦可使用box模型属性(width / height / border / padding)以及文本属性

CSS

border-collapse

规定是否合并单元格边框:separate / collapse

2

border-spacing

规定相邻单元格边框间距。

2

caption-side

规定表格标题的位置。

2

empty-cells

是否显示空单元格(边框和背景):show / hide

2

table-layout

设置表格的布局算法:automatic / fixed / ...

2

字体属性(Font)

描述

CSS

font

设置所有字体属性。

1

font-family

设置字体系列:'微软雅黑','文泉驿正黑','黑体'

1

font-size

设置字体尺寸。

1

font-weight

规定字体的粗细:normal / bold

1

font-size-adjust

为元素规定 aspect 值。

2

font-stretch

收缩或拉伸当前的字体系列。

2

font-style

规定文本的字体样式。

1

font-variant

规定是否以小型大写字母的字体显示文本。

1

文本属性(Text)

描述

CSS

color

设置文本的颜色。

1

text-align

规定文本的水平对齐方式:left / right / center

1

line-height

设置行高:1.6em

1

text-indent

首行文本缩进:2em

1

text-decoration

规定添加到文本的装饰效果。none / underline

1

white-space

规定如何处理元素中的空白。

1

direction

规定文本的方向 / 书写方向。

2

letter-spacing

设置字符间距。

1

text-shadow

规定添加到文本的阴影效果。

2

text-transform

控制文本的大小写。

1

unicode-bidi

设置文本方向。

2

word-spacing

设置单词间距。

1

hanging-punctuation

规定标点字符是否位于线框之外。

3

punctuation-trim

规定是否对标点字符进行修剪。

3

text-align-last

设置如何对齐最后一行或紧挨着强制换行符之前的行。

3

text-emphasis

向元素的文本应用重点标记以及重点标记的前景色。

3

text-justify

规定当 text-align 设置为 "justify" 时所使用的对齐方法。

3

text-outline

规定文本的轮廓。

3

text-overflow

规定当文本溢出包含元素时发生的事情。

3

text-shadow

向文本添加阴影。

3

text-wrap

规定文本的换行规则。

3

word-break

规定非中日韩文本的换行规则。

3

word-wrap

允许对长的不可分割的单词进行分割并换行到下一行。

3

Color 属性

描述

CSS

color-profile

允许使用源的颜色配置文件的默认以外的规范。

3

opacity

规定书签的级别。

3

rendering-intent

允许使用颜色配置文件渲染意图的默认以外的规范。

3

Content for Paged Media 属性

描述

CSS

bookmark-label

规定书签的标记。

3

bookmark-level

规定书签的级别。

3

bookmark-target

规定书签链接的目标。

3

float-offset

将元素放在 float 属性通常放置的位置的相反方向。

3

hyphenate-after

规定连字单词中连字符之后的最小字符数。

3

hyphenate-before

规定连字单词中连字符之前的最小字符数。

3

hyphenate-character

规定当发生断字时显示的字符串。

3

hyphenate-lines

指示元素中连续断字连线的最大数。

3

hyphenate-resource

规定帮助浏览器确定断字点的外部资源(逗号分隔的列表)。

3

hyphens

设置如何对单词进行拆分,以改善段落的布局。

3

image-resolution

规定图像的正确分辨率。

3

marks

向文档添加裁切标记或十字标记。

3

string-set

3

可伸缩框属性(Flexible Box)

描述

CSS

box-align

规定如何对齐框的子元素。

3

box-direction

规定框的子元素的显示方向。

3

box-flex

规定框的子元素是否可伸缩。

3

box-flex-group

将可伸缩元素分配到柔性分组。

3

box-lines

规定当超出父元素框的空间时,是否换行显示。

3

box-ordinal-group

规定框的子元素的显示次序。

3

box-orient

规定框的子元素是否应水平或垂直排列。

3

box-pack

规定水平框中的水平位置或者垂直框中的垂直位置。

3

内容生成(Generated Content)

描述

CSS

content

与 :before 以及 :after 伪元素配合使用,来插入生成内容。

2

counter-increment

递增或递减一个或多个计数器。

2

counter-reset

创建或重置一个或多个计数器。

2

quotes

设置嵌套引用的引号类型。

2

crop

允许被替换元素仅仅是对象的矩形区域,而不是整个对象。

3

move-to

从流中删除元素,然后在文档中后面的点上重新插入。

3

page-policy

确定元素基于页面的 occurrence 应用于计数器还是字符串值。

3

Grid 属性

描述

CSS

grid-columns

规定网格中每个列的宽度。

3

grid-rows

规定网格中每个列的高度。

3

Hyperlink 属性

描述

CSS

target

简写属性,设置target-name、target-new以及target-position属性。

3

target-name

规定在何处打开链接(链接的目标)。

3

target-new

规定目标链接在新窗口还是在已有窗口的新标签页中打开。

3

target-position

规定在何处放置新的目标链接。

3

Marquee 属性

描述

CSS

marquee-direction

设置移动内容的方向。

3

marquee-play-count

设置内容移动多少次。

3

marquee-speed

设置内容滚动得多快。

3

marquee-style

设置移动内容的样式。

3

多列属性

(Multi-column)

描述

CSS

column-count

规定元素应该被分隔的列数。

3

column-fill

规定如何填充列。

3

column-gap

规定列之间的间隔。

3

column-rule

设置所有 column-rule-* 属性的简写属性。

3

column-rule-color

规定列之间规则的颜色。

3

column-rule-style

规定列之间规则的样式。

3

column-rule-width

规定列之间规则的宽度。

3

column-span

规定元素应该横跨的列数。

3

column-width

规定列的宽度。

3

columns

规定设置 column-width 和 column-count 的简写属性。

3

Paged Media 属性

描述

CSS

fit

示意如何对width和height属性均不是auto的被替换元素进行缩放。

3

fit-position

定义盒内对象的对齐方式。

3

image-orientation

规定用户代理应用于图像的顺时针方向旋转。

3

page

规定元素应该被显示的页面特定类型。

3

size

规定页面内容包含框的尺寸和方向。

3

CSS 打印属性(Print)

描述

CSS

orphans

设置当元素内部发生分页时必须在页面底部保留的最少行数。

2

page-break-after

设置元素后的分页行为。

2

page-break-before

设置元素前的分页行为。

2

page-break-inside

设置元素内部的分页行为。

2

widows

设置当元素内部发生分页时必须在页面顶部保留的最少行数。

2

2D/3D 转换属性

(Transform)

描述

CSS

transform

向元素应用 2D 或 3D 转换。

3

transform-origin

允许你改变被转换元素的位置。

3

transform-style

规定被嵌套元素如何在 3D 空间中显示。

3

perspective

规定 3D 元素的透视效果。

3

perspective-origin

规定 3D 元素的底部位置。

3

backface-visibility

定义元素在不面对屏幕时是否可见。

3

过渡属性(Transition)

描述

CSS

transition

简写属性,用于在一个属性中设置四个过渡属性。

3

transition-property

规定应用过渡的 CSS 属性的名称。

3

transition-duration

定义过渡效果花费的时间。

3

transition-timing-function

规定过渡效果的时间曲线。

3

transition-delay

规定过渡效果何时开始。

3

用户界面属性

(User-interface)

描述

CSS

appearance

允许您将元素设置为标准用户界面元素的外观

3

box-sizing

允许您以确切的方式定义适应某个区域的具体内容。

3

icon

为创作者提供使用图标化等价物来设置元素样式的能力。

3

nav-down

规定在使用 arrow-down 导航键时向何处导航。

3

nav-index

设置元素的 tab 键控制次序。

3

nav-left

规定在使用 arrow-left 导航键时向何处导航。

3

nav-right

规定在使用 arrow-right 导航键时向何处导航。

3

nav-up

规定在使用 arrow-up 导航键时向何处导航。

3

outline-offset

对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

3

resize

规定是否可由用户对元素的尺寸进行调整。

3

    1. 动画属性
    • Animation)

描述

CSS

@keyframes

规定动画。

3

animation

所有动画属性的简写属性,除了 animation-play-state 属性。

3

animation-name

规定 @keyframes 动画的名称。

3

animation-duration

规定动画完成一个周期所花费的秒或毫秒。

3

animation-timing-function

规定动画的速度曲线。

3

animation-delay

规定动画何时开始。

3

animation-iteration-count

规定动画被播放的次数。

3

animation-direction

规定动画是否在下一周期逆向地播放。

3

animation-play-state

规定动画是否正在运行或暂停。

3

animation-fill-mode

规定对象动画时间之外的状态。

3

CSS小技巧

元素水平居中方法:使用margin:0 auto;如果是行内元素,同时用display:block;转化成块级元素。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值