HTML

最新推荐文章于 2024-04-20 20:25:59 发布

空然然后

最新推荐文章于 2024-04-20 20:25:59 发布

阅读量423

点赞数

分类专栏：笔记文章标签： html html5 linq

本文链接：https://blog.csdn.net/m0_58192064/article/details/123305806

版权

笔记专栏收录该内容

21 篇文章 2 订阅

订阅专栏

一、HTML简介

1.1 HTML标签

HTML 标记标签通常被称为 HTML 标签 ( HTML tag )。

HTML 标签是由 尖括号 包围的关键词，比如<html>
HTML 标签通常是 成对出现 的，比如<b>和</b>
标签对中的第一个标签是开始标签，第二个标签是 结束标签
开始和结束标签也被称为开放标签 和 闭合标签
<标签>内容</标签>

1.2 HTML元素

>"HTML 标签" 和 "HTML 元素" 通常都是描述相同的意思。HTML 文档由 HTML 元素定义，HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

如下实例:

HTML 元素:

<p>这是一个段落。</p>

>HTML元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

>HTML 文档由嵌套的 HTML 元素（可以包含其他 HTML 元素）构成。

1.3 HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

1.4 HTML标题

>在 HTML 文档中，标题很重要。HTML 标题可以用来呈现文档结构，设置得当的标题有利于用户浏览您的网页。

>HTML水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

1.5 HTML注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

HTML 注释可以方便地用来帮助网页设计人员，提醒他们与程序相关的信息。

1.6 HTML超链接

HTML使用标签 <a>来设置超文本链接，是可以从一个页面指向另一个目的端的链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签 <a> 中使用了 href 属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带上下划线
点击链接时，链接显示为红色并带上下划线

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定来显示

>target属性

使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）；默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。

实例：

<a href="https://www.w3cschool.cn/" target="">访问W3Cschool教程!</a>

<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>

1.7 HTML引用

> HTML <q> 元素定义短的引用。浏览器通常会为 <q> 元素包围引号。

>HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。

>HTML <abbr> 元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

>HTML <dfn> 元素定义项目或缩写的定义。

实例：定义项目

>HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

>HTML <cite> 元素定义著作的标题。浏览器通常会以斜体显示 <cite> 元素。

>HTML <bdo> 元素定义双流向覆盖（bi-directional override）。<bdo> 元素用于覆盖当前文本方向。

<bdo dir="rtl">This text will be written from right to left</bdo>

1.8 HTML id 属性

>HTML id 属性用于为HTML 元素指定唯一的 id。一个 HTML文档中不能存在多个有相同 id 的元素。

>使用 id 属性

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

>在 JavaScript 中使用 id 属性。JavaScript 也可以使用 id 属性为特定元素执行某些任务。

JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素：

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

1.9 HTML头部

> HTML 头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。

> HTML <meta> 元素

元数据（metadata）是关于数据的信息。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta> 标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务。

> <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。<head> 元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

> HTML <title> 元素

<title> 标签定义了不同文档的标题。title 在 HTML/XHTML 文档中是必须的。

title 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

>HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接规定默认地址或默认目标（target）。

>HTML <link> 元素

<head>       

<link rel="stylesheet" type="text/css" href="mystyle.css">        

</head>

>HTML <style> 元素

><script> 标签用于加载脚本文件，如： JavaScript

1.10 HTML 图像

使用<img>标签定义 HTML 页面中的图像。<img>标签有两个必需的属性：src和alt。

>在 HTML 中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是：

<img src="url" alt="some_text">

>alt属性用来为图像定义一串预备的可替换的文本。

>height（高度）与width（宽度）属性用于设置图像的高度与宽度。

>在<img>标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">

>　默认情况下，图像在页面中将显示为左侧对齐，在<img>标签中您可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)。

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">

1.11 HTML表格

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

　HTML 表格的基本结构：

<table>…</table>：定义表格

<th>…</th>：定义表格的标题栏（文字加粗）

<tr>…</tr>：定义表格的行

<td>…</td>：定义表格的列

>　如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

>表格的表头单元格使用<th>标签进行定义。表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。大多数浏览器会把表头显示为粗体居中的文本。

>　在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

>有以下两个属性，用于调整 HTML 表格中单元格的空间：

cellspacing属性-定义表格单元格之间的空间
cellpadding属性-表示单元格边框与单元格内容之间的距离

>HTML 合并单元格

如果要将两个或多个列合并为一个列，将使用colspan属性
如果要合并两行或更多行，则将使用rowspan属性。

>表格可以分为三个部分 - 头部，主体和页脚，如同word 文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。

　头部，主体和页脚的对应的三个标签是：

<thead> - 创建单独的表头。
<tbody> - 表示表格的主体。
<tfoot> - 创建一个单独的表页脚。

　表可以包含多个<tbody>元素以指示不同的页面。但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前。

1.12 HTML列表

>HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表适合成员之间无级别顺序关系的情况。

无序列表使用 <ul> 标签。

>HTML有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

有序列表适合各项目之间存在顺序关系的情况。

列表项项使用数字来标记。

>HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

1.13 HTML区块

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

>HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

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

>HTML 内联元素

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

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

> HTML <div> 元素

<div> 标签可以把文档分割为独立的、不同的部分。HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

>HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

1.14 HTML表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。

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

>输入元素

多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。

输入类型是由类型属性（type）定义的。

① 文本域（Text Fields）

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

②密码字段。

密码字段通过标签 <input type="password"> 来定义。密码字段字符不会明文显示，而是以星号或圆点替代。

③单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项。

④复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

⑤提交按钮 (Submit Button)

<input type="submit"> 定义了提交按钮.

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

>label 标签

<label> 标签是一种常见的表单控件，触发对应表单控件功能，让用户在使用表单的时候能够有更好的体验。<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。

>filedset 标签

<fieldset> 标签内的一组表单元素会在 WEB 浏览器中以特殊的方式显示，比如不同样式的边界、3D效果等。

<fieldset> 标签可以将表单内的相关元素分组。<fieldset> 标签会在相关表单元素周围绘制边框。

<legend> 标签为 <fieldset> 元素定义标题。<legend> 必须是 <fieldset> 元素的一个子元素。

>HTML <optgroup> 标签

<optgroup> 标签用于对 <select> 元素所提供的选项进行分组。当您使用一个较长的选项列表时，对相关的选项进行组合会使处理更加容易。<optgroup> 标签经常用于把相关的选项组合在一起。如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。

>HTML <datalist> 标签

<datalist> 标签需要与 <input> 标签配合使用，用来表示可选的列表。<datalist> 标签规定了 <input> 元素可能的选项列表。

<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。提示：不能控制 datalist 的位置，并且不能将其与服务器的数据进行绑定。

>HTML<keygen>标签

<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

1.15 HTML框架

<iframe>标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法:

<iframe src="URL"></iframe>

>该URL指向不同的网页，将窗口内容显示为URL地址指向页面。

>height和width属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。

>Iframe - 移除边框。frameborder属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框。

>iframe可以显示一个目标链接的页面。目标链接的属性必须使用iframe的属性。

1.16 HTML颜色

HTML 颜色采用的是 RGB 颜色，是通过对红 (R)、绿 (G)、蓝 (B) 三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB 即是代表红、绿、蓝三个通道的颜色。

1.17 HTML脚本

>JavaScript 是可插入 HTML 页面的编程代码。JavaScript 使 HTML 页面具有更强的动态和交互性。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

>HTML <script> 标签

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

>HTML<noscript> 标签

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容。

1.18 HTML字符实体

在 HTML 中，某些字符是预留的。您不能使用包含这些字符的文本。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

如需显示小于号，我们必须这样写：< 或 < 或 <

>不间断空格 (Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用  字符实体。

1.19 HTML URL

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

URL 是一个网页地址。URL 可以由字母组成，如 "w3cschool.cn"，或互联网协议（IP）地址： 120.79.88.157。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

>Web 浏览器通过 URL 从 Web 服务器请求页面。当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。一个统一资源定位器 (URL) 用于定位万维网上的文档。一个网页地址实例: //www.w3cschool.cn/html/html-tutorial.html 语法规则:

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

说明:

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

>URL 字符编码

URL 只能使用 ASCII 字符集。URL 编码会将字符转换为可通过因特网传输的格式。来通过因特网进行发送，由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。

1.20 HTML 媒体

>多媒体格式

格式多媒体元素（比如视频和音频）存储于媒体文件中。

确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。

多媒体元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4

>视频格式

MP4是互联网推出新的视频格式。

YouTube 推荐使用 MP4 。

Flash Players 支持 MP4

HTML5 支持 MP4。

>声音格式

MP3是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。如果你的站点是音乐类型的，你可以选择mp3格式

>HTML 助手（插件）

辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。

辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。

使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。

插件可以通过 <object> 标签或者 <embed> 标签添加在页面中。object 和 embed 元素都通过添加对浏览器不直接支持的插件的支持来扩展浏览器的功能。

大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

我们可以使用 <video> 和 <audio> 标签来显示视频和音频。

> <object> 元素

所有主流浏览器都支持 <object> 标签。<object> 元素定义了在 HTML 文档中嵌入的对象。

该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

> <embed> 元素

所有主流浏览器都支持 <embed> 元素。<embed> 元素实现与 <object> 元素相同的结果。

注意 <embed> 元素没有关闭标签。不能使用替代文本。

>HTML 音频(Audio)

声音在HTML中可以以不同的方式播放。

使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

插件可以使用 <object> 标签或者 <embed> 标签添加在页面上.

这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

使用 <embed> 元素

问题:

<embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放

使用 <object> 元素

问题:

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

使用 HTML5 <audio> 元素

HTML5 <audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

空然然后

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML

一、HTML简介1.1 HTML标签HTML 标记标签通常被称为 HTML 标签 ( HTML tag )。HTML 标签是由尖括号包围的关键词，比如<html> HTML 标签通常是成对出现的，比如<b>和</b> 标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签 <标签>内容</标签> 1.2 HTML元素>"HTML 标签" 和 "HTML 元素" ...
复制链接

扫一扫