html标签

html 双标签

head 双标签，网页的一些配置
meta 单标签，规范我们使用网页的字符集。中文：gb2312(gbk)，外文：utf-8

title 网页标题

1.h系列

• headline，分为六个等级，标示一到六级标题，级别依次降低，重要程度也是依次降低。

• 约定俗成，一般一个页面里h1标签权重最高，最便于搜索引擎搜索，一个页面只写一个h1标签，而且一般会给到logo

• 六级标签都是单独书写，不存在嵌套关系

  <!-- h标签 -->
  <h1 class="title biaoti t" id="1234">一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
  

6级h标签

2.p标签

paragraph，段落，文本级标签。只能放文本，图片，表单元素，或者废弃的标签（font等）

<!-- h标签 -->
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>

3.img标签

image，图片，引入一张图片，属于特殊文本，

• 单标签<img />

• 可插入图片类型：png，jpg，gif。

• img标签属性：
  src：source，资源，表示图片的来源，路径，必须写的属性。
  width: 宽，单位px，可以省略单位。设置后会等比例缩放图片
  height: 高，同上
  title：设置提示文本，鼠标悬停在图片上后显示
  border：边框，一般用css来控制，这里就不介绍了
  alt: 替换内容，用做当前图片不能正确显示时来显示的内容

   <!-- img标签 --> 
   <img src="preview.png" width="300" title="霉霉" alt="霉霉的图片">
  

路径

文件的位置，有相对路径和绝对路径

1.相对路径

从html文件本身出发，找文件位置

• 同级查找（文件与html在同一文件夹内）：直接属性文件名字（包括文件名和扩展名）

• 子级查找（文件在html所在文件夹的子文件中）：需要加上子文件夹的名字，有多级文件夹，都需要写上

• 上级查找（文件在html在文件夹的上级文件夹中）：上级文件夹可以用..lai代替，注意..只能代替一个，多级的话：../../../../

    <img src="preview.png">  同级查找
    <img src="Images/preview.png">  子级查找
    <img src="../preview.png">  上级查找
  

综合事例：如下，在我们标签网页的上级photo文件夹中也有一张preview.png图片，这时候该怎么取到这张图片呢

文件结构

    <img src="../../photo/preview.png"> 

说明：首先，图片处于上级，但是呢，是在上级的文件夹中，要获取上级文件夹，首先的得找到更高级的文件夹所以能得向上../../两级进入Document文件夹，然后进入photo文件夹../photo/，最后再查找我们所需要的文件../photo/preview.png

2.绝对路径

绝对路径是从盘符出发，进行查找

    //本地图片
    <img src="/Users/mac1/Documents/preview.png">
    //网络图片
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573573958279&di=c28b56f5c4c2a19d200e9701c42f5a85&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201503%2F21%2F20150321175635_HEWK4.jpeg">

4.a标签

anchor，锚，超链接的缩写，双标签，可以跳转到相应的网址
标签属性：
href：hypertext reference 超文本传输协议
target: 目标，设置我们的跳转是否打开新窗口。默认在原窗口打开，添加属性值：“_blank”后，在新窗口打开
title: 设置提示文本，鼠标悬停在图片上后显示

<!-- a标签：原页面跳转 -->
<a href="label2.html">跳转到label2</a>
<!-- a标签：新页面跳转 -->
<a href="https://www.baidu.com" target="_blank" title="百度搜索">
    百度一下
    <img src="paperplane.png" width="30">
</a>

跳转：
1.打开新页面（见上文）
2.跳转原页面（见上文）
3.页面内位置跳转
4.新页面位置跳转

<!-- #号加id -->
<a href="#1234">一级标题</a>

位置跳转有两种方法：
1.需要借助id属性

<!--跳转链接 + #号 + id -->
<a href="label2.html#9981">跳转到label2中的《我们不一样》</a>
<!--设置id -->
<p id="9981">我们不一样</p>

2.在需要的位置加入一个a标签，不用写href属性，设置name属性，命名与id一样

<!--跳转链接 + #号 + name -->
<a href="label2.html#snowolf">跳转到label2中的snowolf</a>
<!--位置a标签并添加name属性 -->
<a name="snowolf"></a>

5.列表

将一些内容或样式类似相近，相关的内容一起书写

• 有三种列表：无序列表，有序列表，定义列表

1.无序列表

• <ul></ul>，unordered list 无序列表，添加一组无序列表。
• <li></li>，list item，列表项。
• ul和li 必须成对儿出现，它们之间是嵌套关系，ul中可以存在一个或多个li
• 快速生成方法：输入ul>li*4，然后按tab键，其他嵌套等类似，自己实践

<!-- ul标签 -->
<ul>
    <li>春天</li>
    <li>夏天</li>
    <li>秋天</li>
    <li>冬天</li>
</ul>

• li标签是一个经典的容器级标签，可以嵌套任意标签，甚至继续嵌套列表标签
• li标签并不会添加小圆点等样式，需自己用css来设置，没有顺序之分

<!-- ul标签 -->
<ul>
    <li>文字</li>
    <li>
        <img src="paperplane.png" width="30">
    </li>
    <li>
        <h2>地形</h2>
        <ul>
            <li>平原</li>
            <li>高原</li>
            <li>丘陵</li>
        </ul>
     </li>
</ul>

无序列表

2.有序列表

• <ol></ol>，ordered list 无序列表，添加一组有序列表。与无序列表相似，不同的是他默认会添加一个数字前缀，实际情况是我们会清除这个默认样式，然后通过css来添加

  <ol>
      <li>餐饮</li>
      <li>娱乐</li>
      <li>
          <p>服饰</p>
             <ol>
                 <li>女装</li>
                 <li>男装</li>
                 <li>童装</li>
             </ol>
      </li>
  </ol>
  

有序列表

3.定义列表

• <dl></dl>，definition list， 定义列表，

• <dt></dt>，definition title，定义标题。

• <dd></dd>，definition description，定义描述，对标题的描述。

• dt和dd都是容器级标签

• dl同时嵌套dt和dd，其中dd可以有多个，也可以不添加。快捷键为dl>(dt+dd)*3，再按tab键。还有dl>(dt+dd*3)*3等等，自己实践...

  <!-- dl标签 -->   
  <dl>
      <dt>胡歌</dt>
          <dd>影视男演员</dd>
          <dd>作品：仙剑系列，《伪装者》等等</dd>
  
      <dt>刘德华</dt>
          <dd>作品：《今天》，《练习》等等</dd>
          <dd>歌手，演员</dd>
            
      <dt>高圆圆</dt>
          <dd>演员</dd>
  </dl>
  

定义列表

6.div和span

通常称为盒子，没什么特殊语义，常用来布局

• div： division，范围，区域，分割。大范围，可以嵌套任意标签
• span：小范围，小区域的布局使用，文本级标签，不能嵌套容器级标签，一般认为p>span>a