Table of Contents
1.复习内容
2.灵感代办
- Emmet的使用
- Emmet的使用
https://www.jianshu.com/p/7fa1aa322cad
https://www.cnblogs.com/summit7ca/p/6944215.html
https://github.com/wagnlinzh/wagnlinzh.github.io/wiki/Emmet使用手册
3.学习内容
标签
分两类标签：
双标签<html> </html> ，
和单标签 <br>,可以手动添加闭合 <br / >
- 注释标签格式: < !-- 注释 -- >
- html不区分大小写
标签属性
可以由多个属性，由属性名和属性值组成
标签嵌套
- 嵌套结构中，外层元素称为父元素，内层元素称为子元素；
- 多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素
- 平级结构互为兄弟元素 ## html文档
- 两部分：头 （ head） 和 主体（ body ）
- < !doctype html> 用来声明文档 ## html文档头部
- 就是浏览器的标签卡（图标，标题）
- 设置网页资源文件，放在头部引入
- < head></head> ## meta标签
- 放在head标签中的信息
- 可以设置附加信息，编码，关键字，描述，开发信息
常用标签
1. 标题标签
- H1-H6标签
2. 段落标签
- p
3. 普通文本标签
- span，b，strong，label，i，u，em斜体
4.格式标签
- br,hr
5.字符实体
- 使用 < 在页面中呈现 "<"
- 使用 & gt; 在页面中呈现 ">"
- 使用 & nbsp; 在页面中呈现一个空格
- 使用 & copy; 在页面中呈现版权符号"©"
- 使用 & yen; 在页面中呈现人民币符号"￥"
6.容器标签
- div,span
<tbody > 标签 渲染在浏览器窗口中
- 网页主题：所有想要在浏览器展示的应该都写在body中 ## < body > 常用标签 ### 链接
- 两个属性值：target是打开方式，href是打开地址
-
特殊取值
超链接，锚点，电话邮箱，协议限定符
< a href="" > < /a >
刷新网页
< a href="#" > < /a >
可以跳转到html中name属性的位置，
< a href="javascript:void(0);" > < /a > 协议限定符，可以在里面直接写javascript脚本
阻止默认跳转（浏览器的href会刷新地址，所以不阻止永远不能执行自定义）用来自定义点击事件
表格
列表标签
< ol> < ol> 有序标签
< ul> < ul> 无序标签
< li> < li> 标签项
表格分为三部分
- table(表格)
- tr(单元格) ：table row
- th(加粗，表头) / td(正常)
单元格合并clospan:跨行合并
- clospan:跨行合并
- rowspan:跨列合并
- 无单位的数值，表示包含自身，占用几个单元格的位置
表格行分组（动态添加表格）
- 可以将表格中的若干行，划分为一组，表头表尾表格主体
- 默认情况下，所有的行都会被添加到tbody（表格主体）中显示
表格的表头，表尾，表格主体
加载顺序不影响显示内容，为了优化，应该让表格主体最后加载
- thead划分表头
- tfoot是表尾
- tbody是表格内容
4.扩展延伸知识
chrome中审查元素出现的 == $0
代表当前正在查看的元素
如何在markdown中写实体符号
&的意思
&中的amp就是英文ampersand的缩写,该词的意思是&这个符号
& 是 HTML 中 & 的表示方法.即在html中用&表示&符号
在html中，空格，换行代表的是？
在html中代表分隔符 分割英文单词
HTML列表 ol 的属性
- type : a , 1, I
- start : 从多少开始排序
- reserve ：翻转排序
HTML列表 ul 的属性
- ul非常常用，div span和ul是最常见的三元素
- type:属性
HTML Emmet使用方法
- 后代：> 从大到小
- 兄弟：+ 平级标签
- 上级：^ 与标签的上一级同级（兄弟）
- 分组：() 用来区分顺序，优先级
- 乘法：* 元素重复生成多个
- 自增：$ 用来占位，自动生成元素+数字 （id1,id2,id3）指定数字用 $@200 就是从200开始
- ID和类：#id，.class 多个类嵌套可以直接写.class.class.class
- 自定义属性：p[title = “value”]
- 文本：a{“文本内容”}
- HTML 所有未知缩写都会转换为标签
- 隐式标签，比如#id，就是div id=“id”
5.知识内容个人梳理
6.今天都复习了之前的什么内容