您的位置：首页 > Web前端 > HTML5

02 HTML学习---HTML5保留的常用元素

2019-06-14 20:50 417 查看

02 HTML学习---HTML5保留的常用元素

  • 列表相关元素
  • img图像元素
  • 表格相关元素
  • HTML5增强的iframe元素

    • 基本元素

    1、HTML注释

      HTML注释的基本语法格式如下：

    <!-- 这里是注释的内容 -->

    2、html标签

      这是HTML5的根元素，但是HTML允许忽略这个元素。

    3、head标签

      这是用来定义HTML5文档的页面头部分，但是HTML5允许完全忽略这个元素。

    4、title

      这个标签是用来定义HTML5文档的页面标题。

    5、body

      这个标签是用来定义HTML5的页面主体部分。

    6、h1~h6

      这个标签组里的标签是用来定义标题1~6

    7、br

      这个标签用来插入一个换行。

    8、hr

      这个标签用来定义一条水平线，该元素在HTML5中还代表主题结束的语义。

    9、span、div和p

    • p元素用来表示段落
    • div用来定义文档中的节
    • span元素与div元素基本相似，区别是span只代表一般性文字，该元素文本内容默认不换行。

    span、p和div的比较

    • 都作为其他内容的容器，容纳文本和其他内容
    • 默认情况下，span不会导致换行，而div会导致换行，p会产生一个段落，段落之间有更大的间距
    • span和p只能包含文本、图像、超链接、文本格式化元素和表单控件元素，p可以包含span，但是span不能包含p
    • div除了可以包含p和span外还能包含更多的内容，正是因为div可以包含各种各样的内容，所以滥用div导致语义的清晰性下降，为了避免这种情况，HTML5推荐使用结构文档元素，如article、section和nav等

    案例

    <!DOCTYPE html>
<html>
<head>
<title>基本元素</title>
<meta charset="utf-8">
</head>
<body>
<!-- 下面是H1-H6标签 -->
<h1>这里是标题1</h1>
<h2>这里是标题2</h2>
<h3>这里是标题3</h3>
<h4>这里是标题4</h4>
<h5>这里是标题5</h5>
<h6>这里是标题6</h6>
<!-- 下面是一条分割线 -->
<hr>
<!-- 下面是三个段落 -->
<p>这里是段落1</p>
<p>这里是段落2</p>
<p>这里是段落3</p>
<!-- 下面是三个span元素 -->
<span>这里是span1</span>
<span>这里是span2</span>
<span>这里是span3</span>
<!-- 下面是2个换行 -->
<br>
<br>
<!-- 下面是三个div片段 -->
<div>这里是div1</div>
<div>这里是div2</div>
<div>这里是div3</div>
</body>
</html>

    文本格式化元素

      下面元素可以让文本内容在浏览器中呈现出特定效果，这些文本格式化元素能够包含文本、图像、超链接、文本格式化元素和表单控件元素，可以和span元素相互包含。

    1、b和strong

    ​  都是用来定义粗体文本，用法也基本一致，只是HTML5给strong元素增加了语义，用来表示重要的文本。

    2、i和em

      都是用来定义斜体文本，但是HTML5给em添加了语义，表示强调的文本。

    3、small

      定义小号文本字体，专门用于标识所谓的小字印刷体，通常用来标注诸如免责声明、注意事项、法律规定和版权相关的声明性文字。

    4、sub和sup

      上下标文字，sub用来定义下标文字，sup用来定义上标文字

    5、bdo

      定义文本显示的方向：

    属性名称 属性值
    dir ltr：文字从左向右
    rtl：文字从右向左

    案例

    <body>
