HTML // CSS
2019-11-26 本文已影响0人
錦魚
HTML常用标签
<!DOCTYPE html> // h5声明标签
<html></html> // 总盒子
<head></head> // 头信息
<title></title> // 网页标题（爬虫抓取点）
<meta charset="utf-8"> // 设置（字符集...）
<style></style> // CSS内联样式
<link> // 外联文件
<!-- --> // 注释
<body></body> // 体信息
<hr> // 横线占行
<br> // 空占行
<h1></h1> // 1~6级标题
<font></font> // 文字标签
<p></p> // 段落标签
<b> // 标签后加粗
<i> // 标签后倾斜
<img> // 图片
<i></i> // 小图标
<em></em> // 倾斜 // 有语义--语气
<strong></strong> // 加粗 // 有语义--内容
<small></small> // 小字体
特殊符号 // 字符实体
<iframe></iframe> // 内联框架
<a></a> // 超链接
文本标签
<center></center> // 居中标签
<sup></sup> // 上标
<sub></sub> // 下标
<del></del> // 删除线
<pre></pre> // 代码
<code></code> // 包裹代码
...
常用
块元素 --> 布局
<div></div> // 布局盒子
<ol></ol> // 有序列表
<ul></ul> // 无序列表
<li></li> // 列表项
<dl></dl> // 自定义列表
<dt></dt> // 列表 key
<dd></dd> // 列表 value
内联元素 --> 样式
<span></span> // 行内元素
<input> // 输入信息
CSS 样式与选择器
xxx {
color:red; // 字体颜色
font-size: 30px/em/rem // 字体大小
width:100px; // 盒子宽
height:100px; // 盒子高
background-color:red; // 背景颜色
}
/* 元素选择器 */
p {}
/* id选择器 */
#id {}
/* class选择器 */
.cls {}
/* 通配选择器 */
* {}
/* 并集选择器 */
p,#id,.cls {}
/* 复合选择器（交集选择器） */
p.cls {}
/* 子元素选择器（直接） */
div > span {}
/* 后代元素选择器（间接） */
div .cls {}
/* 伪类选择器 */
a:link {} 正常链接
a:visited {} 访问过链接
ie6以上可用以下属性至非a
a:hover {} 悬停
a:active {} 点击
a:focus {} 获取焦点
a:before {} 指定元素前
a:after {} 指定元素后
a::selection {} 选中的元素(复制文本时)
a::-moz-selection {} 兼容火狐写法
p:first-letter {} 首字母
p:first-line {} 首行
p:before {} 之前添加字母
/* 属性选择器 */
p[title="hello"] {} 属性为hello
p[title^="abc"] {} 选择开头
p[title$="abc"] {} 选择结尾
p[title*="abc"] {} 选择结尾
/* 其他子元素选择器 */
* body>p:first-child {} 第一个孩子
p:last-child {} 最后一个孩子
p:nth-child(odd/even/3n+0) {} 指定位置的子元素(奇偶/公式)
p:first-of-type {}
p:last-of-type {}
p:nth-of-type {}
p:not(.hello) {} 非选中其他
/* 兄弟元素选择器 */
span + p {} 兄弟后第一个p
span ~ p {} 兄弟后所有的p元素
/* 内联样式 优先级1000 */
/* id 优先级100 */
/* 类 优先级10 */
/* 元素 优先级1 */
/* 通配* 优先级0 */
/* 继承的样式 无 */
快捷语法
h1*3 = <h1></h1><h1></h1><h1></h1>
div>span = <div><span></span></div>
