HTML5简单介绍1

一、标签的分类

1、将标签分类为单标签和双标签

单标签：一般单独完成某项的功能，不需要结束符的标签；
例如：link img hr br 等等

 <link rel="shortcut icon" href="***.icon">

双标签：一般本身不含有某个功能需要子标签去完成，同时需要结束符的标签。
例如：div head body html ul ol 等等

<div>XXXX</div>

2、将标签分类为行级标签和块级标签

行级标签：共享一行，通常不可以设置大小，但有例外
例如：span、a、i、lable、img(可以设置大小)、input(可以设置大小)

<span>这是一个属于盒子标签，不换行</span>

块级标签：独占一行，可以设置大小
例如·：div、ul、ol、dl、li、br、hn(标题标签如h1)、p、hr

<div>这是一个盒子标签，会换行</div>

二、开始介绍标签：

1、link 可以引用图标或css文本。
    1.1、引用图标(可以是jpg,png,icon)一般在16px*16px

<link rel="shortcut icon" href="图片路径" type="image/x-icon">

    1.2、引用css本

<link rel="stylesheet" href="***.css" >

2、a：跳转标签
    它有一个herf，这个属性记录了页面的跳转到哪一个页面的地址。target="_blank"表示如何跳转，_blank表示以另一个空白页跳转，默认是在当前页跳转。

<a target="_blank" href="https://www.baidu.com"> 百度 </a>

跳转结果：百度

3、img 实现图片的加载，src表示加载图片的路径，alt表示当图片失效时，它上面的信息就会显示，title表示当鼠标放在图片上时会显示提示信息。

 <img src="1.png" alt="该图片未加载出来" title="动漫图片">

4、i 表示字体倾斜

<i>斜体</i>

5、div:盒子标签，它可以换行，他本身没有什么功能，但是可以在它的内部实现代码，当设置属性contenteditable=“true”,可以填写信息。

  5.1、实现一个盒子，无功能

   <div>
        <img src="1.png" alt="该图片未加载出来" title="动漫图片">
        <i>斜体</i>
        <a href="https://www.baidu.com"><i>倾斜</i></a>
        <span>aaa---->相当于一个盒子，不会换行单纯使用没有任何作用，</span>
        
    </div>

  5.2、设置属性contenteditable=“true”

div{
    border: 1px solid black;
}
<div contenteditable="true"></div>

效果图：

6、ol、ul、dl 列表：ul是比较常用的排序方式，ol、ul不是很常用

  <ul type="none">
            <li>1233</li>
            <li>1234</li>
            <li>1235</li>
            <li>1236</li>
        </ul>

        <ol type="a">
            <li>2345</li>
            <li>2346</li>
            <li>2347</li>
            <li>2348</li>
        </ol>
   
        <dl>
            <dt>abcd</dt>
            <dd>adbc</dd>
            <dd>degc</dd>
            <dt>gete</dt>
            <dd>getr</dd>
            <dd>eadc</dd>
        </dl>

6、hn表示标题，6个标题标签。

       <h1>11111111</h1>
        <h2>22222222</h2>
        <h3>33333333</h3>
        <h4>44444444</h4>
        <h5>55555555</h5>
        <h6>66666666</h6>

7、label 常和表单标签中的input标签使用：

 <label for="reader">阅读</label><input type="checkbox" id="reader">
 <label for="writer">音乐</label><input type="checkbox" id="writer">