美文网首页
FE Notes | HTML&CSS基础

FE Notes | HTML&CSS基础

作者: 未枝丫 | 来源:发表于2016-03-24 11:01 被阅读74次

    做任务的过程中翻阅了《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>
    1. 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
    > 若包含冲突的规则,且具有相同的确定度,后出现的高。

    相关文章

      网友评论

          本文标题:FE Notes | HTML&CSS基础

          本文链接:https://www.haomeiwen.com/subject/vnrrlttx.html