前端学习笔记（HTML&CSS）（03）

前端学习笔记（HTML&CSS）（03）

语义化标签

块元素（block element）

• 在网页中一般通过块元素来对页面进行布局

常见块元素（block element）

     <address>writen by 十安</address>   
    <!--<address> 标签定义文档或文章的作者/拥有者的联系信息。-->

     <blockquote>
        十安的段落缩进 
    </blockquote>
    <!--表示一个长引用-->
    <!--<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，
        经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。
        也就是说，块引用拥有它们自己的空间。-->

    <center>十安的居中</center>

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup-->
    <hgroup>
        <h1>回乡偶书二首</h1>
        <h2>其一</h2>
    </hgroup>

    <!-- p标签表示页面中的一个段落 p也是一个块元素-->
    <p>在p标签中的内容就表示一个段落</p>
    <p>在p标签中的内容就表示一个段落</p>

显示效果

行内元素（inline element）

• 行内元素主要用来包裹文字

常见行内元素

    <p>The <abbr title="People's *">PRC</abbr> was founded in 1949.</p> 
    <!--<abbr> 标签指示简称或缩写，比如 "WWW" 或 "NATO"。通过对缩写进行标记.
        您能够为浏览器、拼写检查和搜索引擎提供有用的信息。-->
    
    <p><a href="http://www.w3school.com.cn">W3School</a></p>
    <!--<a> 标签定义超链接，用于从一张页面链接到另一张页面。
        <a> 元素最重要的属性是 href 属性，它指示链接的目标。-->
    
    <p>这是十安的普通文本 - <b>这是十安的粗体文本</b>。</p>
    <p>这是十安的普通文本 - <em>这是十安的强调文本</em>。</p>
    <p>这是十安的普通文本 - <strong>这是十安的重要文本</strong>。</p>
    <p>这是十安的普通文本 - <mark>这是十安的标注的/突出显示文本</mark>。</p>
    <!--根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 <b> 标签作为最后的选项。
        HTML5 规范声明：应该使用 <h1> - <h6> 来表示标题，
            使用 <em> 标签来表示强调的文本，
                应该使用 <strong> 标签来表示重要文本，
                    应该使用 <mark> 标签来表示标注的/突出显示的文本。-->
    
    <p> 十安<br />的<br />段落<br />要<br />分行. </p>
    <!--<br> 可插入一个简单的换行符。
        <br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。
        在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。-->
    
    <p>这是十安的普通文本 - <sub>这是十安的下标文本</sub>。</p>
    <p>这是十安的普通文本 - <sup>这是十安的上标文本</sup>。</p>
    <!--<sup> 标签可定义上标文本。<sub> 标签可定义下标文本。-->

 
    <p>十安曰<q>我要好好学前端</q></p> 
    <!-- q表示一个短引用,浏览器经常在引用的内容周围添加引号-->

显示效果

布局标签（结构化语义标签）

  header       表示网页的头部
  main         表示网页的主体部分(一个页面中只会有一个main)
  footer       表示网页的底部
  nav          表示网页中的导航
  aside        和主体相关的其他内容（侧边栏）
  article      表示一个独立的文章
  section      表示一个独立的区块，上边的标签都不能表示时使用section

• 都是HTML5新定义标签

    <header>
            <h1><center>十安的学习路线</center></h1>
            <p><center>学习目录:</center></p>
            <nav><center>                
                <a href="/html/">HTML</a> |
                <a href="/css/">CSS</a> |
                <a href="/js/">JavaScript</a> |
                <a href="/jquery/">jQuery</a>
            </center>
            </nav>
    </header>
    <p>十安好好学前端</p>

    <aside>
        <h4>前端学习教材</h4>
    </aside>

    <main>
        <h2><center>前端知识点总结</center></h2>
        <p> 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。
            随着互联网技术的发展，HTML5，CSS3，前端框架的应用，
            跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。</p>
      
        <article>
          <h1><center>HTML</center></h1>
          <p> HTML称为超文本标记语言，是一种标识性的语言。
              它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。</p>
        </article>
      
        <article>
          <h1><center>CSS</center></h1>
          <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）
              或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
        </article>
      
        <article>
          <h1><center>JavaScript</center></h1>
          <p>JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</p>
        </article>
    </main>


    <footer>
        <p><center>Posted by: 十安</center></p>
        <p><center>Contact information: <a href="mailto:[e-mail]">[e-mail]</a>.</center></p>
    </footer>

实例显示效果

div & span 标签

  div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
  span 行内元素，没有任何的语义，一般用于在网页中选中文字

• < div >（divsion）简单而言是一个取款容器标记，也就是说< div >< /div >之间是一个容器，可以容纳段落，标题，表格，图片，章节，摘要和备注等各种HTML元素。因此，可以把< div >与< /div > 中的内容视为一个独立的对象，用于CSS的控制。声明时只要对< div >进行相应的控制，其中的各标签元素都会因此而改变。

• < span >标记和< div >标记一样，作为容器标记而被广泛用于HTML语言中。

• 区别在于，< div >是一个块级(block-level)元素，它包围的元素会自动换行。而 < span >仅仅是一个行内元素(inline element)，在它的前后不会换行。< span >没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用< span >元素。

• 需要注意的是，< span >标记可以包含于< div > 标记之中，成为他的子元素，而反过来则不成立，即< span >标记不能包含< div >标记。