重学前端第一天——HTML结构和常见的HTML元素

HTMl结构分析

完整的HTML结构

一个完整的HTML结构包括哪几部分呢？

• 文档声明

  • HTML最上方的的一段文本我们惩治为文档类型声明，用于声明文档类型 （可以声明HTML版本）
  • • HTML文档声明，告诉我们浏览器当前页面上是HTML5页面；
    • 让浏览器用HTML5的标准去解析识别内容
    • 必须放在HTML文档的最前面，不能省略，省略了会出席那兼容性问题

• html元素

  • 元素表示一个HTML文档的根（顶级元素），所以它也被称为根元素。
    • 所有其他于是怒必须是此元素的后代
    • W3C标准建议为html元系增加—个lang属性,作用是

      • 帮助语音合成工具确定要使用的发音;

      • 帮助翻译工具确定要使用的翻译规则;

    • 比如常用的规则:
      • lang= "en”表示这个HTML文档的语言是英文;
      • lang= "zh-CN”表示这个HTML文档的语言是中文;
  • head元素

    • HTML head元素规定文档相关的配置信息（也称之为元数据)，包括文档的标题，引用的文档样式和脚本等。

    • 什么是元数据（(meta data)，是描述数据的数据;

    • 这里我们可以理解成对整个页面的配置:

    • 常见的设置有哪些呢?一般会至少包含如下2个设置。

    • 网页的标题:title元素
      
      

    • 网页的编码:meta元素

      • 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码;
      • 一般都使用utf-8编码，涵盖了世界上几乎所有的文字;
        
  • body元素
    • body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。
    • 之后学习的大部分HTML元素都是在body中编写呈现的;

HTML

• HTML元素本身很多，但是常用的元素就是那么几个。

  • https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
  • 我们只需要记住常用的，不常用的学会查看文档即可;

• 常用的元素∶

• p元素、h元素;

• img元素、a元素、iframe元素;

• div元素、span元素;

h1~h6、p元素

• h元素

  • 在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素。

  • -

    标题(Heading)元素呈现了六个不同的级别的标题

    • Heading是头部的意思，通常会用来做标题

    • 级别最高，而

      级别最低。

  • 注意:h元素通常和SEO优化有关系

  
  
      
          
          
          
          
      
      
          
  h1标题标签
          
  h2标题标签
          
  h3标题标签
          
  h4标题标签
          
  h5标题标签
          
  h6标题标签
      
  
  
  

• p元素

  
  
  这是一个段落。
  这是一个段落。
  这是一个段落。
  
  
  
  

  

img、a、iframe元素

• img元素

  • 我们可以使用img元素来告诉浏览器显示一张图片

  • HTML 元素将一份图像嵌入文档。

    • img是image单词的所以，是图像、图像的意思;
    • 事实上img是一个可替换元素（ replaced element ) ;

  • img有两个常见的属性:

  • src属性:source单词的缩写，表示源

    • 是必须的，它包含了你想嵌入的图片的文件路径。

  • alt属性:不是强制性的，有两个作用

    • 作用一:当图片加载不成功（错误的地址或者图片资源不存在)，那么会显示这段文本;
    • 作用二:屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义;

• a元素

  • 在网页中我们经常需要跳转到另外一个链接，这个时候我们使用a元素;

    • HTML 元素(或称锚(anchor)元素)∶

    • 定义超链接，用于打开新的URL;

  • a元素有两个常见的属性:

    • href: Hypertext Reference的简称

      • 指定要打开的URL地址;
      • 也可以是一个本地地址;

    • target:该属性指定在何处显示链接的资源。

      • _self:默认值,在当前窗口打开URL;
      • _blank:在一个新的窗口中打开URL;

    
    
    访问百度
    
    
    

• 锚点链接可以实现:跳转到网页中的具体位置

  • 锚点链接有两个重要步骤:
    • 在要跳到的元素上定义一个id属性;
    • 定义a元素，并且a元素的href指向对应的id;