④HTML(2)

最新推荐文章于 2020-07-30 10:44:59 发布

小霍霍IT-CFD

最新推荐文章于 2020-07-30 10:44:59 发布

阅读量133

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/jh_5935/article/details/80303335

版权

Java Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

上杯茶你喝完了吗~~(https://blog.csdn.net/jh_5935/article/details/80302538)来来来，给你续上哦

2.11 HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

大多数浏览器会把表头显示为粗体居中的文本

表格的表头使用 <th> 标签进行定义。

可以加入标题：

 <caption>Monthly savings</caption>

跨行或跨列的表格单元：

  <th colspan="2">Telephone</th>

设定单元边距：

<table border="1" cellpadding="10">

设定单元间距：

<table border="1" cellspacing="10">

这里写图片描述

2.12 HTML列表

HTML 支持有序、无序和定义列表:：
–有序列表：

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

–可以定义不同类别的有序列表：

<ol type="A">
<ol type="a">
<ol type="I">

–自定义列表：

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

2.13 HTML区块

HTML 可以通过 <div> 和 <span>将元素组合起来。

这里写图片描述

2.13.1区块元素

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

2.13.2 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

2.14 HTML布局

网页布局对改善网站的外观非常重要。html布局标签有：
这里写图片描述

2.15 HTML多媒体

Web 上的多媒体指的是音效、音乐、视频和动画。
什么是多媒体？
多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。
多媒体格式？
确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。
多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。
多媒体标签：
这里写图片描述

2.16 HTML插件

插件的功能是扩展 HTML 浏览器的功能。辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。
辅助程序可用于播放音频和视频（以及其他）。

Note    我们可以使用 <video> 和 <audio> 标签来显示视频和音频
<object> 元素定义了在 HTML 文档中嵌入的对象。
该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

<embed> 元素表示一个 HTML Embed 对象 。
<embed> 元素已经出现很长一段时间了，但是在 HTML5 前并未被详细说明，该元素在 HTML 5 页面上会被验证，在 HTML 4 上不会。

2.16.1 HTML音频（Audio）

问题：
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
解决-：

--使用 HTML5 <audio> 元素
下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3
或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。
<audio controls height="100" width="100">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>

2.15.2 HTML视频（Videos）

--使用 <embed> 标签

 问题：
      HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
      如果浏览器不支持 Flash，那么视频将无法播放
      iPad 和 iPhone 不能显示 Flash 视频。
      如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

--使用 <object> 标签

 问题：
      如果浏览器不支持 Flash，将无法播放视频。
      iPad 和 iPhone 不能显示 Flash 视频。
      如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

--使用 HTML5 <video> 元素

以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>
 问题：
      您必须把视频转换为很多不同的格式。
      <video> 元素在老式浏览器中无效。

--最好的 HTML 解决方法

HTML 5 + <object> + <embed>
以下实例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>

2.16 HTML表单

HTML 表单用于收集不同类型的用户输入。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等

表单使用表单标签 <form> 来设置:

<form>
.
input 元素
.
</form>

HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签（input）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮（Radio Buttons）

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框（Checkboxes）

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按钮(Submit Button)
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

2.17 HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。(Submit Button)
Iframe - 设置高度与宽度:

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 移除边框:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe来显示目标链接页面:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

2.18 HTML颜色

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
这里写图片描述

2.19 HTML脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

--HTML <script> 标签

<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

<script>
document.write("Hello World!");
</script>

--HTML<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

JavaScript可以直接在HTML输出:

document.write("<p>这是一个段落。</p>");

JavaScript事件响应:

<button type="button" onclick="myFunction()">点我！</button>

JavaScript处理 HTML 样式:

document.getElementById("demo").style.color="#ff0000";

2.20 HTML字符实体

HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换
这里写图片描述

2.21 HTML 统一资源定位器(Uniform Resource Locators)

URL 是一个网页地址。
URL可以由字母组成，如”https://blog.csdn.net/jh_5935“，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。
URL - 统一资源定位器:

scheme://host.domain:port/path/filename

说明:
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
URL - 统一资源定位器:

常见的 URL Scheme:
这里写图片描述