<b>这里是b加粗的文字</b><br>
<strong>这里是strong的加粗文字</strong><br>
<i>这里是斜体文字i</i><br>
<em>这里是em的斜体文字</em><br>
<small>这里是small的小号字体</small><br>
正常字体<sub>下标字体</sub><br>
正常字体<sup>上标字体</sup><br>
<bdo dir="ltr">从左向右排列的文字</bdo><br>
<bdo dir="rtl">从右向左排列的文字</bdo>
</body>

    语义相关的元素

    1、abbr

    ​  用于表示一个缩写，使用该元素时候通常建议指定title属性，该属性用于指定该缩写代表的全称。

    属性 属性值说明
    title 是一个字符串，用来指定该缩写代表的全称，当鼠标放在上面的时候就会显示全称

    2、address

      用于表示一个地址，浏览器通常会使用斜体字显示address所包含的文本。

    3、blockquote和q

      都是用来定义一段引用文本。

    • blockquote：用来定义一段长的、换行的引用文本，浏览器会使用缩进的方式显示这段被引用的文本

      属性 属性值说明
      cite 一个字符串，用于指定该引用文本所引用的网址的URL地址或者出处

    • q：用于定义一段短的、不换行的引用文本，浏览器会为这段被引用的文本添加引号

    4、cite

      用于表示作品（一本书、电影、歌曲）的标题，通常浏览器会使用斜体字显示cite所包含的文本。

    5、code

      用来表示一段代码。

    6、dfn

      用来表示一个专业术语，浏览器通常会用粗体或者斜体显示dfn所包含的文本。

    7、del和ins

      del用来表示一段被删除的文本，浏览器会以中划线的形式显示del包含的文本；ins用来表示一段插入的文本，浏览器通常会以下划线的形式显示ins包含的文本。两个元素都有的属性：

    属性 属性值说明
    cite 该属性值为一个URL，该URL对应的文本解释了文本被删除或插入的原因。
    datetime 定义文本被删除或插入的日期、时间

    8、pre

      用来表示该元素所包含的文本已经进行预格式化，也就是说pre元素所包含的文本的空格、回车、tab键和其他格式化字符都会被保留下来，但是浏览器还是会处理pre元素内的大部分HTML元素。

    9、samp

      用于定义示范文本内容，默认以小字体显示内容。

    10、kbd

      用于定义键盘文本，该元素用于表示文本是通过键盘输入的，通常在计算机使用文档、使用说明中经常会使用该元素。

    11、var

      用于表示一个变量，浏览器通常会用斜体表示var包含的文本。

    <body>
<abbr title="超文本标记语言">HTML</abbr><br>
公司的地址是：<address>黄埔路2号</address><br>
<blockquote>
白日依山尽，黄河入海流。<br>
欲穷千里目，更上一层楼。<br>
</blockquote>
<q>HTML</q>是超文本标记语言<br>
四大名著：<cite>《红楼梦》</cite>、<cite>《三国演义》</cite>、<cite>《水浒传》</cite>
、<cite>《西游戏》</cite><br>
<code>
public static void main(String[] args){ <br>
private string name = '张三';<br>
}
</code><br>
<dfn>HTML</dfn>是超文本标记语言<br>
<del>这是一段删除的文本</del><br>
<ins>这是一段插入的文本</ins><br>
<pre>
public static void main(String[] args){
private string name = '张三';
}
</pre><br>
<samp>这里是示范文本</samp><br>
Linux命令：<kbd>ls -l</kbd><br>
<var>i</var>、<var>j</var>是常用来循环的变量。
</body>

    使用a元素添加超链接和锚点

       HTML5保留了a元素，主要属性如下：

    属性 属性值说明
    href 指定超链接所链接的另一个资源
    hreflang 指定超链接所链接的文档所使用的语言
    target 指定使用框架集中的哪个框架装载另外一个资源，该属性可以是_self、_blank、_top、_parent四个值，分别代表自身、新窗口、顶层框架、父框架来加载资源
    download 用于让用户下载目录链接所指向的资源，而不是直接打开目标链接，该属性的属性值指定用于保存下载资源时候默认的文件名
    type 指定连接文档的MIME类型
    media 指定目标URL所引用的媒体类型，默认是all，只有当指定了href属性时该属性才有效

    注意：download、type、media是HTML5新增的属性

    普通地址链接

       a元素可以包含文本、图像、各种文本格式化元素和表单元素等内容：

    <body>
<!-- 加粗地址，在本窗口打开 -->
<a href="http://www.baidu.com"><strong>百度</strong></a>
<br>
<!-- 斜体，在新的窗口打开 -->
<a href="http://www.baidu.com" target="_blank"><em>百度</em></a>
<!-- 图片 -->
<a href="http://www.baidu.com"><img src="./bd_logo1.png"></a><br>
<!-- 本地网址 -->
<a href="./01 演示面向对象.html">本地网址</a>
</body>

    下载文件

      当a标签指定了download属性，可以控制让用户下载目录链接所指向的资源，而不是直接打开目标链接，download属性指定了目标资源另存为的文件，如：

    <body>
<a href="bd_logo1.jpg" download="bd_logo1.jpg" type="image/jpeg">下载文件</a>
</body>

    锚点定位

      ​a元素还可以生成一个命名锚点，命名锚点用于在HTML页面中生成一个定位点，这样允许超链接直接连接到指定页面的定位点。插入定位点需要指定name属性，name属性值就是该命名锚点的名称，指定命名锚点的格式：

    • 当前页面：href="#锚点名"
    • 指向其他特定页面的：href=“页面地址#锚点名”
    <body>
<a href="#test">指定本页面中的锚点</a>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<!-- 这里定义了一个命名锚点 -->
<a name="test">锚点的地址</a>
</body>

      ​除了通过name属性来设置命名锚点，还可以通过id来定位锚点：

    <body>
