HTML CSS基础
标签
标签分类 | 标签名 | 英文 | 英文含义 | 标签类型 |
---|---|---|---|---|
HTML页面结构 | < html> | HyperText Markup Language | 超文本标记语言 | |
< head> | head | 头部 | ||
< title> | title | 网页标题 | ||
< body> | body | 主体 | ||
常用标签 | < h1>~< h6> | head1~6 | 子标题 | 块标签 |
< p> | Paragraph | 段落 | 块标签 | |
< font> | fort | 字体 | ||
< a> | Anchor | 锚(超链接) | ||
< img> | image | 图像 | 空标签 | |
< br> | Barter Rabbet | 换行 | 空标签 | |
< hr> | Horizontal Rule | 水平线 | 空标签、块标签 | |
< marquee> | marquee | 选取框(文字滚动) | ||
格式化标签 | < b> | bold | 粗体 | |
< big> | big | 大号字 | ||
< em> | EMphasize | 着重 | ||
< i> | Italic | 斜体 | ||
< small> | small | 小号字 | ||
< strong> | strong | 加重语气 | ||
< sub> | SUBscript | 下标 | ||
< sup> | SUPerscript | 上标 | ||
< u> | Underline | 下划线 | ||
列表标签 | < ul> | Unorder List | 无序列表 | 块标签 |
< ol> | Order List | 有序列表 | 块标签 | |
< li> | LIst | 列表项目 | 块标签 | |
< dl> | Define List | 定义列表 | 块标签 | |
< dt> | Define Title | 定义标题 | 块标签 | |
< dd> | Define Describtion | 定义描述 | 块标签 | |
表格相关 | < table> | 表格 | 块标签 | |
< tr> | Table Row | 表行 | 块标签 | |
< td> | Table Data cell | 单元格 | ||
< th> | Table Head | 表头 | ||
< caption> | caption | 标题 | ||
< thead> | Table head | 表头部分 | ||
< tbody> | Table body | 主体部分 | ||
< tfoot> | Table foot | 底部业脚部分 | ||
表单相关 | < form> | form | 表单 | |
< input> | input | 表单元素 (输入框) | 空标签 | |
< select> | select | 选择(下拉框) | ||
< option> | option | 选项(下拉列表项) | ||
< textarea> | text area | 文本域 | ||
框架相关 | < frameset> | frame set | 框架集 | |
< frame> | frame | 框架 | 空标签 | |
< iframe> | iframe | 内嵌框架 | ||
容器 | < div> | division | 分隔(容器标签 (块)) | |
< span> | span | 跨度(容器标签 (行内)) |
属性
属性名 | 英文 | 英文含义 | 取值 | 应用场景 |
---|---|---|---|---|
src | SouRCe | 资源位置 | 资源的路径 | |
border | border | 边框 | 数字(像素) | |
size | size | 尺寸 | 数字(像素) | |
width | width | 宽度 | 数字(像素) | |
height | height | 高度 | 数字(像素) | |
bgcolor | BackGround COLOR | 背景颜色 | 颜色值:rea或#ffffff | |
background | background | 背景图片 | 图片路径 | |
list-style | list-style | 设置列表的所有属性 | 列表 | |
list-style-image | list-style-image | 将图像设置为列表项标记 | None url | 列表 |
list-style-type | list-style-type | 设置列表项标记的类型 | Disc(实心圆) Cirle(空心圆) Square(实心方块) | 列表 |
line-height | line-height | 行高(行间距) | 数字(像素) | 布局多行文本 |
text-align | text-align | 对齐方式 | Left、right、center | 各种元素对齐 |
letter-spacing | letter-spacing | 字符间距 | 数字(像素) | 加大字符间间隔 |
text-decoration | text-decoration | 文本修饰 | Underline、none | 加下划线、中划线等 |
margin-top (right、bottom、left) | 外边距 | 数字(像素) | ||
padding-top (right、bottom、left) | 内边距 | 数字(像素) | ||
display | display | 改变块级元素与行内元素的默认显示方式 | block(行变块) inline(块变行) none(该元素不显示在网页中) | |
position | position | 定位 | static(静态定位) relative(相对定位) absolute(绝对定位) fixed(固定定位) | 用于定位 |
float | float | 浮动 | None、left、right | |
clear | clear | 处理浮动塌陷 | left(清除左边浮动) right(清除右边浮动) both(清除两边浮动) none(不清除浮动) | |
type | type | 列表类型 | Disc(实心圆) Cirle(空心圆) Square(实心方块) | 用于列表 |
align | align | 对齐 | Left、right、center top、middle、bottom | 段落内容水平对齐文字与图片垂直对齐 |
type | type | 表单元素类型 | text(文本) checkbox(复选) radio(单选) password(密码) file(文件) submit(提交) reset(重置) button(按钮) image(图片按钮) hidden(隐藏) | 表单元素 |
method | method | 表单数据的提交方式 | get post | |
alt | alter | 改变、替换(图片不显示时提示信息) | 图片 | |
cellpadding | cell padding | 单元格内边距 | 数字 | 表格 |
cellspacing | cell spacing | 单元格之间距离 | 数字 | 表格 |
href | Hypertext REFerence | 超文本引用(跳转到文件位置) | ||
rel | RELationship | 关系(用于定义链接的文件和HTML文档之间的关系) | StyleSheet样式表 | link链接一个文件时 |
target | target | 目标(网页打开的位置) | _blank(新窗口打开) _self(自身窗口打开) _top(以整个浏览器作业作为窗口显示新页面) _parent(在父窗口中打开新的页面) | |
colspan | COLumn span | 单元格跨列 | 数字(跨的列数) | 表格 |
rowspan | row span | 单元格跨行 | 数字(跨的行数) | 表格 |
readonly | read only | 只读 | ||
value | value | 输入框的初始值 | ||
maxlength | max length | 最大长度 | ||
scrolldelay | scroll delay | 滚动延时 | < m arquee> | |
direction | direction | 方向(滚动方向) | < m arquee |
块级标签与行级标签
块级标签 | 行级标签 |
---|---|
< div>、< h1>~< h6>、< p>、< hr>、 < ul>、< li>、< ol>、< dl>、< dt>、 < dd>、< table> | < a>、< font>、< img>、< input>、< select>、< textarea>、< label>、< span> |
选择器
格式 | 选择器类别 | 备注 |
---|---|---|
标签名{} | 标签选择器 | |
.类名{} | 类选择器 | |
#ID标识名 | ID选择器 | |
p.red | 交集选择器 | 第一个必须是标签选择器,第二个必须是类选择器或ID选择器 |
P,.red,#header | 并集选择器 | |
#header ul li a | 后代选择器 | |
标签名:伪类名 | 特殊选择器 |
超链接伪类
伪类 | 英文 | 英文含义 | 示例 | 含义 | 应用场景 |
---|---|---|---|---|---|
a:link | link | 链接 | a:link{color:#999} | 未单击访问时的超链接样式 | 常用,超链接主样式 |
a:visited | visited | 访问 | a:visited{color:#999} | 单击访问后的超链接样式 | 区分是否已被访问 |
a:hover | hover | 悬停 | a:hover{color:#999} | 鼠标悬浮在超链接上的样式 | 常用,实现动态效果 |
a:active | active | 起作用的、有效的、积极的 | a:active{color:#999} | 鼠标单击未释放的超链接样式 | 少用,通常与link一致 |