HTML5学习笔记之基础标签

HTML5学习笔记之基础标签

其他HTML5相关文章

HTML5学习笔记之HTML5基本介绍

HTML5学习笔记之基础标签

HTML5学习笔记之表格标签

HTML5学习笔记之表单标签

HTML5学习笔记之音视频标签

一.列表标签

1.无序列表(unordered list)

无序 : 没有先后之分

1) 作用:

  • 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后

2) 格式:

  • li 英文是 list item, 翻译为列表项
    <h4>中国城市列举(CN)</h4>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>杭州</li>
</ul>

Snip20170614_4.png

3) ul应用场景:

  • 导航条
  • 商品列表等
  • 新闻列表

4) 注意:

  • 其实ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种
    • 但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了
  • ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面
  • 由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
  • 虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签
<h4>课程安排</h4>
<ul>
    <li>
        上午
        <ul>
            <li>HTML5</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>
        下午
        <ul>
            <li>OC</li>
            <li>Swift</li>
        </ul>
    </li>

</ul>
Snip20170614_5.png

2.有序列表(ordered list)

1) 作用: 给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分

<h4>中国房价排行榜</h4>
<ol>
    <li>北京</li>
    <li>上海</li>
    <li>杭州</li>
    <li>广州</li>
    <li>深圳</li>
</ol>

Snip20170614_6.png

2) ol应用场景:

  • xxx排行榜
  • 其实ol应用场景并不多, 因为能用ol做的用ul都能做
  • ul的常见属性start、type属性, 可以修改先导符号的样式和序号

二.定义列表(definition list)

1) 作用:

  • 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述

2) 格式:

  • dt英文definition title, 翻译为定义标题
  • dd英文definition description, 翻译为定义描述信息
<dl>
    <dt>北京</dt>
    <dd>国家的首都</dd>
    <dt>杭州</dt>
    <dd>坑爹,房价上涨最快的地方</dd>
</dl>

![Snip20170614_7.png](http://upload-images.jianshu.io/upload_images/4122543-2d304b7b5f58b8c3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3) dl应用场景:

  • 网站底部相关信息
    • 但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl
Snip20170614_9.png

4) 注意事项:

  • dl是一个组标签, 一定是一坨一坨的出现, 也就是说dtdd标签不能单独存在, 必须包裹在dl里面
  • 由于dldtdd是一个整体, 所以dl里面不推荐包裹其它标签
  • dddtli标签一样是容器标签, 里面可以添加任意标签
  • 定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的一个dt, 所以其它dt相当于没有描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
  • 定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl

三.H系列标签(Header 1~Header 6)

1.作用:

  • 用于给文本添加标题语义
  • 格式:
  • <h1>xxxxxx</h1>

2.注意点:

  • H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
  • H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
  • 被H系列标签包裹的内容会独占一行
  • 在H系列的标签中, H1最大, H6最小
  • 在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)

四.P标签(Paragraph)

1.作用:

  • 告诉浏览器哪些文字是一个段落
  • 格式:
  • <p>xxxxxxxx</p>

2.注意点:

  • 在浏览器中会单独占一行

五.Hr标签(Horizontal Rule)

1.作用:

  • 在浏览器上显示一条分割线
  • 格式:
  • <hr />

2.注意点:

  • 在浏览器中会单独占一行
  • 通过我的观察发现HR标签可以写/也可以不写
    • 如果不写/那么就是按照HTML的规范来编写
    • 如果写上/那么就是按照XHTML的规范来编写.
  • 由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做

六.HTML注释(Annotation)

1.什么是注释?

1.注释格式

``

2.注意点:

  • 被注释的内容不会在浏览器中显示, 注释是写给我们自己看的
    • 注释不能嵌套使用

-->

3.快捷键: ctrl + /

示例代码

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>我是假的,标题7</h7>

<!--我是注释-->
<hr />

<p>告诉浏览器哪些文字是一个段落</p>

<!--下面是分割线-->
<hr />

Snip20170614_10.png

七.img标签(image)

1) 作用:

  • 在网页上插入一张图片

2) 格式:

  • ![image](http://note.youdao.com/favicon.ico)

3) 标签的属性

  • 写在标签中K="V"这种格式的文本我们称之为标签属性
属性名称 作用
src(source) 告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片
alt(alternate) 规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本
title 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
height 设置图片显示的高度
width 设置图片显示的宽度

4) 注意点:

  • img标签添加的图片默认不是占一整行空间
    如果想让图片等比拉伸,只写高度或者宽度即可

5) 示例代码

<!--图片标签-->
![](http://note.youdao.com/favicon.ico)
![有道云笔记](http://note.youdao.com/favicon.ico)
![有道云笔记](http://note.youdao.com/favicon.ico)
![有道云笔记](http://note.youdao.com/favicon.ico)
![有道云笔记](http://note.youdao.com/favicon.ico)
![有道云笔记](http://note.youdao.com/favicon.ico)
<img src="" alt="找不到图片">

5) 运行结果

Snip20170614_12.png

八.br标签(Break)

1) 作用:

  • 让内容换行

2) 格式:

  • <br/>

3) 注意点:

  • br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做

九.a标签(anchor)

1) 格式:

  • <a href="//www.greatytc.com/u/5bd5e9ed569e">我的简书</a>

2) 作用:

  • 用于从一个页面链接到另一个页面

3) 注意事项:

  • 在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
    a标签也叫做超级链接或超链接

4) a标签的属性

属性名称 作用
href(hypertext reference) 指定跳转的目标地址
target 告诉浏览器是否保留原始界面, _blank保留, _self不保留
title 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)

4) 代码示例

<!--a标签-->
<a href="//www.greatytc.com/u/5bd5e9ed569e">我的简书</a>
<a href="//www.greatytc.com/u/5bd5e9ed569e" title="我的简书">我的简书</a>
<a href="//www.greatytc.com/u/5bd5e9ed569e" title="我的简书" target="_blank">我的简书</a>

Snip20170614_13.png

5) base标签和a标签结合使用

  • 如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
    • 格式: <base target="_blank" />
  • 注意事项:
    • base必须嵌套在head标签里面
    • 如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行

6) a标签其它用法

  • 假链接(本质是跳转到当前页面)
    • 格式<a href="#">我的简书</a>
    • 格式<a href="javascript:">我的简书</a>
      • 跳转到当前页面指定位置(锚点链接)
      • 1.格式<a href="#location">跳转到指定位置</a>
      • 2.在页面的指定位置给任意标签添加一个id属性
        • 例如 <p id="location">这个是目标</p>
    • 跳转到指定页面的指定位置
      • 格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
      • 只需要在01-锚点链接.html页面添加一个id位置即可
    • 下载(极力不推荐使用)
      • 例如<a href="girl.zip">下载福利资源<a/>
  • 对HTML5语言有兴趣的同学,给大家极力推荐:江哥的视频HTML5 + 跨平台开发,只是不知道会不会继续更新

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

推荐阅读更多精彩内容

  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,049评论 1 25
  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 2,048评论 1 8
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,524评论 32 459
  • 内容LongLongLong是一种情怀 本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,...
    西巴撸阅读 995评论 0 0