第四课--HTML元素、注释、属性、常用基本元素

本文创建时间：2018-06-16

HTML元素

       开始标签   +      内容     +   结束标签   
  eg:    <h1>       h1是一级标题       </h1>     //这是双标签元素
  eg:    <img src="image.png" >                //这是单标签元素

在HTML中成对出现的结构就可以称为元素，但并不是所有的HTML元素都有成对的标签，HTML元素总是伴随着HTML属性出现，属性总是出现在元素的开始标签

HTML元素

HTML注释

  <!-- 这就是注释，这里面放注释说明-->    //这样的注释方式是HTML特有的注释方式
  <!--   // 注释开始
  ....   // 注释内容   大多是对代码的说明
  -->    //  注释结束

HTML属性

一般属性都具有以下特征：

每个属性之间或与元素名之间都有一个空格隔开
属性名后面紧跟等号
属性值使用双引号包裹

但也有一些属性只有属性名，没有属性值，这种属性我们称之为布尔属性，如下disabled就是布尔属性，表示是否禁用，有该属性则为禁用：

<input type="text" disabled>

除此之外，我们还可以自定义属性来存储我们的一些数据以便 JS 使用。具体可参考：HTML data-* 属性。

属性分类（可分为以下三类）：

全局属性（只要是元素就可以有）：class 、 id 、 title 、 style
可用于某一类元素的，如form表单相关元素的name、value属性
只用于某一个元素的，如alt属性只用于img元素

 几个属性的介绍：
 class---
   用来设置元素的一个或多个类名，这样以后的 CSS 或 JS 就可以方便对该元素进行操作。具有以下特点：
      * 类名不能以数字开头（一定要牢记）
      * 类名可以设置多个值，以空格分开，如<div class="box box--menu"></div>
      * 不同的元素可以有相同的类名
 id---
   设置元素的唯一性，经常用于JS操作或CSS操作，也可用于定义锚点。具有以下几个特点：
      * 在整个HTML文档中必须是唯一的，也就是说一个HTML文档中不能出现两个一样的id值
      * 不可以和class 那样设置多个值 ⚠️
 title---
      用来设置元素的额外信息，鼠标悬停在元素上会显示title属性的内容
      <a title="我等你就是为了告诉你我是title属性里面的内容" href="#">链接文字很多...</a>
 style---
      用于设置元素的行内样式，一般用于 JS 动态改变元素的样式

常用基本元素

 1. div元素：常用来分区

 2. span元素：被用来组合文档中的行内元素

 3. 段落元素   <p></p>
           <p>定义段落，每一个<p>标签都默认另起一行。

 4. 图片元素   <img>
 <img>标签用来在网页中嵌入图片，<img>标签没有结束标签。
 --像这种只有一个标签的元素都可以称之为“空元素(empty element)
 <img>标签有两个必需的属性：src属性和alt属性。其中src属性为图片地址，alt属性为如果图片加载失败显示的替换文字。除了必须属性外，还可以添加控制大小的属性width和height。
  eg：<img src="图片地址" alt="图片加载失败后显示的文字" width="150" height="150">

 5. 链接元素 <a></a>
    <a>标签定义超链接，用于网页之间的跳转（从一个网页到另一个网页），它有一个重要的属性href，用来指定链接的目标。 另一个属性target用来定义链接的打开方式。
    <a href="www.baidu.com" target="_blank">

  6. 列表元素   ---无需列表和有序列表
      <ul>
          <li>item1</li>
          <li>item2</li>
      </ul>
      <ol>
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
      </ol>

  7.

了解更多HTML元素，参考：

HTML 元素参考 | MDN
HTML 参考手册 | w3school
HTML 元素的 wiki 文档：HTML element - Wikipedia

参考资料传送门🚪请进门

上一章节：认识HTML、深入了解head元素
下一章节： HTML 字符实体

最后编辑于：2018.06.17 16:35:16

第四课--HTML元素、注释、属性、常用基本元素

HTML元素

HTML注释

HTML属性

更多全局属性参考

常用基本元素

参考资料传送门🚪请进门