文章目录
HTML
HTML：HyperText Markup Language 超文本标记语言
HyperText：HTML允许通过建立链接，使访问者简洁地页面跳转
Markup：HTML允许对文本进行注释，使用标签进行标记
文本
结构化标记：用来描述标题和段落的元素
语义化标记：表达特定含义的标记，目的是更加准确描述网页中的内容，而不是改变文本外观的方式
| 标签 | 作用 | 标签 | 作用 |
|---|---|---|---|
<sup> | 标记上标 | <sub> | 标记下标 |
<br/> | 换行 | <hr/> | 水平线 |
<strong> | 十分重要，阅读时可能会加重语气 | <em> | 强调，浏览器中显示为斜体 |
<blockquote> | 较长引用，表现为缩进 用 cite = 'url' 指明来源 | <q> | 较短引用，表现为加 “ ” 用 cite = 'url' 指明来源 |
<abbr> | 单词缩写，使用 title = 单词完整形式 | <cite> | 表明引用来源，显示为斜体 |
<dfn> | 表示定义，表现为斜体 | <address> | 包含页面设计者的联系详情，表现为斜体 |
<ins> | 显示已经插入到文档中的内容，显示为下划线 | <del> | 显示已经从文档中删除的文本，显示为删除线 |
<s> | 表示不准确或不相关却不应当予以删除的内容，表现为删除线 |
列表
| 标签 | 作用 | 标签 | 作用 |
|---|---|---|---|
<ol> | 创建有序列表 | <li> | 有序列表中的每一项 |
<ul> | 创建无序列表 | <li> | 无序列表中的每一项 |
<dl> | 创建定义列表 | <dt> | 包含被定义的术语 |
<dd> | 包含定义 |
链接
| 标签 | 作用 |
|---|---|
<a> | href = 'url' 指向其他网站的链接：绝对URL 指向同意网站中其他页面的链接：相对URL href = 'mailto:email地址' 建立email链接target = '_blank' 在新窗口打开链接href = '#id' 链接到当前页面指定id模块位置href = 'url#id' 链接到其他页面指定id模块位置 |
绝对URL：URL（Uniform Resource Locator），绝对URL以网站的域名开头，域名后面可以指定具体页面的路径
相对URL：
1. 相同文件夹：只需要使用文件名
1. 子文件夹：本文件名/子文件名
1. 父文件夹：../父文件名
图像
| 标签 | 作用 |
|---|---|
<img> | src = 'imgURL' alt = 'introduction' title = 'appendix' height = xx width = xx |
<figure> | 用来包含图像以及对图像的说明，并且这两部分是相关联的<figure><img><br><figcaption></figcaption><figure> |
<figcaption> | 给图像添加说明 |
块级元素：另起一行显示
内联元素：位于块级元素中，并且不会另起一行显示
表格
| 标签 | 作用 | 标签 | 作用 |
|---|---|---|---|
<table> | 创建表格 | <tr> | 每行的开始 |
<td> | 每个单元格 | <th> | 表示列/行的标题 scope = "row/col"表示此元素为列标题或者行标题 |
colsapn = | 单元格要跨越的列数 | rowspan = | 单元格要跨越的行数 |
<thead> | 表格标题 | <tbody> | 表格主体 |
<tfoot> | 表格脚注 |
表单
| 标签 | 作用 | 标签 | 作用 |
|---|---|---|---|
<form> | action = 'url' 用来指定一个接收表单数据的页面urlmethod = 'get/post' get适用于短表单、查询；post适用于长表单、文件、含敏感信息、增加、删除数据id = 用于唯一标识表单 | <input> | 用于创建不同的表单控件；每个表单控件都需要一个 name 属性使用 maxlength 限制输入字符数量palceholder 提示显示 |
<input type = ''/> | radio 单选按钮，checked checkbox 复选按钮file 文件上传submit 提交按钮image 图像按钮hidden 隐藏控件date 日期email 邮件url URLsearch 搜索输入控件 | <select> | 下拉列表框<option> 指定可选选项，使用value 指定选项值mutiple = 'mutiple ' 多选框 |
<button> | 按钮 | <label> | 标签；for = "" 用于声明标签空间标注的是哪个表单控件 |
<fieldset> | 将表单控件分为一组 | <legend> | 跟在 <fieldset> 后并且包含一个标题 |
其他
| 名称 | 解释 | ||
|---|---|---|---|
id | id用于对元素做唯一标识；由于可用于任何元素，id特性被称为全局特性 | class | 可以对多个元素应用同一模式，与CSS一起使用可以更改外观，可以指定属于多个不同的类 |
| 块级元素 | 另起一行 | 内联元素 | 同一行 |
<div> | 将一组元素集中到一个块级元素内 | <span> | 在没有其他何时元素的情况下包含一段文本并将其与其他文本区分开来，包含若干个内联元素 |
<iframe> | 在网页里分割的小窗口scrolling 滚动；seamless 不滚动 | <meta> | 位于 <head> 中；name = "" description：有关页面的描述信息； keywords：包含一组以逗号分隔的关键词列表 robots：指定搜索引擎是否可以将这个页面加入到搜索结果中 http-equiv = ""author：网页设计者 pragma：防止浏览器对页面的缓存 expires：指定页面的过期时间 |
Flash、视频和音频
| 标签 | 作用 |
|---|---|
<video> | src= "url" 指定视频路径poster = 在视频加载时或播放之前显示的图像controls 浏览器需要提供默认的播放控件 autoplay 自动播放 loop 循环preload = "none/auto/metadata" 浏览器在页面加载时需要做什么：不必加载/在页面加载时载入/只需手机少量视频信息 |
<source> | 在 <video> 中使用 <source> 元素，用于指定不同格式的视频src = "url" type 指定视频格式 codecs 解编码器 <source src="" type = ' video/mp4 ; codecs="" ' |
<audio> | 类似 <video> |
CSS
原理：CSS允许创建规则，来控制每个“盒子（包括盒子中的内容）” 的呈现方式
规则：一个选择器+一个声明
选择器：表明要应用规则的元素
声明：表明如何显示选择器指明的元素。分为两个部分：属性+值
属性：表明想要改变元素的哪些方面
值：指定想要在所选属性上应用的设置
使用：
使用外部CSS <link href = "" type = "text/css" rel = "stylesheet">
使用内部CSS <style type = "text/css" > ... </style>
CSS选择器
| 选择器 | 含义 | 示例 |
|---|---|---|
| 通用选择器 | 应用于文档中所有元素 | * {} |
| 类型选择器 | 匹配元素名称与选择器相同的元素 | h1,h2,h3 {} |
| 类选择器 | 匹配这样的元素：元素的class特性的值与此选择器点符号后面的部分相同 | .note{} 应用于所有class特性值为note的元素p.note{} 只应用于class特性值为note的<p>元素 |
| ID选择器 | 匹配元素ID与此选择器＃后面的部分相同 | # introduction{} |
| 子元素选择器 | 匹配指定元素的直接子元素 | li > a{} |
| 后代选择器 | 匹配指定元素的后代元素（不仅是子元素） | p a {} 应用于所有位于<p>元素中的<a>元素 |
| 相邻兄弟选择器 | 匹配一个元素的相邻的兄弟元素 | h1 + p{} 应用于<h1>元素后的第一个<p>元素 |
| 普通兄弟选择器 | 匹配一个元素的兄弟元素，无论是否相邻 | h1 ~ p{} 应用于<h1>元素的所有兄弟<p>元素 |
规则级联
| 规则 | 含义 |
|---|---|
| 就近原则 | 如果两个选择器完全相同，后出现的选择器优先级较高 |
| 具体性原则 | 如果一个选择器比其他选择器更加具体，那么具体的选择器优先于一般的选择器 |
| 重要性 | 在任意属性值的后面添加 !important 强调这条规则比应用于同一元素的其他规则重要 |
| 继承 | 部分属性可以被子元素继承，部分不会 通过将属性值设置为 inherit 来强制大多数元素从它的父元素中继承属性值 |
颜色
| 属性 | 含义 | 属性 | 含义 |
|---|---|---|---|
color | 前景色，指定元素中文本的颜色 | background-color | 背景色，设置“盒子”的背景色 |
opacity | 指定元素及其子元素的透明度 | rgba | rgb+a（alpha，透明度） |
hsl | 色调（0°-360°）、饱和度（百分数）、明度（0°-黑色；50°-标准色；100%-白色） | hsla | hsl+a（alpha，透明度） |
文本
| 属性 | 含义 | 属性 | 含义 |
|---|---|---|---|
| 字体术语 | 衬线字体（serif）：笔画末端有额外装饰，常应用于长篇文本，Georgia、Times、Times New Roman 无衬线字体（sans-serif）：线条笔直，用于小文本，Arial、Verdana、Helvetica 等宽字体（monospace）：宽度相同，通常用于显示代码，Courier、Couriers 草书字体（cursive）：手写风格，Comic Sans MS、Monotype Corsiva 虚幻字体（fantasy）：适用于标题，Impact、Haettenschweiler | 字体术语 | 粗细：Light、Medium、Bold、Black 样式：Normal、Italic、Oblique 伸缩：Condensed（压缩）、Regular、Extended（伸展） |
font-family | 希望使用的字体名称，一般不要使用三种以上字体 | font-size | 字体大小； 像素：px；百分数：按照浏览器默认文本大小设置百分比；em值： |
@font-face | 选用更多字体，@font-face指定字体的下载地址src 路径；format 字体格式 | 字体格式 | eot、woff、ttf/otf、svg |
font-weight | normal/bold | font-style | normal/italic/oblique |
text-transform | uppercase - 大写；lowercase - 小写；capitalize - 首字母大写 | text-decoration | none/underline/overline/blinkblink 闪烁 |
line-hright | 行间距，最好以 | letter-spacingword-spacing | 字母间距和单词间距，应该以em给出 |
text-align | left/right/center/justify | vertical-align | 更多应用于内联元素（左右两个元素的位置关系），baseline/sub/super/top/text-top/middle/bottom/text-bottom |
text-indent | 首行缩进，可以使用负值 | text-shadow | 创建投影，三个长度值+一种颜色 |
:first-letter :first-line | 设置首字母/首行文本；从技术角度按，这两个并不属于元素，被称为“伪元素”，在选择器末尾指定伪元素进行设置 | :link | :link为尚未访问过的链接设置样式 |
:hover | 悬停生效 | :active | 操作生效 |
:focus | 拥有焦点时生效 | :visited | :visited为已经单击过的链接设置样式 |
特性选择器
| 选择器 | 含义 | 示例 |
|---|---|---|
| 简单选择器 | [ ] 匹配一种特定的特性（与特性值无关） | p[class] |
| 精确选择器 | [ = ] | p[class=“dog”] |
| 部分选择器 | [ ~= ] 该特性值出现在以空格隔开的单词列表中 | p[class~=“dog”] |
| 开头选择器 | [ ^= ] 该特性值以某个特定的字符串作为开头 | p[attr ^ “d”] |
| 包含选择器 | [ *= ] 该特性值包含一个特定的子字符串 | p[attr * “do”] |
| 结尾选择器 | [ $= ] 该特性值以某个特定的字符串作为结尾 | p[attr $ “g”] |
盒子
| 属性 | 含义 | 属性 | 含义 |
|---|---|---|---|
overflow | 内容溢出 hidden/scoll | border | 边框 |
margin | 外边距，设置外边距的宽度在两个相邻盒子的边框之间创建空隙 | padding | 内边距，增加内边距可以提供内容可读性 |
border-style | solid/dotted/dashed/double/groove/ridge/inset/outset/hidden/none | 内容居中 | 为盒子设置宽度后，左右外边距设置为auto |
display | 内联元素与块级元素之间的转换 inline 内联元素；block 块级元素；inline-block 使一个块级元素像内联元素那样浮动并保持其他块级元素特征；none隐藏 | visibility | hidden/visible |
border-img | 1.图片url；2.切割图片的位置；3.如何处理直边（stretch/repeat/round） | border-radius | 圆角/椭圆 |
列表、表格、表单
| 属性 | 含义 |
|---|---|
list-style-type | 控制项目符号，该属性可应用到 <ol><ul><li>元素的规则中使用 |
list-style-image | 将一个图像作为项目符号使用 |
list-style-position | 表明标记显示的位置，是包含在主题内容的盒子的内部/外部（换行时是否缩进） |
padding | 用于设置每个单元格边框与其内容之间的空隙 |
text-transform | 将表格标题中的内容转换为大写 |
:hover | 悬停时高亮 |
empty-cells | 空单元格的边框：show/hidden/inherit |
border-spacing border-collapse | 单元格之间的空隙：collapse 将单元格相邻的边框合并为一个单独的边框，此时 border-spacing属性会被忽略并且单元格会被挤压在一起separate 表示将相邻边框分离，此时 border-spacing属性生效 |
:focus | 聚焦时的变化 |
cursor | 显示给用户的光标的类型 |
布局
| 属性 | 含义 |
|---|---|
position:static | 普通流，每个块级元素都在下一个元素的上方 |
position:relative | 相对定位，以其在普通流中所处的位置为起点进行移动 |
position:absolute | 绝对定位，脱离普通流，不再影响页面中其他元素的位置，盒子的位移属性（top/bottom/left/right）用于指定元素相对于它的包含元素应该显示在什么位置 |
position:fixed | 固定定位，是绝对定位的一种类型。元素相对于浏览器窗口进行定位，当用户滚动页面时，该元素位置保持不变 |
z-index | 重叠元素。HTML代码中，后出现的元素位于页面中先出现元素的上层，z-index的值是一个数字，数值越大，元素的层次就越靠前 |
float | 浮动元素，将普通流中的元素在它的包含元素内尽可能地向左/右排列，位于包含元素中的其他内容会在浮动元素的周围流动。要设置 width、height当元素浮动时，相应盒子的高度就会对后面元素的位置产生影响 |
clear | 清除浮动，表明一个盒子的左侧/右侧不允许出现浮动元素（在同一个包含元素内） |
| 固定宽度布局 | 不会因为用户当送/缩小浏览器窗户而发送变化，通常以像素作为衡量单位 |
| 流体布局 | 随着用户对浏览器窗口的扩大或缩小。这种设计通常使用百分数 |
合理的布局：
960像素宽的12列网格：960 = 12*（60+20）
每个列的宽度都是60像素，每列的外边距都设置为10px（一左一右共20px）
多个样式表：
① @import
② link
图像
| 属性 | 含义 |
|---|---|
backgrounf-repert、background-attachment | 重复图像 |
HTML5 布局
| 标签 | 用途 |
|---|---|
<header><footer> | 页眉、页脚； 可用于网站中出现在每个页面的顶部的主页眉和底部的主页脚； 页面中单独的 <article><section>中的页眉/页脚 |
<nav> | 导航 |
<article> | 文章，页面中任意部分的一个容器 |
<aside> | 附属信息； 当 <aside>属性出现在 <article>元素内时，应该包含与当前文章相关的信息当 <aside>属性出现在 <article>元素之外时，应该包含与整个页面相关的内容 |
<section> | 用于将相关的enrichment集中到一块，而每个部分通常都带有一个标题 |
<hgroup> | 组合标题组 |
<figure><figcaption> | 可以用来包含一篇文章正文中引用的任何内容，如：图像、视频、图形、图标、代码示例、文章主题的辅助文本 |
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
