前端之旅：学习 慕课网的HTML+CSS基础课程

在慕课网上学习HTML+CSS基础课程时记录了一些关键点。可能学完这个课程会给你已经学会了html和css的错觉，但其实这个课程真正的作用只在于让你初步的认识html和css，更深入的知识需要看书和实践才能获得。

HTML

何为语义化？

语义化。说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

但是语义化可以给我们带来什么样的好处呢？

1. 更容易被搜索引擎收录
2. 更容易让屏幕阅读器读出网页内容

<em>、<strong>和<span>

1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。
2. <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<code> 和 <pre>的区别

当代码为一行代码时，你可以使用<code>标签，如果是多行代码，可以使用<pre>标签。

注意：<pre>标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

<table>表格

<table>：定义表格
<tr>：定义行
<th>：定义表头
<td>：定义单元格

<tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

summary属性，摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">

<caption>用以描述表格标题，该标签必须紧随 table 标签之后，默认显示位置：表格上方。

mailto属性

<a>元素的mailto属性

注意：如果mailto后面同时有多个参数的话，第一个参数必须以?号开头，后面的参数每一个都以&号分隔。

CSS

CSS样式分类

• 内联式：就是把css代码直接写在现有的HTML标签中
• 嵌入式：把css样式代码写在<style type="text/css"></style>标签之间
• 外联式：就是把css代码写在一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内使用标签将css样式文件链接到HTML文件内
  三种方式的优先级是：内联式 > 嵌入式 > 外联式（嵌入式>外联式有一个前提：嵌入式css样式的位置一定在外部式的后面）

选择器

分类

• 标签选择器其实就是html代码中的标签
• 类选器：要先在标签上添加class属性并赋值，然后用.号+class属性值的方式来使用

• id选择器：要先在标签上定义添加id属性并赋值，然后用#号+id属性值的方式来使用。
  类选择器和id选择器的不同点

  1. id选择器只能在文档中使用一次
  2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。

• 子选择器：用>符号选择指定标签元素的第一代子元素，比如p > span

• 包含（后代）选择器：使用空格选择指定标签元素下的所有后辈元素（注意加粗字体和子选择器的区别）
• 通用选择器：是功能最强大的选择器，用*号指定，它的作用是匹配html中所有标签元素
• 伪类选择符：它允许给html不存在的标签（标签的某种状态）设置样式，比如:hover
• 分组选择符：使用,号来选择多个选择器，它们共享同一种样式

选择器权值

标签的权值为1，类选择器的权值为10，ID选择器的权值最高为100。

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

样式层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

有些特殊的情况需要为某些样式设置具有最高权值，这时候我们可以使用!important来解决，放在某条需要设定的样式之后，分号之前。

样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

字体和段落样式

样式名	作用
font-family	字体
font-size	字体大小
font-weight	字体粗细(bold…)
font-style	字体样式(italic…)
text-decoration	文本装饰(line-through…)
text-indent	段落缩进
line-height	段落行高
letter-spacing	字符间距
word-spacing	单词间距，对汉字无效
text-align	对块元素设置对齐方式

今天学完了慕课网的HTML+CSS基础课程前10章，明天继续。