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> | 创建锚点 链接锚点 回到顶部 |
列表和表格 | |
<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基础
样式优先级:
- 从低到高依次为:浏览器默认样式 < 外部或内部样式(就近优先) < 内联样式
- 相同的样式,如果重复定义,以最后一次的为准。
CSS选择器分类:
id选择器、类选择器、元素.类选择器、元素选择器、选择器组、派生选择器(后代选择器、子元素选择器、相邻兄弟选择器)、属性选择器、伪类选择器(常用伪类::link未访问的超链接;:visited已访问的超链接;:hover悬停元素;:focus焦点元素;:active激活元素)。
CSS常用样式单位:百分比%、像素px、当前字体尺寸em。
CSS颜色表示方法:十六进制#FF0000、十六进制简写#F00、十进制rgb(255,0,0)、百分比rgb(100%,0%,0%)、单词red。
CSS选择器参考
选择器 | 例子 | 例子描述 | CSS |
#firstname | 选择 id="firstname" 的所有元素。 | 1 | |
.intro | 选择 class="intro" 的所有元素。 | 1 | |
element.class | p.center | 选择 class="center" 的 所有<p> 元素 | |
* | 选择所有元素。 | 2 | |
p | 选择所有 <p> 元素。 | 1 | |
div,p | 选择所有 <div> 元素和所有 <p> 元素。 | 1 | |
div p | 选择 <div> 元素内部的所有 <p> 元素。 | 1 | |
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 |
p~ul | 选择同父元素下前有 <p> 元素的 <ul> 元素(不必紧接)。 | 3 | |
[target] | 选择带有 target 属性所有元素。 | 2 | |
[target=_blank] | 选择 target="_blank" 的所有元素。 | 2 | |
[title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 | |
[lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素(全词匹配)。 | 2 | |
a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 | |
a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 | |
a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | 3 | |
a:link | 选择所有未被访问的链接。 | 1 | |
a:visited | 选择所有已被访问的链接。 | 1 | |
a:active | 选择活动链接。 | 1 | |
a:hover | 选择鼠标指针位于其上的链接。 | 1 | |
input:focus | 选择获得焦点的 input 元素。 | 2 | |
p:first-letter | 选择每个 <p> 元素的首字母。 | 1 | |
p:first-line | 选择每个 <p> 元素的首行。 | 1 | |
p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 | 2 | |
p:before | 在每个 <p> 元素的内容之前插入内容。 | 2 | |
p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 | |
p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 | 2 | |
p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 | |
p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 | |
p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 | |
p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 | |
p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 | |
p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 | 3 | |
p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 | |
p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 | 3 | |
p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 | |
:root | 选择文档的根元素。 | 3 | |
p:empty | 选择没有子元素的每个 <p> 元素(包括文本节点)。 | 3 | |
#news:target | 选择当前活动的 #news 元素。 | 3 | |
input:enabled | 选择每个启用的 <input> 元素。 | 3 | |
input:disabled | 选择每个禁用的 <input> 元素 | 3 | |
input:checked | 选择每个被选中的 <input> 元素。 | 3 | |
:not(p) | 选择非 <p> 元素的每个元素。 | 3 | |
::selection | 选择被用户选取的元素部分。 | 3 |
CSS常用属性
属性/语法/例子 | 描述 | CSS |
尺寸属性(Dimension) | 描述 | |
设置元素内容区高度。 | 1 | |
设置元素内容区宽度。 | 1 | |
设置元素内容区的最大高度。 | 2 | |
设置元素内容区的最大宽度。 | 2 | |
设置元素内容区的最小高度。 | 2 | |
设置元素内容区的最小宽度。 | 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 | |
向方框添加一个或多个阴影。 | 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 |
设置元素的背景颜色。 | 1 | |
设置元素的背景图像:url(...) | 1 | |
设置是否及如何重复背景图像(默认重复):repeat / repeat-x / repeat-y / no-repeat | 1 | |
设置背景图像的开始位置:x y / x% y% / left / center / right / top / bottom | 1 | |
设置背景图像是否随页面滚动(默认是):scroll / fixed | 1 | |
规定背景的绘制区域:border-box / padding-box / content-box | 3 | |
规定背景图片的定位区域:border-box / padding-box / content-box | 3 | |
规定背景图片的尺寸:x y / x% y% | 3 | |
Box 属性 | 描述 | CSS |
当内容溢出元素框时如何处理:visible / hidden / scroll / auto / ... | 2 | |
如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪:visible / hidden / scroll / auto / no-display / no-content | 3 | |
如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪:visible / hidden / scroll / auto / no-display / no-content | 3 | |
规定溢出元素的首选滚动方法。(尚无浏览器支持) | 3 | |
围绕由 rotation-point 属性定义的点对元素进行旋转。(尚无浏览器支持) | 3 | |
定义距离上左边框边缘的偏移点。(尚无浏览器支持) | 3 | |
定位属性(Positioning) | 描述 | CSS |
浮动定位用于块元素横排:none / left / right (左顺右逆) | 1 | |
规定元素的哪一侧不允许其他浮动元素:none / left / right / both | 1 | |
(相对定位不释放原空间,偏移量小,如照片墙抖动;绝对定位释放空间,偏移量大,如文字放图片上) | 规定元素的定位类型: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 |
设置定位元素 左/右/上/下 外边距边界与其包含块 左/右/上/下 边界之间的偏移。 | 2 | |
设置元素的堆叠顺序。值可负,值越大越靠前。 | 2 | |
规定元素应该生成的框的类型:none / block / inline / inline-block (常用于后期代码维护、图片轮播处理) | 1 | |
规定光标形状:default / pointer / crosshair / text / wait / help | 2 | |
设置元素的垂直对齐方式。 | 1 | |
规定元素是否可见。 | 2 | |
剪裁绝对定位元素。 | 2 | |
列表属性(List) | 描述 | CSS |
设置所有的列表属性。 | 1 | |
设置列表项标记的类型。 无序列表取值:none / disc / circle / square 有序列表取值:none / decimal / lower-roman / upper-roman / ... | 1 | |
将图象设置为列表项标记:url(...) | 1 | |
设置列表项标记的放置位置:outside / inside | 1 | |
marker-offset | 2 | |
表格属性(Table) | 表格亦可使用box模型属性(width / height / border / padding)以及文本属性 | CSS |
规定是否合并单元格边框:separate / collapse | 2 | |
规定相邻单元格边框间距。 | 2 | |
规定表格标题的位置。 | 2 | |
是否显示空单元格(边框和背景):show / hide | 2 | |
设置表格的布局算法:automatic / fixed / ... | 2 | |
字体属性(Font) | 描述 | CSS |
设置所有字体属性。 | 1 | |
设置字体系列:'微软雅黑','文泉驿正黑','黑体' | 1 | |
设置字体尺寸。 | 1 | |
规定字体的粗细:normal / bold | 1 | |
为元素规定 aspect 值。 | 2 | |
收缩或拉伸当前的字体系列。 | 2 | |
规定文本的字体样式。 | 1 | |
规定是否以小型大写字母的字体显示文本。 | 1 | |
文本属性(Text) | 描述 | CSS |
设置文本的颜色。 | 1 | |
规定文本的水平对齐方式:left / right / center | 1 | |
设置行高:1.6em | 1 | |
首行文本缩进:2em | 1 | |
规定添加到文本的装饰效果。none / underline | 1 | |
规定如何处理元素中的空白。 | 1 | |
规定文本的方向 / 书写方向。 | 2 | |
设置字符间距。 | 1 | |
text-shadow | 规定添加到文本的阴影效果。 | 2 |
控制文本的大小写。 | 1 | |
设置文本方向。 | 2 | |
设置单词间距。 | 1 | |
规定标点字符是否位于线框之外。 | 3 | |
规定是否对标点字符进行修剪。 | 3 | |
text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
向元素的文本应用重点标记以及重点标记的前景色。 | 3 | |
规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | 3 | |
规定文本的轮廓。 | 3 | |
规定当文本溢出包含元素时发生的事情。 | 3 | |
向文本添加阴影。 | 3 | |
规定文本的换行规则。 | 3 | |
规定非中日韩文本的换行规则。 | 3 | |
允许对长的不可分割的单词进行分割并换行到下一行。 | 3 | |
Color 属性 | 描述 | CSS |
color-profile | 允许使用源的颜色配置文件的默认以外的规范。 | 3 |
规定书签的级别。 | 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 |
规定如何对齐框的子元素。 | 3 | |
规定框的子元素的显示方向。 | 3 | |
规定框的子元素是否可伸缩。 | 3 | |
将可伸缩元素分配到柔性分组。 | 3 | |
规定当超出父元素框的空间时,是否换行显示。 | 3 | |
规定框的子元素的显示次序。 | 3 | |
规定框的子元素是否应水平或垂直排列。 | 3 | |
规定水平框中的水平位置或者垂直框中的垂直位置。 | 3 | |
内容生成(Generated Content) | 描述 | CSS |
与 :before 以及 :after 伪元素配合使用,来插入生成内容。 | 2 | |
递增或递减一个或多个计数器。 | 2 | |
创建或重置一个或多个计数器。 | 2 | |
设置嵌套引用的引号类型。 | 2 | |
crop | 允许被替换元素仅仅是对象的矩形区域,而不是整个对象。 | 3 |
move-to | 从流中删除元素,然后在文档中后面的点上重新插入。 | 3 |
page-policy | 确定元素基于页面的 occurrence 应用于计数器还是字符串值。 | 3 |
Grid 属性 | 描述 | CSS |
规定网格中每个列的宽度。 | 3 | |
规定网格中每个列的高度。 | 3 | |
Hyperlink 属性 | 描述 | CSS |
简写属性,设置target-name、target-new以及target-position属性。 | 3 | |
规定在何处打开链接(链接的目标)。 | 3 | |
规定目标链接在新窗口还是在已有窗口的新标签页中打开。 | 3 | |
规定在何处放置新的目标链接。 | 3 | |
Marquee 属性 | 描述 | CSS |
marquee-direction | 设置移动内容的方向。 | 3 |
marquee-play-count | 设置内容移动多少次。 | 3 |
marquee-speed | 设置内容滚动得多快。 | 3 |
marquee-style | 设置移动内容的样式。 | 3 |
多列属性 (Multi-column) | 描述 | CSS |
规定元素应该被分隔的列数。 | 3 | |
规定如何填充列。 | 3 | |
规定列之间的间隔。 | 3 | |
设置所有 column-rule-* 属性的简写属性。 | 3 | |
规定列之间规则的颜色。 | 3 | |
规定列之间规则的样式。 | 3 | |
规定列之间规则的宽度。 | 3 | |
规定元素应该横跨的列数。 | 3 | |
规定列的宽度。 | 3 | |
规定设置 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 |
设置元素后的分页行为。 | 2 | |
设置元素前的分页行为。 | 2 | |
设置元素内部的分页行为。 | 2 | |
widows | 设置当元素内部发生分页时必须在页面顶部保留的最少行数。 | 2 |
2D/3D 转换属性 (Transform) | 描述 | CSS |
向元素应用 2D 或 3D 转换。 | 3 | |
允许你改变被转换元素的位置。 | 3 | |
规定被嵌套元素如何在 3D 空间中显示。 | 3 | |
规定 3D 元素的透视效果。 | 3 | |
规定 3D 元素的底部位置。 | 3 | |
定义元素在不面对屏幕时是否可见。 | 3 | |
过渡属性(Transition) | 描述 | CSS |
简写属性,用于在一个属性中设置四个过渡属性。 | 3 | |
规定应用过渡的 CSS 属性的名称。 | 3 | |
定义过渡效果花费的时间。 | 3 | |
规定过渡效果的时间曲线。 | 3 | |
规定过渡效果何时开始。 | 3 | |
用户界面属性 (User-interface) | 描述 | CSS |
允许您将元素设置为标准用户界面元素的外观 | 3 | |
允许您以确切的方式定义适应某个区域的具体内容。 | 3 | |
为创作者提供使用图标化等价物来设置元素样式的能力。 | 3 | |
规定在使用 arrow-down 导航键时向何处导航。 | 3 | |
设置元素的 tab 键控制次序。 | 3 | |
规定在使用 arrow-left 导航键时向何处导航。 | 3 | |
规定在使用 arrow-right 导航键时向何处导航。 | 3 | |
规定在使用 arrow-up 导航键时向何处导航。 | 3 | |
对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 | 3 | |
规定是否可由用户对元素的尺寸进行调整。 | 3 | |
| 描述 | CSS |
规定动画。 | 3 | |
所有动画属性的简写属性,除了 animation-play-state 属性。 | 3 | |
规定 @keyframes 动画的名称。 | 3 | |
规定动画完成一个周期所花费的秒或毫秒。 | 3 | |
规定动画的速度曲线。 | 3 | |
规定动画何时开始。 | 3 | |
规定动画被播放的次数。 | 3 | |
规定动画是否在下一周期逆向地播放。 | 3 | |
规定动画是否正在运行或暂停。 | 3 | |
规定对象动画时间之外的状态。 | 3 |
CSS小技巧
元素水平居中方法:使用margin:0 auto;如果是行内元素,同时用display:block;转化成块级元素。