本文共 5607 字,大约阅读时间需要 18 分钟。
今天初步了解一下HTML5的常用元素和属性,如果大家觉得写的不错的话,可以点击右上角的关注,我会持续更新博客的,谢谢。
HTML5保留的常用元素
&(保留的)基本元素、&文本格式化元素、&语义相关元素、&超链接和锚点、&列表相关元素、&表格相关元素
HTML注释 Html文档的根元素 页面头部分页面标题 页面主体,这个标签还可以指id,class,style,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup等属性,这些属性用于指定Javascript脚本。
注意:由于<div../>元素的滥用,导致HTML页面中语义的清晰性下降,为了避免这种情况,HTML5规范推荐HTML5的文档结构元素如:<article../>、<section.../>、<nav.../>等代替<div../>。
<b>:定义粗体wenben |
<i>:定义斜体文本 |
<em>:定义强调文本 |
<strong>:定义粗体文本 |
<small>:定义小号字体文本 |
<sup>:定义上标文本 |
<sub>:定义下标文本 |
<bdo>:定义文本显示的方向 |
代码示例:
加粗文本斜体文本粗斜体文本被强调的文本加粗文本
小号字体文本普通文本 上标文本普通文本下标加粗文本 从左向右排列的文本 从右向左排列的文本
效果图:
如果需要对文本进行更丰富的样式的格式化,则建议使用CSS样式单,后续我会为大家讲解HTML5保留了如下语义相关元素。
<abbr>:用于表示一个缩写。使用该元素时通常建议指定title属性,该元素用于指定该缩写所代表的全称。 |
<address>:用于表示一个地址。浏览器通常会用斜体字显示<address.../>所包含的文本。 |
<blockquote>:用于定义一段长的引用文本。浏览器会使用缩进的方式显示这段被引用的文本。 |
使用<blockquote.../>元素时可指定cite属性,该属性用于指定该引用文本所引用的网址URL或出处。 |
<q>:用于定义一段短的引用文本。浏览器会为这段被引用文本添加引号。 |
<cite>:用于表示作品(一本书、一部电影、一首歌)的标题。常常浏览器会用斜字体显示<cite../>所包含的文本。 |
<code>:用于表示一段计算机代码。 |
<dfn>:用于定义一个专业术语。浏览器通常会用粗体或斜字体显示<dfn../>所包含的文本。 |
<del>:定义文档中被删除的文本。浏览器通常会以画线形式显示<del>包含的文本。 |
<ins>:定义文档中插入的文本。浏览器通常会以画线形式显示<ins>包含的文本。 |
<pre>:用于表示该元素所包含的文本已经进行了预格式化。也就是说, |
<pre.../>元素所包含文本中的空格、回车、Tab键和其他格式字符都会被留下来,但浏览器会处理<pre.../>元素内大部分HTML元素。 |
<samp>:用于定义示范文本内容。 |
<kbd>:用于定义键盘文本。该元素用于表示文本是通过键盘输入。通常在计算机使用文档。使用说明中会经常使用该元素。 |
<var>:用于表示一个变量。浏览器通常会用斜体字显示<var../>所包含的文本。 |
代码示例:
疯狂Java的精神是
疯狂源自梦想,技术成就辉煌这也是所有疯狂Java程序员的精神。锦瑟无端五十弦,一弦一柱思华年。 庄生晓梦迷蝴蝶,望帝春心托杜鹃。 沧海月明珠有泪,蓝田日暖玉生烟。 此情可待成追忆,只是当时已惘然。是唐朝诗人李商隐的代表作,诗中隐藏中一种淡淡的忧伤,让人无法言说,但又无以谴怀。《芙蓉镇》、《蓝风筝》是国内导演拍摄的很有思考深度的两部电影。
下面代码定义了一个Java类:
public class Cat { private int name = "garfield"; }
public class Cat { private int name = "garfield"; }
代码效果:
下面的页面片使用了<abbr../>、<adddress.../>、<code.../>等语义相关的元素来定义HTML页面。疯狂Java教育中心的缩写是fkjava。 疯狂软件地址是广州市天河区车陂大岗路4号沣宏大厦3006-3011HTML是一种广为人知的标记语言。
可通过输入如下命令:
list -l在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。如果您在阅读疯狂Java体系图书时,遇到有任何无法理解的技术问题,
请登录www.fkjava.org发帖提问,可按如下示例内容发帖: 我在阅读XXX图书的第X章、第X节时,遇到一个XXX问题,错误提示信息是:XXX。 i、j、k通常用于作为循环计数器变量。Android是一个
开发开放式的手机、平板电脑操作系统
效果图:
HTML页面使用超链接与网络上的另一个资源保持关联,当用户点击页面上的超链接时,浏览器会导航到超链接所值的资源。<a>元素还有如下6个重要的属性:
href:指定超链接所链接的另外一个资源。 |
hreflang:指定超链接所链接的文档所使用的语言。 |
target:指使用框架集中的哪一个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、__parent四个值,分别表示自身、新窗口、顶层框架、父框架来装载新资源。 |
type:指定被链接文档的MIME类型。 |
media:指定目标URL所引用的媒体类型。默认值为all。只要当指定了href属性时该属性才有效。 |
--------------download、type、media是HTML5新增的属性
<a.../>元素主要可以包含文本。图像。各种文本格式化元素和表单元素等内容。
下面定义了四个超链接。
疯狂Java联盟 疯狂Java联盟 文本格式化元素
上面的代码定义了四个超链接,分别是粗体字超链接、斜体字超链接、图像超链接和普通超链接,单击前三个超链接中任意一个,浏览器将导航到--疯狂Java联盟--站点;单击最后一个则会链接到text.html。当使用<a.../>元素时,href属性值既可以是绝对路径,也可以是相对路径当指定绝对路径时,href属性值为URL(Uniform Resource Locator,统一资源定位符),URL用于对互联网上的文档(其他资源)进行寻找,
超链接 疯狂Java联盟 疯狂Java联盟 文本格式化元素
点击图片,它并没有打开logo.jpg,而是下载logo.jpg图片,并且默认文件名为:疯狂Java 联盟.jpg,这就是download的作用
此外,<a>元素还可以生成一个命名锚点,在HTML页面中生成一个定位点,这样允许超链接直接链接到指定页面的该定位点。
超链接 定位到test锚点aaaaaaaaaaaaaaaaa testaaaaaaaaaaaaaaaaa
列表相关元素 定义反序的有序列表
- 疯狂Java讲义
- 轻量级Java EE企业应用实战
- 疯狂Android讲义
定义从3开始的有序列表
- 疯狂Java讲义
- 轻量级Java EE企业应用实战
- 疯狂Android讲义
定义使用小写字母编号的有序列表
- 疯狂Java讲义
- 轻量级Java EE企业应用实战
- 疯狂Android讲义
定义使用小写罗马数字、从4开始的有序列表
- 疯狂Java讲义
- 轻量级Java EE企业应用实战
- 疯狂Android讲义
列表相关元素 dt定义标题、dd定义解释
1.<table>:用于定义表格,有如下属性
2.<caption>:用于定义表格标题,该元素只能包含文本、图片、超链接、文本格式化元素和表单控件元素。
3.<tr>:定义表格行
4.<td>:定义单元格
5.<th>:定义表格的表头单元格,和<td>元素的用法几乎一模一样,只是浏览器呈现时有一定的差别。
6.<tbody>:定义表格的主体。
7.<thead>:定义表格头。
8.<tfoot>:定义表格脚。
代码示例:
带tbody的表格
书名 | 作者 | |
---|---|---|
现总计:4本图书 | ||
Java体系 | Java讲义 | 李丽 |
轻量级Java EE企业应用实战 | 李刚 | |
iOS体系 | Swift讲义 | 李庭 |
疯狂iOS讲义 | 李框 |
如果决定使用<tbody>和<tfoot>元素,只能在<table>元素内使用,并且要按照顺序来,除此之外,如果需要在页面中为某列整体指定属性,HTML5中有这两个元素:
<col> | 用于表格中的一个或多个列指定属性值,还可以指定span属性,用于指定该列可横跨多少列 |
<colgroup> | 用于表格中的一个或多个指定的属性值,它的作用只是用于多个<col>元素 |
在<table>中使用<col>为表格指定属性,那么<col>定义的表格列数就应该与表格内实际包含的列数相等。
带col的表格 通过CSS设置表格背景色为黑色,单元格之间的间距为1px 通过设置背景色为黑色可以实现边框效果
书名 | 作者 | 价格 |
---|---|---|
现总计:2本图书 | ||
Java讲义 | 李丽 | 109 |
轻量级Java EE企业应用实战 | 李刚 | 89 |
---------------------------如果大家喜欢我的博客,可以点击左上角的关注