http://www.imooc.com/learn/9

1、em/strong

如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签。

但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。

2、span

我们对<em><strong><span>这三个标签进行一下总结:

2.1. <em><strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调。

2.2. <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。

如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue(蓝色),但注意不是为了强调“美国梦”,而只是想为它设置和其它文字不同的样式(并不想让屏幕阅读器对“美国梦”这三个字加重音读出),所以这样情况下就可以用到<span>标签了。

3、q

想在你的html中加一段引用吗?比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。

语法:

<q>引用文本</q>

注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

注意这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话

4、blockquote

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。

等等,上一节<q>标签不是也是对文本的引用吗?不要忘记<q>标签是对简短文本的引用,比如说引用一句话就用到<q>标签。

如想在我的文章中引用李白《关山月》中的诗句,因为引用文本比较长,所以使用<blockquote>

语法:

<blockquote>引用文本</blockquote>

5、&nbsp;

在上一节的例子,我们已经讲解过在html代码中输入空格回车都是没有作用的。要想输入空格,必须写入&nbsp;

语法:

&nbsp;

6、hr

在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。

注意:

6.1. <hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。

6.2. <hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。

6.3. 大家注意,现在一般使用 xhtml1.0 的版本(其它标签也是),这种版本比较规范。

7、address

一般网页中会有一些地址信息需要在网页中展示出来,这些地址信息如公司的地址就可以<address>标签。

语法:

<address>地址信息</address>

在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用css样式来修改它<address>标签的默认样式。

8、code

在介绍语言技术的网站中,必免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子:

<code>var i=i+300;</code>

注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。

语法:

<code>代码语言</code>

9、pre

在上节中介绍加入一行代码的标签为<code>,但是在大多数情况下是需要加入大段代码的,

怎么办?不会是每一代码都加入一个<code>标签吧,没有这么复杂,这时候就可以使用<pre>标签。

语法:

<pre>语言代码段</pre>

<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

在上面的例子中可以看到代码中的空格,换行符都保留下来。如果用以前的方法,回车需要输入<br>签,空格需要输入&nbsp;

注意:<pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

10、caption

表格还是需要添加一些标签进行优化,可以添加标题摘要

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法:<table summary="表格简介文本">

标题

用以描述表格内容,标题的显示位置:表格上方。

11、a mailto

<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto

12、select

selected="selected"

设置selected="selected"属性,则该选项就被默认选中。

在<select>标签中设置multiple="multiple"属性,就可以实现多选功能

13、label

标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

重学HTML的更多相关文章

  1. 重学hadoop技术

    最近因为做了些和hadoop相关的项目(虽然主要是运维),但是这段经历让我对hadoop的实际运用有了更加深入的理解. 相比以前自学hadoop,因为没有实战场景以及良好的大数据学习氛围,现在回顾下的 ...

  2. Java集合类简单总结(重学)

    java集合类简介(重学) 一.Collection(集合).Map接口两者应该是平行关系吧. 1.Map介绍 Map是以键值(key-value)对来存放的,2个值.通过key来找到value(例: ...

  3. 重学OpenGL(一)----工具篇

    最近想开发一个小工具,需要用到3D,果断上OpenGL,借这个过程把OpenGL重学一遍. 工欲善其事,必先利其器,先把工具都搞好. [开发语言] 果断C+OpenGL,不解释. [开发环境] Min ...

  4. 重学C++ (1)

    写在开头的话:这学期没有写太多的代码,终于把中英文两篇论文弄完了,趁着中间的空隙,想想找工作的处境.自己也定了自己的方向.不管学什么语言吧,每个语言都有自己的优势和使用的群体.只要自己是良马,终会有伯 ...

  5. 推翻自己和过往,重学自定义View

    http://blog.csdn.net/lfdfhl/article/details/51671038 深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 A ...

  6. 重学C语言---01概述

    1.什么是C语言 C语言是一种计算机程序设计语言,它既具有高级语言的特点,又具有汇编语言的特点.计算机语言是从第二次世界大战以后,经历了戏剧性的发展过程.从机器语言到汇编语言和高级语言.C语言是与硬件 ...

  7. 【重学计算机】操作系统D3章:存储管理

    1. 存储管理的基本概念 逻辑地址:用户地址,从零开始编号 一维逻辑地址:(地址) 二维逻辑地址:(段号: 段内地址) 主存储器的复用方式 按分区:主存划分为多个固定/可变分区,一个程序占一个分区 按 ...

  8. 【重学计算机】操作系统D1章:计算机操作系统概述

    1. 计算机软硬件系统 冯诺伊曼结构 以运算单元为核心,控制流由指令流产生 程序和数据存储在主存中 主存是按地址访问,线性编址 指令由操作码和地址码组成 数据以二进制编码 其他:参考<重学计算机 ...

  9. 重学前端 --- Promise里的代码为什么比setTimeout先执行?

    首先通过一段代码进入讨论的主题 var r = new Promise(function(resolve, reject){ console.log("a"); resolve() ...

  10. 重学Java(一):与《Java编程思想》的不解之缘

    说起来非常惭愧,我在 2008 年的时候就接触了 Java,但一直到现在(2018 年 10 月 10 日),基础知识依然非常薄弱.用一句话自嘲就是:十年 IT 老兵,Java 菜鸡一枚. 于是,我想 ...

随机推荐

  1. 【Python】类和对象、继承、使用文件、存储、异常、标准库(不懂)

    当你调用这个对象的方法MyObject.method(arg1, arg2)的时候,这会由Python自动转为MyClass.method(MyObject, arg1, arg2)——这就是self ...

  2. Android Studio你不知道的调试技巧

    写代码不可避免有Bug,通常情况下除了日志最直接的调试手段就是debug:那么你的调试技术停留在哪一阶段呢?仅仅是下个断点单步执行吗?或者你知道 Evaluate Expression, 知道条件断点 ...

  3. shell脚本中一些特殊符号

    在shell中常用的特殊符号罗列如下: # ;   ;; . , / \\ 'string'| !   $   ${}   $? $$   $* \"string\"* **   ...

  4. Asp.net 身份验证方式?

    [Forms 身份验证] 通过其可将没有通过身份验证的请求重定向到使用 HTTP 客户端重定向的 HTML 窗体的系统.用户提供凭据并提交该窗体.如果应用程序验证该请求,系统就会发出包含凭据或密钥的 ...

  5. How do I list all tables/indices contained in an SQLite database

    How do I list all tables/indices contained in an SQLite database If you are running the sqlite3 comm ...

  6. 基于Web的数据推送技术(转)

    基于Web的数据推送技术 对于实时性数据显示要求比较高的系统,比如竞价,股票行情,实时聊天等,我们的解决方案有以下几种.1. HTTP请求发送模式,一般可以基于ajax的请求,比如每3秒一次访问下服务 ...

  7. JS操作文件

    ) ;   ;   fso );   f1.Close();   // 读取文件的内容.  // Response.Write("Reading file <br>") ...

  8. IT智力题

    题目1:你让工人为你工作7天,给工人的回报是一根金条.金条平分成相连的7段,你必须在每天结束时给他们一段金条,如果只许你两次把金条弄断,你 如何给你的工人付费? 答案:两次弄断就应分成三份,我把金条分 ...

  9. C#控件前缀命名规范

    标准控件 1  btn Button 2  chk CheckBox 3  ckl CheckedListBox 4  cmb ComboBox 5  dtp DateTimePicker 6  lb ...

  10. js遇到这样基础题,看你能不能作对呢

    var a = (function() { return typeof arguments; })(); alert(a); //Object var b = (function(x) { delet ...