列表
-
无序列表 ul li
-
有序列表 ol li
-
定义列表 dl dt dd
-
相关css属性 list-style list-style-type list-style-image list-style-position
表格
-
标签 table caption thead tbody tfoot tr th td
-
colspan rowspan td/th 的属性
-
CSS属性： table-layout、border-collapse 、border-sapcing、 caption-side、 empty-cells
表单
-
input type(text、password、radio、checkbox、file、url、email、tel、search、range、color、date、time、week、month、datetime-local、number、button、submit、reset)
-
select option
-
textarea
-
button
-
属性：placeholder(H5)、disable、enable、readonly、 required、pattern、 autocomplete=“on/off” title autofocus
视频
-
video src autoplay loop poster preload controls
-
audio src
-
source src
页面布局
有些CSS属性，后代元素会集成祖先元素的设置。font类型、color、文本属性
有些CSS属性，不会继承祖先元素。布局相关、border、背景
布局相关的标签 HTML
-
<div></div>定义文档中的分区或节 -
<span></span>这是一个行内元素，没有任何意义 -
<header></header>HTML5新增 定义 section 或 page 的页眉 -
<footer></footer>HTML5新增 定义 section 或 page 的页脚 -
<main></main>HTML5新增 标签规定文档的主要内容。<main>元素中的内容对于文档来说应当是唯一的。它不应包含在 文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。IE都不识别 -
<nav></nav>HTML5新增 表示链接导航部分 如果文档中有“前后”按钮，则应该把它放到元素中 -
<section></section>HTML5新增 定义文档中的节 通常不推荐那些没有标题的内容使用section -
<article></article>HTML5新增 定义文章 论坛帖子 报纸文章 博客条目 用户评论 -
<aside></aside>HTML5新增 相关内容，相关辅助信息，如侧边栏
1 盒子模型
css 设置 html标签
1.1 定义
-
任意一个元素都可以当做盒子模型
-
盒子的大小 内容宽高(width/height) + 边距(padding)+边框(border)
-
盒子有外边距，影响盒子的位置 控制与其他盒子的间隔
1.2 块状元素和内联元素
块状（块级）
-
能够独占一行
-
默认宽度是父元素的宽，高度是自动（被内容撑开） 优先遵循自己
内联（行内）
-
不能独占一行
-
默认宽度是自动(被内容撑开)，高度也是自动
-
大部分内联元素设置宽高无效，设置内边距有效但是影响其他元素 不遵循父元素的宽度
-
margin可以设置左右，不能设置 上下的
-
CSS的文本属性 会对内联元素生效
1.3 盒子模型和盒子模型之间的关系
document树
父元素 子元素 后代元素 祖先元素 兄弟元素
标准文档流
-
块状元素 独占一行
-
内联共享一行
盒子在文档模型的位置
-
给盒子设置边距， 前面有兄弟元素，距离兄弟元素的距离。 没有距离父元素的内容的距离
-
垂直方向的margin会塌陷。 上（margin-bottom）下（margin-top）两个元素之间的距离，取最大。 水平方向没有这个问题
-
父子元素，给子元素设置垂直方向的margin，同样会产生塌陷。 解决： 给父元素设置边框 或者
overflow:hidden -
margin可以设置为负值
盒子中的文本属性 对块状和内联的影响
-
对块状元素无效
-
对内联元素有效
CSS的小特点
子元素继承父元素的字体设置
1.4 布局相关属性 CSS
display
-
block 设置块
-
inline 设置为内联
-
inline-block 兼具两者 有些html元素，默认就是inline-block （img, input, textarea .td,th）
-
none 隐藏 无位置
布局相关
-
visibility: visible/hidden 元素不可见 但是有位置
-
overflow: hidden 超过的就没了/auto 水平和垂直都有滚动条/scroll 和auto一样/visible 超出盒子范围显示
-
overflow-x
-
overflow-y
尺寸
-
width / max-width 对块状有用向下自适应 / min-width 对inline-block有用
-
height / max-height / min-height
内边距
外边距
-
margin 4个值 3 2 1
-
margin-left
-
margin-top
-
margin-bottom
-
margin-right
作业
-
总结学过的元素， 块 内联 （inline-block的特征）
-
总结所有的HTML元素， 所有的CSS属性。