第一周 HTML 学习笔记
2020-01-02 本文已影响0人
丸子小姐__不懂爱
前言
这一周，因为是刚开始，说好的怕我们不适应学习的节奏，不会讲太多的东西，结果李大大一讲起来根本停不下来，结果一大箩筐的知识点，主要是一些标签以及一堆概念性的东西，头疼的是css，有点晕乎~~~
一、语义化
-
什么是语义化
使用合理，正确的标签来展示内容
基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strongem）等等
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优
雅的代码的同时让浏览器的爬虫和机器很好地解析。 -
为什么要语义化
-
实现语义化要注意什么
- 尽可能少的使用无语义的标签
div和span； - 在语义不明显时，既可以使用
div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容
特殊终端有利； - 不要使用纯样式标签，如：
b、font、u等，改用css设置。 - 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用
他们），strong默认样式是加粗（不要用b），em是斜体（不用i）； - 使用表格时，标题要用
caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头
和一般单元格要区分开，表头用th，单元格用td； - 表单域要用
fieldset标签包起来，并用legend标签说明表单的用途； - 每个
input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标
签中设置for=someld来让说明文本和相对应的input关联起来。
- 尽可能少的使用无语义的标签
二、相对路径和绝对路径
- 相对路径是基于引用文件所在项目的位置为参考，由于各文件在项目中所保存的位置各不相同，因此，当引用同一个文件时，所使用的路径将不同。
- 绝对路径 以web站点根目录为参考基础，所以引用同一个文件时，所使用的的路径都是相同的。
三、块级元素和行内元素
块级元素
- 独占一行，默认高度是根据内容自适应；
- 可以设置元素的宽高
- 其它元素可以通过
display: block; 转换为块级元素； - 常见块级元素有：
div、p、h1-h6;
行内元素
- 默认高度和宽度是根据内容自适应，也就是在同一行排列；
- 不可设置元素的宽高
- 其它元素可以通过
display: inline; 转换为行内元素； - 常见行内元素有：
span、a、b;
特殊元素
- 有些元素既拥有块级元素可以设置高度和宽度的特性，又拥有行内元素在一行排列的特征；
- 这些元素有：
input、button、img;
四、CSS样式表引入
- 内嵌式（内部样式）
在html文档的head中定义style标签，将css代码写在style标签中
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
- 行内式（内联样式）
行内式是直接将样式写在标签中
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
- 外链式（外部样式）
外链式是将以 .css 结尾的文件引入HTML文档中的一种方式,推荐使用
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
五、css选择器
- 类选择器： 使用 “.”进行表示
- 多类名选择器： 给一个标签指定多个类名，但要注意权重问题
- ID选择器： 使用 “#”进行表示，id值是
唯一的 - “ * ” 通配符选择器： 选中页面中所有的元素，
慎用 - 交集选择器： 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如p.text, 表示并且的意思，即...又...;
- 并集选择器: 使用 ‘，’连接， 相当于 和 的意思，任何选择器都可以连接在一起，为所有的选择器作用同样的样式
- 后代选择器： 使用空格连接，用来选择元素的所有后代（子元素），当标签发生嵌套时使用
- 子元素选择器： 使用 “>”连接，与后代不同的是，只能选择父元素的直接儿子
六、css权重
| 权重 | 0,0,0,0 |
|---|---|
| 每个元素（标签）权重值为 | 0,0,0,1 |
| 每个类，权重值为 | 0,0,1,0 |
| 每个ID权重值为 | 0,1,0,0 |
| 每个行内样式权重值 | 1,0,0,0 |
| 每个!important权重值 | ∞ 无穷大 |
你我分头行动，顶峰相见