<a href="#test">指定本页面中的锚点</a>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<!-- 这里定义了一个命名锚点 -->
<span id="test">锚点指向的地址</span>
</body>

    列表相关元素

    无序列表

       ul用于定义无序列表，该元素只能包含li子元素，li用来定义列表项，该元素可以包含和div完全类似的内容：

    <body>
<ul>
<li>第1排数据</li>
<li>第2排数据</li>
<li>第3排数据</li>
<li>第4排数据</li>
</ul>
</body>

    有序列表

      ol定义有序列表，该元素只能包含li子元素，ol元素可以包含下面三个属性：

    属性 属性值说明
    start 指定列表的起始数字，默认是第一个，如1、A等
    type 指定使用哪种类型的编号，默认1代表数字，A或者a代表大小写字母，I或者i代表大小写罗马数字，该熟悉HTML5不推荐使用，推荐使用CSS
    reversed 是否反序排列 
    <body>
<ol>
<li>第1排数据</li>
<li>第2排数据</li>
<li>第3排数据</li>
</ol>
<ol type="A">
<li>第1排数据</li>
<li>第2排数据</li>
<li>第3排数据</li>
</ol>
<ol start="3">
<li>第1排数据</li>
<li>第2排数据</li>
<li>第3排数据</li>
</ol>
<ol reversed>
<li>第1排数据</li>
<li>第2排数据</li>
<li>第3排数据</li>
</ol>
</body>

    术语列表

      dl用于定义术语列表，该元素只能包含dt和dd两个子元素。

    • dt：用于定义术语列表的标题列表项，该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素
    • dd：定义普通列表项，可以包含与div完全类似的内容

      dl列表可以包含多个列表项，dt用于定义标题，一个dl可以包含多个dt，但是多个术语不允许重复；每个dt元素后面可以跟着一个或者多个dd元素，dd元素内容用于对指定的标题进行说明：

    <body>
<dl>
<dt>Java</dt>
<dd>Java是一门广泛使用、跨平台的开发语言</dd>
<dt>疯狂Java体系图书</dt>
<dd>疯狂Java体系图书是由李刚十年创建的。</dd>
<dd>疯狂Java体系图书已经得到广泛的市场认同。</dd>
</dl>
</body>

    img图像元素

      HTML5保留了img元素在页面中定义图片，这个元素只能是一个空元素，不可以包含任何内容，必须包含下面的属性：

    属性 属性值
    src 该属性定义了图片文件所在的位置，可以是绝对路径或者相对路径
    alt 该属性定义了一段文本，该文本作为该图片的提示信息
    height 指定图片的高度，可以是百分比或者像素
    width 指定图片的宽度，可以是百分比或者像素

    注意：如果这两个属性只指定一个，另外一个会根据图片原有比例重新计算

    简单的加载图片

    <body>
<img src="./bd_logo1.png" alt="百度logo" width="100px">
<a href="http://www.baidu.com">
<img src="./bd_logo1.png" alt="百度" width="100px">
</a>
</body>

    分区链接图片

      HTML5提供了下面几个元素，实现图像的分区链接的功能：

    • map：用于定义图片映射，该元素主要可以包含一个或者多个area子元素，每个area子元素定义了一个区域，不同的区域可以链接到不同的URL
    • area：用于定义图片映射的内部区域，该元素是一个空元素，该元素的主要属性如下
    属性 属性值
    shape 指定内部区域是哪种区域，默认是rect矩形区域，除此之外还可以是circle和poly，分别代表圆形或者多边形
    cords 指定多个坐标值，用于确定区域位置
    href 指定该区域所链接的资源
    alt 指定一段文本，该文本作为图片的提示信息
    target 指定哪种方式装载资源

      一旦使用了map元素定义了图片映射之后，就可以让图片使用该图片映射，通过img元素的usermap属性让该图片使用图片映射，设置usermap属性值为#mapname就可以了，这个mapname是map元素的name属性值，如下案例：

    <body>
<img src="./bd_logo1.png"
alt="百度logo" width="300" height="120" usemap="#test">
<map name="test">
<area shape="circle" coords="57,55,25" href="http://www.baidu.com" >
<area shape="poly" coords="188,28,185,50,200,74,224,72,246,51" href="http://www.qq.com">
</map>
</body>

    提交图片的点击坐标

      将图片放在a元素内就可以创建带链接的图片，此时如果为img元素指定ismap属性，当用户点击目标的时候，会将用户点击图片的坐标也提交给服务器：

    <body>
