做任务的过程中翻阅了《HTML&CSS》这本书,在这里记录一下解决的问题。
1. 导航/索引的问题
Links 使用的标签是<a>
,有以下几种形式:
- link to other sites
<a href="http://www.xxx.com">xxx</a>
- 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>
- 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
> 若包含冲突的规则,且具有相同的确定度,后出现的高。
网友评论