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. 【自动化测试】Xpath学习

    http://www.cnblogs.com/cbcye/archive/2009/03/14/1411291.html http://www.cnblogs.com/cbcye/archive/20 ...

  2. 如何在vmware上创建共享磁盘

    1.先在你本机的vmware安装目录上找到 vmware-vdiskmanager.exe 执行文件. 我的目录是 d:\vmware\vmware-vdiskmanager.exe 再用cmd终端( ...

  3. PHP Framework安装

    Framework 1> 初始化 前提:服务器上已经装有 Apache/Nginx 和 MySQL 进入 hush-framework/hush-app/bin 目录(Linux 下需执行 ch ...

  4. oracle 组函数

    一.组函数嵌套 ORACLE中规定,组函数嵌套只能嵌两层.其实多层嵌套并没有实际的用途,因此ORACLE没有提供组函数的多层嵌套.但是,单行函数是可以多层嵌套的. 二. 1.Oracle包含以下组函数 ...

  5. Java 设计模式学习总结(上)

    在编写和维护公司的现有代码的时候,我经常思考的问题是:怎样的系统算一个好的系统?如何设计具有扩展.可维护.复用的系统,它能最大限度的应对产品经理不断变化的需求.答案似乎是:设计模式. Remember ...

  6. FreeMarker笔记 第四章 其它

    4.1 自定义指令 4.1.1 简介 自定义指令可以使用macro指令来定义.Java程序员若不想在模板中实现定义指令,而是在Java语言中实现指令的定义,这时可以使用freemarker.templ ...

  7. mac配置appium进行自动化测试

    先去brew.sh这个网站,拷贝最新的下载安装命令,黏贴到终端里,回车,按提示下载安装. 安装完毕后,运行brewupdate 看看是否有更新,然后输入brew ios-webkit-debug-pr ...

  8. JavaScript对象(document对象 图片轮播)

    图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  9. Matlab命令——目录操作(windows&Linux)

    Matlab命令——目录操作(windows&Linux) 1. filesep用于返回当前平台的目录分隔符,Windows是反斜杠(\),Linux是斜杠(/).有时此命令结合ispc命令使 ...

  10. qt信号signal和槽slot机制

    内容: 一.概述 二.信号 三.槽 四.信号与槽的关联 五.元对象工具 六.程序样例 七.应注意的问题 信号与槽作为QT的核心机制在QT编程中有着广泛的应用,本文介绍了信号与槽的一些基本概念.元对象工 ...