Web前端

HTML页面结构:

 文档声明: 告诉浏览器使用HTML哪个版本的标准解析页面,此写法代表使用html5的标准解析页面
页面的跟标签,所有标签都写在此标签内部 
 头标签, 给浏览器看的内容 设置页面字符集Title 设置页面的标题

 体标签, 给用户看的内容

相关标签: table表格 tr table row表示行
td table data表示列 th table head表头(加粗并居中) caption表格标题
相关属性: border设置边框 colspan跨列 rowspan跨行

作用: 可以将多个有相关性的标签添加到一个分区标签里面, 对多个标签进行统一管理,可以将分区标签理解为一个容器
分区标签包括div和span
- div:块级分区标签, 独占一行
- span:行内分区标签, 共占一行
html5的标准中新增了一些分区标签作用和div一样,好处是提高了代码的可读性
- header 头标签
- footer脚标签
- main主体区域标签
- nav 导航标签

CSS

三种引入方式:
- 内联:在标签的style属性中添加样式代码, 弊端:不能复用
- 内部:在head标签里面添加style标签,标签体内写样式代码,通过选择器先找到元素对象, 然后再添加样式, 好处是可以复用, 但是只能在当前页面复用,不能多页面复用
- 外部:在单独的css样式文件中写样式代码, 在html页面中引入此文件即可, 这样的话是可以实现多页面复用的
工作中因为需要多页面复用所以外部样式会用的更多, 学习过程中内部样式演示方便所以更多使用内部样式

标签名选择器: 匹配页面中所有同名标签

格式: 标签名{样式代码}
id选择器: 当需要匹配页面中某一个元素的时候使用

格式: #id{样式代码}
类选择器: 将多个不相关的元素设置为同一个class值, 这样就将这多个元素划分成了同一类,然后通过类选择器进行选择

格式: .class{样式代码}
分组选择器: 将多个选择器划分为一组(可以理解为将多个选择器合并成一个选择器)

格式: 标签名,#id,.class{样式代码}
任意元素选择器: 匹配页面中所有元素,包括html和body

格式:*{样式代码}
子孙后代选择器: 通过元素和元素之间的关系匹配元素

格式:body div div p{样式代码} 匹配body里面的div里面的div里面的所有p包括后代
子元素选择器:通过元素和元素之间的关系匹配元素

格式:body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素不包含后代
伪类选择器: 匹配的是元素的状态,包括:未访问状态/访问过状态/悬停状态/点击状态

格式: a :link未访问/visited访问过/hover悬停/active激活{样式代码}