HTML5 CSS 基础知识

HTML

HTML常见元素

• header (一些资源和信息描述)
  • meta
  • title
  • style
  • link
  • script
  • base

• body
  • div/section/article/aside/header/footer
  • p
  • span/em/strong
  • table/thead/tbody/tr/td
  • ul/ol/li/dl/dt/dd
  • a
  • form/input/select/textarea/button

元素的常见使用

视口：宽度为设备宽度，初始化缩放比例1，最大缩放比例1，用户不可缩放

1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

指定基础路径

1

<base href="/">

HTML标签常见属性

a

• href 地址
• target 打开位置 self / blank

img

• src 图片地址
• alt 当src不可用时的替换资源

table td

• colspan 占据几行 (近似效果-合并单元格)
• rowspan 占据几列

form

• target 表单提交的地址
• method 表单提交的方法 GET POST
• enctype 编码方式 url-encode form-data

input

• type
• value

button

• type

select | option

• value

label 与表单相关联

• for

HTML5新增内容

新区块标签

• section 区块
• article 区块
• nav 导航
• aside 不重要内容(广告)

HTML元素分类

按默认元素分

• 块级 block会占整行
  • div section article aside
• 行内 inline
  • span em strong
• inline-block 对内block，对外inline
  • input
• 按内容分
  • content model

HTML元素嵌套关系

• 块级元素可以包含行内元素
• 块级元素不一定能包含块级元素
• 行内元素一般不能包含块级元素
  • a可以包含块级元素

常见问题

doctype的作用

• 让浏览器以标准模式渲染
• 让浏览器知道元素的合法性

HTML XHTML HTML5 的关系

• HTML属于SGML
• XHTML属于XML，是HTML进行XML严格化的结果
• HTML5不属于SGML，XML，比XHTML宽松

HTML5的变化

• 新的语义化元素
• 表单增强
• 新的API(离线，音视频，图形，实时通讯，本地存储，设备能力)
• 分类和嵌套变更

em和i的区别

• em是语义化的标签，表示强调
• i是纯样式的标签，表示斜体
• HTML5中i不推荐使用，一般使用做图标

语义化的意义是什么

• 开发者容易理解
• 机器容易理解结构(搜索、读屏软件)
• 有助于SEO
• semantic microdata

哪些元素可以自闭合

• 表单元素 input
• 图片 img
• br hr
• meta link

HTML和DOM的关系

• HTML是死的
• DOM由HTML解析而来，是活的
• JS可以维护DOM

property和attribute的区别

• attribute是死的，写在html元素中的
• property是活的

form的作用有哪些

• 直接提交表单
• 使用submit/reset按钮
• 便于浏览器保存表单
• 第三方库可以整体提取值
• 第三方库可以进行表单验证

CSS基础

CSS全称：Cascading Style Sheet 层叠样式表

基本规则

选择器

• 用于匹配HTML元素
• 有不同的匹配规则
• 多个选择器可以叠加

Tips：浏览器对css的解析方式：从右往左进行解析，提高解析速度与效率。

1
2
3
4

选择器{
    属性: 值;
    属性: 值;
}

选择器分类

• 元素选择器 a{}
• 伪元素选择器 ::before{}
• 类选择器 .link{}
• 属性选择器 [type = radio]{}
• 伪类选择器 :hover{}
• ID选择器 #id{}
• 组合选择器 [type = checkbox] + label{}
• 否定选择器 :not(.link){}
• 通用选择器 *{}

选择器权重

选择器本身的权重

• ID选择器 #id{} +100
• 类 属性 伪类 +10
• 元素 伪元素 +1
• 其他选择器 +0

特殊权重规则

• !important 优先级最高
• 元素属性 优先级高 < style >
• 相同权重 后写的生效

非布局样式

• 字体，自重，颜色，大小，行高
• 背景，边框
• 滚动，换行
• 粗体，斜体，下划线
• 其他

字体

字体族

• 衬线字体 serif
• 非衬线字体 sans-serif
• 等宽字体 monospace
• 手写体 cursive
• 花体 fantasy

多字体fallback

• 微软雅黑 > 黑体 > 非衬线字体

iconfont 字体图标

• 原理：自定义字体，利用伪元素

行高

行高的调整

• vertical-align

图片3px缝隙问题：
inline元素，与字体大小相关，base-line和底线对其方式不同。
解决方式：

• vertical-align: bottom
• display: block

背景

背景颜色

• background: red
• rgb
• hsl(0,100,100%)
• rgba,hsla (a为透明度)
• url(’./a,jpg’) 背景图

渐变色背景

• "-webkit-linear-gradient(left,red,green)" 从左到右，红色渐变为绿色
• "linear-gradient(to right,red,green)" 从左到右，红色渐变为绿色
• "linear-gradient(45deg,red 0,green 10%, yellow 50%, blue 20%)" 45度角渐变

背景图片和属性(雪碧图) 用于性能优化

• background-repeat: no-repeat/repeat-x/repeat-y; 不平铺/x方向平铺/y方向平铺(默认平铺)
• background-position: center top; 指定位置
• background-position: 20px 30px; 指定位置
• background-size: 100px 50px; //指定背景图大小

base64和性能优化:
一般用于小图标小图片，因为base64转换也需要消耗性能

边框

边框的属性：线形 大小 颜色

• border 1px solid red //1px边框 实线 红色
• dotted //点状
• dashed //虚线

边框背景图

• border: 30px solid transparent;
• border-image: url(./a.png) 30px repeat/round;

边框衔接(三角形)

• border-bottom: 30px solid red;
• border-right: 30px solid transparent;

滚动 overflow

滚动行为和滚动条

• visible 超出容器部分显示，滚动条隐藏
• hidden 超出容器部分隐藏，滚动条隐藏
• scroll 超出容器部分允许用户滚动，滚动条一直显示
• auto 超出容器部分允许用户滚动，滚动条自动显示

文字折行

• overflow-wrap(word-wrap)通用换行控制
  • 是否保留单词
• word-break 针对多字节文字
  • 中文句子也是/不是单词
• white-space 空白处是否断行

装饰性属性及其他

字重（粗体）font-weight

• normal
• bold
• bolder
• lighter
• 100

斜体 font-style:itatic
下划线 text-decoration
指针 cursor
补充：美化checkbox

• label[for]和id
• 隐藏原生input
• :checked + label

CSS布局

• table 表格布局

1
2
3

.table{
	display: table;
}

• float浮动 + margin
• inline-block 布局
• flexbox布局

position

• static 静态默认
• relative 偏移，不会改变原始占有空间
  • left
  • top
• absolute 脱离了整个文档流,不会对其他元素造成影响,相对于body布局
  • left
  • top
• fixed 脱离了整个文档流,不会对其他元素造成影响,相对于屏幕
  • left
  • top