HTML5教程（三）- 常用标签

1 文本标签 -h

• 标题标签（head）：

  • 自带加粗效果，从 h1 到 h6 字体大小逐级递减
  • 一个标题独占一行

• 语法

   h1>一级标题h1>
   h2>二级标题h2>
   h3>三级标题h3>
   h4>四级标题h4>
   h5>五级标题h5>
   h6>六级标题h6>
  

2 段落标签 -p

3 普通文本标签 -span

4 格式标签

• 浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

  br>     换行
  b>加粗文本 b>       strong> 加粗文本strong>
  i>斜体文本 i>          em> 加粗文本em>
  code>电脑自动输出code>
  sub>下标sub> 
  sup>上标sup>
  strong>加重文字strong>
  del>删除字del>    
  u>下划线u>
  

5 字符实体

• 某些情况下，浏览器会将一些特殊字符按照 HTML 的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写

   使用  在页面中呈现 ""
   使用  >  在页面中呈现 ">"
   使用   在页面中呈现一个空格
   使用 © 在页面中呈现版权符号 "©"
   使用 ¥ 在页面中呈现人民币符号 "￥"
  

6 容器标签 -div

• 常用于页面结构划分，结合 CSS 实现网页布局

  页面顶部区域
  页面主体区域
  页面底部区域
  

7 图片标签 -img

• 图片标签：用于在网页中插入一张图片。

  1. src：用于给出图片的 URL【必填】
  2. width/height：用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
  3. title：用于设置图片标题，鼠标悬停在图片上时显示
  4. alt：用于设置图片加载失败后的提示文本

• 语法

  img src="" width="" height="" title="" alt="">
  

  

• 其他用法

  • 路径
    • 绝对路径
      • 目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
    • 相对路径
      • 以 引用文件所在位置为参考 基础，而建立出的目录路径。

  相对路径分类	符号	说明
  同一级路径		图像文件位于 HTML 文件同一级，如：
  下一级路径	/	图像文件位于 HTML 文件下一级，如：
  上一级路径	…/	图像文件位于 HTML 文件上一级，如：

  body>
      
      
      img src="https://img10.360buyimg.com/img/jfs/t1/176863/16/41608/14330/668e3421F64b41094/15c9d9130b980a51.png" alt="京东 logo">
  
      
      img src="images/logo.png" alt="天府学院 logo">
  
      
      
      img src="C:Usersblning 下载刘亦菲.jpg" alt="">
  
      
      img src="./image/ 刘亦菲.png" alt="">
  
      
      img src="./image/ 刘亦菲.png" 
           alt="图片加载失败显示的信息"
           title="鼠标放在图像上显示的信息"
           width="200px"
           height="150px"
           border="3px">
  body>
  

8 超链接标签 -a

• 超链接（anchor，锚）：用户可以点击超链接实现跳转至其他页面

  1. href：用于设置目标文件的 URL【必填】
  2. target：用于设置目标文件的打开方式，默认在当前窗口打开（取值：“_self”），设置新建窗口打开目标文本(取值：“_blank”)

  a href="http://www.taobao.com" target="_self">淘宝a>
  a href="http://www.baidu.com" target="_blank">百度a>
  

  

• 其他用法

  body>
      h1 id="title">标题h1>
      
      a href="http://www.taobao.com" target="_self">淘宝a>
      a href="http://www.baidu.com" target="_blank">百度a>
      
      
      a href="h_tag.html"> a 标签a>
  
      
      a href="#">首页a>
  
      
      a href="HTML 简介.pptx">PPTa>
  
      
      a href="../Day01/image/ 刘亦菲.png">刘亦菲a>
      
      
      a href="#contents">看内容a>
      div style="width: 300px; height: 800px; background-color: aquamarine;">块div>
      div id="contents">内容div>
      a href="#title">回标题a>
  body>
  

9 导航标签 -nav