表格table
- 相关标签: table表格, tr表示行,td表示列,th表头,caption表格标题
- 相关属性: border 设置边框 , rowspan跨行 colspan跨列
表单form
- 作用:获取用户输入的内容,并提交给服务器
- 相关文本框:
input type = text、password，radio，checkbox，date，file，select[option]，submit，reset，button
button type = submit，reset，button
分区标签
- 分区标签可以理解为是一个容器, 将多个有相关性的标签进行统一管理
- 常见的分区标签:
- div: 块级分区元素, 独占一行 , 从上往下排列
- span: 行内分区元素, 共占一行 , 从左往右排列
- 页面如何分区?
根据页面具体的需求, 一般情况下至少分为三大区(头,体,脚) 每个大区里面又嵌套n个小的区域
- HTML5标准中新增的分区标签: 作用和div一样 , 提高代码的可读性
- header 头
- main 主体
- footer 脚
- section 区域
- nav 导航
-------------------------------------------------------------------------------------------------------
如何在html页面中添加CSS样式代码
- 三种引入方式:
- 内联样式: 在标签的style属性中添加样式代码, 不能复用
- 内部样式: 在head标签里面添加style标签, 在标签体内通过选择器添加样式代码, 只能在当前页面复用,不能多页面复用
- 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入. 可以实现多页面复用
CSS选择器
- 通过选择器找到需要添加样式的元素,找到后再添加样式
1. 标签名选择器: 匹配页面中所有同名标签
格式: 标签名{样式代码}
2. id选择器: 当需要选择页面中的某一个元素时使用
格式: #id{样式代码}
3. class选择器: 当需要选择页面中多个不相关的元素时,给元素添加相同的class值,然后通过class选择器选择
格式: .class{样式代码}
4. 分组选择器: 将多个选择器划分为一组
格式: div,#id,.class{样式代码}
5. 属性选择器: 通过元素的属性和值选择元素
格式: 标签名[属性名='值']{样式代码}
6. 任意元素选择器: 匹配页面中所有元素
格式:*{样式代码}
7. 子孙后代选择器: 通过元素之间的层级关系匹配元素
格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p(包括后代)
8. 子元素选择器: 通过元素之间的层级关系匹配元素
格式: body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有子元素p(不包括后代)
9. 伪类选择器: 匹配的是元素的状态,包括:未访问link/访问过visited/悬停hover/激活active
格式: a:link/visited/hover/active{样式代码}