美文网首页HTML5
HTML5学习（五）：基础标签(一)

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

作者: 元宇宙协会 | 来源:发表于2017-05-25 23:30 被阅读0次

基础标签

H系列标签（Header 1 ~ Header 6）

  • 给文本添加标题语义，被它包裹的内容会独占一行，并且一个页面只有一个h1标签
<h1>####</h1> 最大
<h2>####</h2>
<h3>####</h3>
<h4>####</h4>
<h5>####</h5>
<h6>####</h6>  最小
每个h5页面只有一个h1标签

P标签

  • 用来表示一个段落,也会独占一行
    <p>#####</p>
  • Hr标签（Horizontal Rule）
    • 在浏览器显示一条分割线
      <hr />
      Hr标签的注意点：
HTML 与 XHTML 之间的差异
在 HTML 中，<hr> 标签没有结束标签。
在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。
在 HTML 4.01 中，hr 元素的所有呈现属性均不被赞成使用。
在 XHTML 1.0 Strict DTD 中，hr 元素的所有呈现属性均不被支持。

img标签

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

    • height : 图片的高度


      图片的展示
图片路径问题

br标签

  • 作用：换行,表示没有描述完的换行。并不是真正的换行
    <br>
    可以多写几个br标签 ，此标签在企业开发一般很少使用，如果明确换行可以使用<p>标签。

a标签

  • 作用 ： 控制页面与页面之间跳转的
    <a href="制定要跳转的目标">展示内容</a>
    <a href="#">此内容点击后会跑到页面最上面</a> 经常我们看到网页有回到顶部的按钮
    <a href="javascript">此内容点击后内容不会跑</a>
  • 其他属性：
    target='_self' 从当前网页调到目标网页，浏览器不保留当前网页
    target='_blank' 从当前网页新建窗口即目标网页窗口，浏览器保留当前网页
    title="" 鼠标悬停时显示的文本
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签</title>
</head>
<body>
<a href="http://www.jianshu.com/u/74372cf48f59">简书</a>
<a href="http://www.jianshu.com/u/74372cf48f59">简书博客</a>
<a href="http://www.jianshu.com/u/74372cf48f59">![](image/One.png)</a>
</body>
</html>
点击图片进行跳转的制作
  • a标签的指定位置跳转
    每个标签内部有一个id属性，可以通过ID属性跳到相应的位置
    <a href="#two">跳Two</a> <p id="two">Two</p>
    跳转到另一个网页中的指定位置
    <a href="CreatHTML.html#Two">跳到CreatHTML文件的Two标签</a>
  • base 标签
    • 作用 ： 让页面的标签遵守这个规则，超链接如何打开
<head>
    <meta charset="UTF-8">
    <title>a标签</title>
    <base target="_blank">
</head>

列表标签

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

  • 分类：

    • 无序列表（unordered list）
      数据没有先后之分
      • 格式
<ul><li>需要显示的条目内容</li></ul>
<h1 align="center">世界最后的国家是哪些</h1>
<ul>
    <li>中国 ：<t>自强</t></li>
    <li>韩国 ：<t>悲剧</t></li>
    <li>印度 ：<t>神奇</t></li>
    <li>美国 ：<t>屌丝</t></li>
</ul>
设置它的样式，可以不带小圆点 
  快捷方式：
  `ul>li`按下Tab键就会直接帮助你创建ok
  `ul>li*3>ul>li*4`试一下这个如何？
  • 有序列表(ordered list)
    有高低区别，排行榜.
  • 格式
    <ol><li></li></ol> 
    <li>中国</li>
    <li>美国</li>
    <li>印度</li>
    <li>欧洲</li>
</ol>
image.png
  • 定义列表(definition list)
    • 作用：用来定义列表，通过<dt>来定义列表中的标题，使用<dd>来描述列表中的标题。一般用来制作尾部内容，图文混排介绍
    • 格式
      <dl> <dt></dt> //定义列表中的标题 <dd></dd> // 定义标题的描述 </dl>

4 基础标签的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雷潮</title>
    <h1 align="center">欢迎关注优酷：雷潮886</h1>
</head>
<hr>
<body>
    <p>这是一个超级项目，由牛逼的人主导。相信随着时间的推移肯定会越来越成功 </p>
</body>
</html>

相关文章