FE Notes | HTML&CSS基础

做任务的过程中翻阅了《HTML&CSS》这本书，在这里记录一下解决的问题。

1. 导航/索引的问题

Links 使用的标签是<a>，有以下几种形式：

1. link to other sites
   <a href="http://www.xxx.com">xxx</a>
2. link to other pages on the same site (in different folders)

• same folder
  <a href="introduction.html">introduct</a>
• child folder
  <a href="about/us.html>us</a>
• grandchild folder
  <a href="about/people/tom.html>Tom</a>
• parent folder
  <a href="../index.html>index</a>
• grandparent folder
  <a href="../../map.html>map</a>

3. link to a specific part of the same page
   用 # 与 id 来实现链接

<a href="#article">article</a>
<h2 id="article">Article</a>```

4. link to a specific part of another page
结合以上几种方法来实现
```<a href="about/people/tom.html/#tomphoto"> Tom's photo </a>```
注：其中的#应该视作是页面内部的一个节点，链至其他页面时需要用 / ，而在当前页面则不用。

5.  Email links
```<a href="mailto:soyaine@example.com>Email me</a>```

6. Opening links in a new window
通过target属性来实现，值为“_blank”.
```<a href="http://www.xxx.com" target="_blank"></a>```

在写上面的内容时发现，因为Markdown中可以内嵌HTML代码，所以标签`<a>`如果不用代码标识符括起来的话，会被识别成一个链接，使之后文字使用链接的样式，<a>就像这样。</a> 如果不添加`</a>`标签，此后的文字都会呈现链接样式，此处不作展示。

但当我加入href值的时候：
<a href="www.xxx.com">jkfj</a>
则没有任何识别错误，这和Markdown中HTML格式有关。

##2. 段落标记的细节
最开始由于想表示清楚，所以按照下面的方式来标记段落。

<p>
《山居笔记》是余秋雨的又一本散文集。
该书1995年8月在台湾出版。
以下为节选内容：
</p>

后来看了下《HTML&CSS》与[MDN中的`<p>`部分](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)，都是按照下面的方式来标记的。
`<p>`之后紧跟段落内容，多行时编辑器自动缩进（用Webstorm是这样），结束标记`</p>`跟在段落结尾部分，不另起一行。

<p>《山居笔记》是余秋雨的又一本散文集。
该书1995年8月在台湾出版。
以下为节选内容：</p>

不知道是不是标准，这个有待考察，但给我的感觉是，这样写的话，可以清楚的看到，用`<p>`引出一个段落，在代码中看起来会清晰一些，而不是将段落标记与其他的`<h>`等标记混在一起。

##3. 列表类型（lists）
1. ordered list - `<ol>` + `<li>`有序列表
2. unordered list - `<ul>` +  `<li>`无序列表
3. definition list - `<dl>` + `<dt>` + `<dd>`定义列表。dt:definition term, dd:definition

##4. 表格标签（table）
td: table data
tr: table row
th: table handing
？如何识别哪一行合并的呢？

##5. CSS
HTML中用标记语言描述内容而非样式，
用CSS描述样式而非内容。（但有例外）

###CSS的优先级：
网页开发者定义样式 > 网页阅读者定义样式 > 浏览器默认样式
子元素自身样式 > 从父继承来的样式

###选择器：
class 类选择器以 . 开头
id 选择器以 # 开头

###规则优先级：
若多个规则指定同一属性到同一元素，选择器优先级：（依据确定度）
id > class > tag
> 若包含冲突的规则，且具有相同的确定度，后出现的高。