<a href="http://www.baidu.com">
<img src="./bd_logo1.png" width="100px" ismap>
</a>
</body>

    表格相关元素

    创建表格

      表格相关的元素有下面几个：

    • table：用于定义表格，table只能包含0个或者1个caption子元素，0个或者1个thead子元素，多个tr子元素，多个tbody子元素，具有下面几个属性：

      属性 属性值
      cellpadding 指定单元格内容和单元格边框之间的间距，可以是像素或百分比
      cellspacing 指定单元格之间的间距，可以是百分比或者像素
      width 指定表格宽度，可以是像素值或者百分比

    • caption：用于定义表格标题，该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等。

    • tr：定义表格行，只能包含td和th两种元素

    • td：定义单元格，该元素和div元素一样，可以包含各种类型的子元素，包括在td元素里面包含table子元素插入一个表格，该元素可以指定的属性：

      属性 属性值
      colspan 指定该单元格跨多少列
      rowspan 指定该单元格跨多少行
      height 指定该单元格的高度
      width 指定该单元格的宽度

    • th：定义表格的表头单元格，和td几乎一样，只是浏览器呈现的时候不一样

    • tbody：定义表格的主题，该元素只能包含tr子元素

      使用tbody元素可以将一个表格分为几个独立部分，可以将表格中的一行或者多行合并成一组，尤其是使用JavaScript前段编程时经常需要动态修改表格中的某行，这就需要tbody元素了。tbody元素必须使用tr来定义表哥行，tbody不会输出任何内容，一旦使用tbody定义为一组，一个tbody就是表格中的一个独立部分，不能从一个tbody跨越到另外一个tbody。

    • thead：定义表格的头，用于基本与tbody相似

    • tfoot：定义表格脚，用于基本与tbody相似

    <body>
<table style="width: 400px;" border="1">
<caption>表格的标题</caption>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">这里是表格脚</td>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2">跨2行的单元格</td>
<td>普通单元格</td>
</tr>
<tr>
<td>普通单元格</td>
</tr>
<tr>
<td colspan="2">跨2列的单元格</td>
</tr>
</tbody>
</table>
</body>

    设置表格的整体属性

      如果需要在页面中给表格的某列整体设置属性，可以使用下面两个元素：

    • col：该元素用于为表格的一列或者多列，指定属性，该元素只能在table或colgroup元素内。col不会产生任何表格列，只是用来给指定的整体列指定列属性，因此，一旦在table中使用col为表格指定列属性，col表格定义的列数就应该和表格内实际的列数相等。
    • colgroup：该元素用于为表格中的一个或者多个列指定列属性值，该元素通常定义在table元素内，只是用于组织多个col元素
    <body>
<table style="background-color:black;border-collapse:separate;
border-spacing: 1px;">
<caption>表格的标题</caption>
<colgroup style="background-color: white;">
<!-- 设置第一行列宽 -->
<col style="width: 160px;">
<!-- 设置后两列宽度 -->
<col style="width: 100px;" span="2">
</colgroup>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>普通单元格</td>
<td>普通单元格</td>
<td>普通单元格</td>
</tr>
</tbody>
</table>
</body>

    HTML5增强的iframe元素

      HTML5不推荐使用框架集，只保留了iframe元素。该元素可以在普通的HTML页面中使用，用于生成一个行内框架，可以放在HTML页面的任何位置，除了通用属性外，还可以指定下面的属性：

    属性 属性值
    src 指定一个URL地址，指定该框架加载哪个页面
    name 指定iframe的名字
    longdesc 该属性也是指定一个URL，该页面包含了关于该iframe的长描述
    scrolling 设置是否在iframe中显示滚动条，值为yes、no、auto
    height iframe的高度
    width iframe的宽度
    frameborder 是否显示iframe的边框
    marginheight 设置iframe的顶部和底部的页边距
    marginwidth 设置iframe左侧和右侧的页边距

      HTML5为增强iframe新增了下面的属性：

    属性 属性值说明
    srcdoc 允许直接指定HTML片段，如果浏览器暂时不支持srcdoc的属性，那么将会继续显示src属性所指向的页面
    seamless 该属性的值是boolean类型，指定了该属性的iframe所生成的框架看上去像是原文档的一部分，不再显示边框和滚动条
    sandbox sandbox是一个安全性方面的属性，用于对框架集中的页面增加一系列的额外限制。如果不指定该属性，则iframe加载的网页不受任何限制，该属性可以同时指定多个（使用空格隔开）：
    ""：全部限制
    allow-forms：允许框架内的表单进行提交，通常需要和allow-same-origin属性结合使用
    allow-same-origin：允许框架内所加载的网页视为与使用该iframe元素的页面来自相同的源
    allow-scripts：允许将框架内所加载的网页执行JavaScript脚本
    allow-top-navigation：允许将框架内所加载网页中的超链接导航到父级窗口
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航