1 文本字体属性 2 color : #999999; /*文字颜色*/ 3 4 font-family : 宋体,sans-serif; /*文字字体*/ 5 6 font-size : 9pt; /*文字大小*/ 7 8 font-style:itelic; /*文字斜体*/ 9 10 font-variant:small-caps; /*小字体*/ 11 12 letter-spacing : 1pt; /*字间距离*/ 13 14 line-height : 200%; /*设置行高*/ 15 16 font-weight:bold; /*文字粗体*/ 17 18 vertical-align:sub; /*下标字*/ 19 20 vertical-align:super; /*上标字*/ 21 22 text-decoration:line-through; /*加删除线*/ 23 24 text-decoration: overline; /*加顶线*/ 25 26 text-decoration:underline; /*加下划线*/ 27 28 text-decoration:none; /*删除链接下划线*/ 29 30 text-transform : capitalize; /*首字大写*/ 31 32 text-transform : uppercase; /*英文大写*/ 33 34 text-transform : lowercase; /*英文小写*/ 35 36 text-align:right; /*文字右对齐*/ 37 38 text-align:left; /*文字左对齐*/ 39 40 text-align:center; /*文字居中对齐*/ 41 42 line-height:height; /*上下居中对其*/ 43 44 text-align:justify; /*文字分散对齐*/ 45 46 vertical-align属性 47 48 vertical-align:top; /*垂直向上对齐*/ 49 50 vertical-align:bottom; /*垂直向下对齐*/ 51 52 vertical-align:middle; /*垂直居中对齐*/ 53 54 vertical-align:text-top; /*文字垂直向上对齐*/ 55 56 vertical-align:text-bottom; /*文字垂直向下对齐*/
修改默认属性
1 body { 2 margin: 0; 3 padding: 0; 4 font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC, 5 Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif; 6 } 7 /*清除a标签中的演示*/ 8 a { 9 text-decoration: none; 10 color: #000; 11 display: block; /*使a标签为一个盒子*/ 12 } 13 list-style-type:none; /*清除li标签的圆点， 放在li标签的div父类里面*/ 14 /*清除li标签的格式*/ 15 li { 16 list-style: none; 17 } 18 /*左浮动*/ 19 .float-left { 20 float: left; 21 } 22 /*有浮动*/ 23 .float-right { 24 float: right; 25 } 26 /*清除所有浮动样式*/ 27 .clear-float { 28 clear: both; 29 }
div中的标签：
1 overflow: hidden; /*防止溢出*/ 2 border: 1px solid sienna; /*边框*/
线条
1 虚线 2 <TEXTAREA STYLE="border:1px dashed pink"> 3 实线 4 <TEXTAREA STYLE="border:1px solid pink">
边框样式
1 border-top : 1px solid black 上框 2 border-bottom : 1px solid #6699cc 下框 3 border-left : 1px solid #6699cc 左框 4 border-right : 1px solid #6699cc 右框 5 border: 1px solid #6699cc 四边框
链接
1 A 所有超连接 2 A:link 超连接文字格式 3 A:visited 浏览过的连接文字格式 4 A:active 按下连接的格式 5 A:hover 鼠标移至连接
背景
1 background-color:black 背景颜色 2 background-image : url(image/bg.gif) 背景图片 3 background-attachment : fixed 固定背景 4 background-repeat : repeat 重复排列-网页预设 5 background-repeat : no-repeat 不重复排列 6 background-repeat : repeat-x 在x轴重复排列 7 background-repeat : repeat-y 在y轴重复排列 8 background-position : 90% 90% 背景图片x与y轴的位置
特殊效果
1、z-index:设置DIV的层叠顺序。用z-index属性时，position必需要指定为absolute才行。
2、cursor:设置DIV上光标的样式。
3、clip:设置剪辑矩形。clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。
4、opacity 透明度 filter:alpha(opacity=value) eg：filter:alpha(opacity=50);opacity:0.5;
表格样式
| 属性 | 描述 |
|---|---|
| border-collapse | 设置是否把表格边框合并为单一的边框。 |
| border-spacing | 设置分隔单元格边框的距离。 |
| caption-side | 设置表格标题的位置。 |
| empty-cells | 设置是否显示表格中的空单元格。 |
| table-layout | 设置显示单元、行和列的算法。 |
列表样式
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图像设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
HTML标签
头部（head标签）
是“<base>” 标签
是“<link>”标签
定义和用法
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
HTML 与 XHTML 之间的差异
在 HTML 中，<link> 标签没有结束标签。
在 XHTML 中，<link> 标签必须被正确地关闭。
提示和注释：
注释：link 元素是空元素，它仅包含属性。
注释：此元素只能存在于 head 部分，不过它可出现任何次数。
属性
new : HTML5 中的新属性。
属性 值 描述 charset char_encoding HTML5 中不支持。 href URL 规定被链接文档的位置。 hreflang language_code 规定被链接文档中文本的语言。 media media_query 规定被链接文档将被显示在什么设备上。 rel alternateauthorhelpiconlicencenextpingbackprefetchprevsearchsidebarstylesheettag 规定当前文档与被链接文档之间的关系。 rev reversed relationship HTML5 中不支持。 sizes heightxwidthany 规定被链接资源的尺寸。仅适用于 rel="icon"。 target _blank_self_top_parentframe_name HTML5 中不支持。 type MIME_type 规定被链接文档的 MIME 类型。
是“<meta>”标签
在 HTML 中，<meta> 标签没有结束标签。
在 XHTML 中，<meta> 标签必须被正确地关闭。
提示和注释：
注释：<meta> 标签永远位于 head 元素内部。
注释：元数据总是以名称/值的形式被成对传递的。
必需的属性
属性 值 描述 content some_text 定义与 http-equiv 或 name 属性相关的元信息 可选的属性
属性 值 描述 http-equiv content-typeexpiresrefreshset-cookie 把 content 属性关联到 HTTP 头部。 name authordescriptionkeywordsgeneratorrevisedothers 把 content 属性关联到一个名称。 scheme some_text 定义用于翻译 content 属性值的格式。 name 属性
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：
<meta name="keywords" content="HTML,ASP,PHP,SQL">如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
http-equiv 属性
http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
content 属性
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。
scheme 属性
scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。
全局属性
<meta> 标签支持 HTML 中的全局属性。
是“<script>”标签 ：是js文件或者内置js语句：
必选的属性
属性 值 描述 type MIME-type 指示脚本的 MIME 类型。 可选的属性
属性 值 描述 async async 规定异步执行脚本（仅适用于外部脚本）。 charset charset 规定在外部脚本文件中使用的字符编码。 defer defer 规定是否对脚本执行进行延迟，直到页面加载为止。 language script 不赞成使用。规定脚本语言。请使用 type 属性代替它。 src URL 规定外部脚本文件的 URL。 xml:space preserve 规定是否保留代码中的空白。
是“<style>”标签 ：是css内置样式
是“<title>”标签 ：页面得标题
定义文档类型
1 <html> 定义HTML文档。 2 3 <title> 定义文档的标题。 4 5 <body> 定义文档的主体。 6 7 <h1>to<h6> 定义HTML标题。 8 9 <p> 定义段落。 10 11 <br> 定义简单的折行。 12 13 <hr> 定义水平线。 14 15 <!--...--> 定义注释。
表单
1 <form> 定义供用户输入的HTML表单。 2 3 <input> 定义输入控件。 4 5 <textarea> 定义多行的文本输入控件。 6 7 <button> 定义按钮。 8 9 <select> 定义选择列表（下拉列表）。 10 11 <optgroup> 定义选择列表中相关选项的组合。 12 13 <option> 定义选择列表中的选项。 14 15 <label> 定义input元素的标注。 16 17 <fieldset> 定义围绕表单中元素的边框。 18 19 <legend> 定义fieldset元素的标题。 20 21 <datalist> 定义下拉列表。 22 23 <keygen> 定义生成密钥。 24 25 <output> 定义输出的一些类型。
框架
1 <frame> 定义框架集的窗口或框架。 2 3 <frameset> 定义框架集。 4 5 <noframes> 定义针对不支持框架的用户的替代内容。 6 7 <iframe> 定义内联框架。
图像
1 <img> 定义图像。 2 3 <map> 定义图像映射。 4 5 <area> 定义图像地图内部的区域。 6 7 <canvas> 定义图形。 8 9 <figcaption> 定义figure元素的标题。 10 11 <figure> 定义媒介内容的分组，以及它们的标题。
链接
1 <a> 定义锚。 2 3 <link> 定义文档与外部资源的关系。 4 5 <nav> 定义导航链接。
列表
1 <ul> 定义无序列表 2 3 <ol> 定义有序列表。 4 5 <li> 定义列表的项目。 6 7 <dir> 不赞成使用。定义目录列表。 8 9 <dl> 定义定义列表。 10 11 <dt> 定义定义列表中的项目。 12 13 <dd> 定义定义列表中项目的描述。 14 15 <menu> 定义命令的菜单/列表。 16 17 <menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。 18 19 <command> 定义命令按钮。
表格
1 <table> 定义表格 2 3 <caption> 定义表格标题。 4 5 <th> 定义表格中的表头单元格。 6 7 <tr> 定义表格中的行。 8 9 <td> 定义表格中的单元。 10 11 <thead> 定义表格中的表头内容。 12 13 <tbody> 定义表格中的主体内容。 14 15 <tfoot> 定义表格中的表注内容（脚注）。 16 17 <col> 定义表格中一个或多个列的属性值。 18 19 <colgroup> 定义表格中供格式化的列组。
样式/节
1 <style> 定义文档的样式信息。 2 3 <div> 定义文档中的节。 4 5 <span> 定义文档中的节。 6 7 <header> 定义section或page的页眉。 8 9 <footer> 定义section或page的页脚。 10 11 <section> 定义section。 12 13 <article> 定义文章。 14 15 <aside> 定义页面内容之外的内容。 16 17 <details> 定义元素的细节。 18 19 <dialog> 定义对话框或窗口。 20 21 <summary> 为<details>元素定义可见的标题。
li标签
值 描述
1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。
a 字母顺序的有序列表，小写（a, b, c, d）。
A 字母顺序的有序列表，大写（a, b, c, d）。
i 罗马数字，小写（i, ii, iii, iv）。
I 罗马数字，大写（i, ii, iii, iv）。
值 描述
disc 默认值。实心圆。
circle 空心圆。
square 实心方块。
水平线标签
定义和用法
标签在 HTML 页面中创建一条水平线。
标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
HTML 与 XHTML 之间的差异
在 HTML 中，<hr> 标签没有结束标签。
在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。
在 XHTML 1.0 Strict DTD 中，hr 元素的所有呈现属性均不被支持。
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | centerleftright | 不赞成使用。请使用样式取代它。规定 hr 元素的对齐方式。 |
| noshade | noshade | 不赞成使用。请使用样式取代它。规定 hr 元素的颜色呈现为纯色。 |
| size | pixels | 不赞成使用。请使用样式取代它。规定 hr 元素的高度（厚度）。 |
| width | pixels% | 不赞成使用。请使用样式取代它。规定 hr 元素的宽度。 |
html常用文本标签
