MDN-01、HTML介绍

HTML介绍

1. 标题和段落

   标题：

   ~

   ,一级标题到6级标题。
   这六个标签具有语义，让人知道这是标题，也帮助搜索引擎或者是屏幕阅读器等工具工作。而使用css对一个没有语义的标签添加样式达到同样的显示效果，这对搜索引擎或者屏幕阅读器就没有任何帮助了。

   段落：一个

   标签就是一个段落。

2. 列表

   无序列表

   (Unordered List?)：

   
     
   豆浆
     
   油条
     
   豆汁
     
   焦圈
   
   

   有序列表

   (Ordered List?)：

   
     
   沿着条路走到头
     
   右转
     
   直行穿过第一个十字路口
     
   在第三个十字路口处左转
     
   继续走 300 米，学校就在你的右手边
   
   

   1. 强调

      (emphasis):浏览器默认风格为斜体，但你不应该纯粹使用这个标签来获得斜体风格，为了获得斜体风格，你应该使用元素和一些CSS，或者是元素

      (strong importance) :浏览器默认风格为粗体，但你不应该纯粹使用这个标签来获得粗体风格，为了获得粗体风格，你应该使用元素和一些CSS，或者是 元素

      上面两个元素都具有语义，语义对可访问性，SEO（搜索引擎优化）等非常重要。

   2. 斜体字、粗体字、下划线

      • :被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
      • :被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
      • :被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

   3. 统一资源定位符(URL)与路径（Path）

      统一资源定位符（英文：Uniform Resource Locator，简写：URL）是一个定义了在网络上的位置的一个文本字符串。

      URL使用路径查找文件。路径 指定文件系统中您感兴趣的文件所在的位置。

   4. 文档片段(锚)

      超链接除了可以链接到文档外，还可以链接到文档内的指定位置，

      Mailing_Address
      ...
      
      return to mailling address 
      

      也可以跳转到其他页面的指定位置

      jump to mailling address
      

   5. 电子邮件链接

      email me now
      

      当点击一个链接或按钮时，打开一个新的电子邮件发送信息，邮箱地址是可选的

   6. 描述列表 (description list)

      这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。

      描述列表使用与其他列表类型不同的闭合标签—

      ; 此外，每一项都用

      (description term) 元素闭合。每个描述都用

      (description description) 元素闭合。

       
      
         
      内心独白
           
      戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。
         
      语言独白
           
      戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。
         
      旁白
           
      戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
       
      

      
      

      内心独白

      
      

      戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。

      
      

      语言独白

      
      

      戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。

      
      

      旁白

      
      

      戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。

      
      

      
      浏览器的默认样式会在描述列表的描述部分（description description）和描述术语（description terms）之间产生缩进。

   7. 引用

      块引用：如果一个块级内容被其他地方所引用，那么这个块应该用

      元素包裹起来，并且元素的cite属性值标明引用的URL资源。

       
      
         
      The HTML <blockquote> Element (or HTML Block
         Quotation Element) indicates that the enclosed text is an extended quotation.
       
      

      
      

      The HTML

      Element (or HTML Block
      Quotation Element) indicates that the enclosed text is an extended quotation.

      
      

      行内引用：使用元素，将短的行内引用的文本包裹起来，并且元素的cite属性值标明引用的URL资源。

       
      The quote element — <q> — is intended
        for short quotations that don't require paragraph breaks.
      

      The quote element — — is intended
      for short quotations that don't require paragraph breaks.

   引文：

   和元素的cite属性都不会显示出来，如果要确保引用的来源在页面上显示出来，最好使用元素包裹元素：

    
   According to the 
       MDN blockquote page:
    
   

   According to the
   MDN blockquote page:
   

   元素中的内容默认样式为斜体。

   9. 缩略语

      我们使用 HTML 来组织网页文档。
      
      第 33 届 奥运会 将于 2024 年 8 月在法国巴黎举行。
      

      我们使用 HTML 来组织网页文档。

      第 33 届 奥运会 将于 2024 年 8 月在法国巴黎举行。

      元素用来包裹一个建略语或者缩写，并在title中对其进行解释。

   10. 标记联系方式

       标签用来包含联系方式（地址，邮箱，个人简历的超链接等）

        
       
          
       Chris Mills, Manchester, The Grim North, UK
        
        
       
          
       Page written by Chris Mills.
        
       

       

       image

   但要记住的一点是，

   元素是为了标记编写HTML文档的人的联系方式，而不是任何其他的内容。

   11. 上标和下标

   和用来标记上标和下标

    
   咖啡因的化学方程式是 C8H10N4O2。
    
   如果 x2 的值为 9，那么 x 的值必为 3 或 -3。
   

   

   image

   12. 计算机代码

       有大量的HTML元素可以来标记计算机代码：

       • : 用于标记计算机通用代码。

       • :用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在
         标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。

       • :用于标记具体变量名。
       • :用于标记输入电脑的键盘（或其他类型）输入。
       • :用于标记计算机程序的输出。

       const para = document.querySelector('p');
       
       para.onclick = function() {
         alert('噢，噢，噢，别点我了。');
       }
       
       请不要使用 <font> 、 <center> 等表象元素。
       
       在上述的 JavaScript 示例中，para 表示一个段落元素。
       
       按 Ctrl/Cmd + A 选择全部内容。
       
       $ ping mozilla.org
       PING mozilla.org (63.245.215.20): 56 data bytes
       64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms
       

   

   image

   13. 标记时间和日期

       元素不仅可以标记时间，还可以将时间标记为可供机器识别的格式:

       2020年3月30日
       

       还有许多其它时间格式：

       
       20 January 2016
       
       January 2016
       
       20 January
       
       19:30
       
       19:30:01.856
       
       7.30pm, 20 January 2016
       
       7.30pm, 20 January 2016 is 8.30pm in France
       
       The fourth week of 2016
       

   14. 文档的基本组成部分

       网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：

       • 页眉：通常横跨于整个页面顶部有一个大标题 和/或 一个标志。 这是网站的主要一般信息，通常存在于所有网页。
       • 导航栏：指向网站各个主要区段的超链接。
       • 主内容：中心的大部分区域是当前网页大多数的独有内容。
       • 侧边栏：一些外围信息、链接、引用、广告等。
       • 页脚：横跨页面底部的狭长区域。
         为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：
       • ：页眉
       • ：导航栏
       • ：主内容，其中还可以包含

         、

         、

         等。
       • ：侧边栏。
       • ：页脚。

   15. 和

       是一个内联（inline）无语义元素。只有当找不到合适语义的标签时，或者不想为内容增加特定的含义时使用。

       是一个块级无语义元素，使用场景同

       非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用， 否则文档的升级和维护工作会非常困难。

   16. 换行和水平分割线

       
可在段落中换行，是唯一一个可以生产多个断行结构的元素。

       ---

       元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。