HTML5学习（五）：基础标签(一)

1 基础标签

• H系列标签（Header 1 ~ Header 6）
  • 给文本添加标题语义，被它包裹的内容会独占一行，并且一个页面只有一个h1标签

####
 最大
####
####
####
####
####
  最小

每个h5页面只有一个h1标签

• P标签
• 用来表示一个段落,也会独占一行
  

  #####

• Hr标签（Horizontal Rule）
  • 在浏览器显示一条分割线
    

    ---

    
    Hr标签的注意点：

HTML 与 XHTML 之间的差异
在 HTML 中，
 标签没有结束标签。
在 XHTML 中，
 必须被正确地关闭，比如 
。
在 HTML 4.01 中，hr 元素的所有呈现属性均不被赞成使用。
在 XHTML 1.0 Strict DTD 中，hr 元素的所有呈现属性均不被支持。

• img标签
• 用来展示图片的标签，只需要在里面写入图片的名字，而且图片必须在工程文件夹中，或者制定文件路径下。
• 内部属性
  • title : 鼠标悬停图片之上显示什么
  • alt : 告诉浏览器图片找不到显示什么
  • width : 图片的宽度（只要设置宽度，会自动对片进行拉伸显示）

  • height : 图片的高度

    
    
    

    图片的展示

图片路径问题

如果是上级呢？
![](../One.png)

• br标签

  • 作用：换行,表示没有描述完的换行。并不是真正的换行
    

    可以多写几个br标签 ，此标签在企业开发一般很少使用，如果明确换行可以使用

    标签。

• a标签

  • 作用 ： 控制页面与页面之间跳转的
    展示内容
此内容点击后会跑到页面最上面 经常我们看到网页有回到顶部的按钮
    此内容点击后内容不会跑
  • 其他属性：
    target='_self' 从当前网页调到目标网页，浏览器不保留当前网页
    target='_blank' 从当前网页新建窗口即目标网页窗口，浏览器保留当前网页
    title="" 鼠标悬停时显示的文本

    
    



博客
![](image/One.png)

点击图片进行跳转的制作

• a标签的指定位置跳转
  每个标签内部有一个id属性，可以通过ID属性跳到相应的位置
  跳Two

  Two

  
  跳转到另一个网页中的指定位置
  跳到CreatHTML文件的Two标签
• base 标签
  • 作用 ： 让页面的标签遵守这个规则，超链接如何打开

• 列表标签

• 作用： 将一些数据进行整合，告诉浏览器是一个整体.常见使用列表标签做导航条，商品列表

• 分类：

  • 无序列表（unordered list）
    数据没有先后之分
    • 格式

• 需要显示的条目内容

世界最后的国家是哪些

• 中国 ：自强


• 韩国 ：悲剧


• 印度 ：神奇


• 美国 ：屌丝

![设置它的样式，可以不带小圆点](http://upload-images.jianshu.io/upload_images/642887-bb63cd20835876d3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    快捷方式：
    `ul>li`按下Tab键就会直接帮助你创建ok
    `ul>li*3>ul>li*4`试一下这个如何？
 
 - 有序列表(ordered list)
   有高低区别，排行榜.
  - 格式 
  `
`

1. 中国


2. 美国


3. 印度


4. 欧洲

![image.png](http://upload-images.jianshu.io/upload_images/642887-1a53447161f3408c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

   - 定义列表(definition list)
    - 作用：用来定义列表，通过`
`来定义列表中的标题，使用`
`来描述列表中的标题。一般用来制作尾部内容，图文混排介绍
    - 格式
  `

  //定义列表中的标题
 // 定义标题的描述
`     


####4 基础标签的运用
```html



    
    
    
欢迎关注优酷：雷潮886



    
这是一个超级项目，由牛逼的人主导。相信随着时间的推移肯定会越来越成功