HTML5学习(五):基础标签(一)

基础标签

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容