重新听的html课,作为一个半路出家的人,还是收获很大的.
浏览器内核 — 渲染引擎 — 将代码渲染为网页
网页主要由三部分组成: 结构(structure) 表现(presentation) 行为(behavior)
结构 : html 表现 : css 行为 : js(dom + es)
㈠ 结构
< !doctype html> 文档类型声明
<hr> 横线标签
<br> 换行标签
<p> 段落标签
<img> 图像标签 单标签
<a> 超链接标签 href中javascript: 不跳转 # 跳转到当前界面 target 规定在何处打开超链接
锚点跳转 : 在同一个界面当中,可以设置标记,通过a跳转到该标记. <a href="#id标记名称">
<ul > 无序列表 type属性设置无序前显示
<ol> 有序列表
<li> 定义列表项目
<dl> 定义定义列表
<dt> 定义定义列表中的项目
<dd> 定义定义列表中项目描述
表单标签
<form> 最外层 action 为提交到的地址
<label> 定义input元素标注
<input> 输入控件 placeholder 输入提示
<textarea> 多行文本输入控件
<select> 下拉选择列表
<option> 定义选择列表中的选项
提交的方式
①直接定义<button>
②在表单中最常用的是<input type=“submit” value=“提交”>
<style> 定义样式 存储css 放在头部
节标签
<div>划分大的区块 默认独占一行
<span>划分小的区域 默认就是一小块
语义化标签 见名知意
header 头
section 一个章节、组
footer 尾部
article 主要内容、文章
nav 导航
媒介标签
video 视频 controls设置播放器
audio 音频 controls设置播放器
表单控件标签
calendar 日历
date 日期
time 时间
email 邮件
url & search
绘图标签
canvas
㈡ 表现/样式
www.faviconico.org
生成favicon.ico格式的图标文件
在网址后面加上/favicon.ico可以获取该网址的标签图标
在head中引入
优先使用webkit内核渲染界面 <meta name=“renderer” content=“webkit”/>
行内样式作用于一行
外部样式方便各个界面引用
优先级 : 行内最高 , 外部和页内看a顺序.
通用选择器 选择所有元素 *{ }
标签选择器 选择某类标签元素 标签名{ } 例如: div{ }
类选择器 选择某一类名(class)的元素 .类名{ } 例如: .center { }
id选择器 设置特定id元素 #id名{ } 例如: #big{ }
复合选择器 多个选择器复合使用 例如: div.test1{ } div中class为test1
的元素
群组选择器 同时选择多个选择器使用一个样式
选择器1,选择器2,选择器3 { }
后代选择器 没有逗号,用空格分隔
祖先元素 后代元素 后代元素{ }
直接后代选择器 父标签 > 子标签
兄弟选择器
查找后面一个兄弟元素 语法:兄弟元素 + 兄弟元素{ }
查找后面所有的兄弟元素 语法: 兄弟元素 ~ 兄弟元素{ }
属性选择器 选择带有特殊属性的标签 [属性名]、[属性名= ’ ']
例如: div[name][age]
伪类和伪元素 特定场景根据规则改变不同内容的样式
在css3中,伪类与伪元素在语法上有所区别.为元素为 : :开头,伪类以 : 开头.
伪类
名称
解释
css版本
:active
选择正在被激活的元素
1
:hover
选择被鼠标悬浮着元素
:link
选择未被访问的元素
:visited
选择已被访问的元素
:first-child
选择满足是其父元素的第一个子元素的元素
2
:lang
选择带有指定lang属性的元素
:focus
选择拥有键盘输入焦点的元素
:enable
选择每个已启动的元素
3
:disable
选择每个已禁止的元素
:checked
选择每个被选中的元素
:target
选择当前锚点元素
伪元素
::first-letter
选择指定元素的第一个单词
::first-line
选择指定元素的第一行
::after
在指定元素的内容后面插入内容
::before
在指定元素的内容前面插入内容
::selection
选择指定元素中被用户选中的内容
否定伪类 选择不是其他标签的某个标签
语法 :not(选择器){ }
块级标签
独占一行,宽度高度随时设置
e.g. : div、p、h1~h6、ul、li
行内标签(内联标签)
不会独占一行,多个行内标签可以同时显示在一行.宽度高度不能随时设置
宽度和高度取决于内容的尺寸
e.g. : span、a、label
行内-块级标签(内联-块级标签)
多个行内-块级标签可以显示在同一行,可以随时设置高度宽度
e.g. : input、button
none : 隐藏标签
block : 让标签变为块级标签
inline : 让标签变为行内标签
inline-block : 让标签变为行内-块级标签( 内联-块级标签 )
选择器的针对性越强,它的优先级别就越高
选择器的权值
* : 0
标签 : 1
类 : 10
伪类/伪元素 : 10
id : 100
important : 1000
原则 : 选择器的权值加到一起,大的有限,如果权值相同,后定义的优先
优先级排序
important > 内联 > id > 类 > 伪类/伪元素|属性 > * > 继承
!important大于一切
标准盒子模型
水平居中
① 行内标签 行内-块级标签
text-align:center (设置父级)
② 块级标签
margin : 0 auto (设置自己 上下 左右)
垂直居中
① line-height == height(设置父级 在高度内垂直居中)
② margin == height/2
③ 子绝父相 通过布局设置
默认情况下,所有的网页标签都在标准流布局中—从上到下,从左到右
float属性
所谓浮动指的是使元素脱离原来的文本流,在父元素中浮动起来
可选值:
①left : 脱离标准流,浮动在父标签的最左边
②right : 脱离标准流,浮动在父标签的最右边
③none : 不浮动
块级元素和行内元素可以浮动
当一个行内元素浮动以后将自动变为一个块级元素
当一个块级元素浮动以后,宽度会默认被内容撑开,所以当浮动一个块级元素时我们会为其指定一个宽度.
position属性和left、right、top、bottom属性
可继承属性
父标签的属性值会传递给子标签
一般是文字控制属性
不可继承属性
父标签的属性值不会传递给子标签
一般是区块控制属性
visibility 是否可见
区分 : display?
区别 : visibility如果设置隐藏会保留空间 display完全隐藏
cursor 光标显示类型
color 文字颜色
font 字体
font-family 字体 后面可以加很多字体,逗号区分,依次使用
font-size 字体大小
font-weight 文本粗细
font-style 文本风格 斜体(italic)等
text-decoration 文本修饰
underline 下划线
overline 上划线
line-through 穿过文本线
blink 闪烁文本
none 标准文本
text-indent 设置首行缩进
改样式需要指定一个长度,并且只对第一行生效
text-align 对齐
left : 左对齐
right : 右对齐
justify : 两边对齐
center : 中间对齐
text-transform 将元素中的字母全部变为大小写
大写 : text-transform:uppercase
小写 : text-transform:lowercase
首字母大写 : text-transform:capitalize
正常 : text-transform:none
list-style 设置所有列表属性 符合属性
circle ●
square ◼
upper-roman Ⅰ
lower-alpha a
overflow 溢出显示设置
visible 默认值
scroll 添加滚动条
auto 根据需要添加滚动条
hidden 隐藏超出盒子内容
line-height 设置行高,行高越大间距越大
行间距 = line-height - font-size
box-sizing
content-box 更改边距的时候会放大盒子,往外扩
border-box 更改边距的时候盒子整体大小不变,往里缩