HTML标签详解与应用-CSDN博客

HTML标签

HTML实例

<html>
<body>
  ...
</body>
</html>

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容

标题

1.通过<h1>-<h6>进行定义

<h1> This is the heading 1</h1>

2.属性

align：表示对齐方式

段落

通过<p>来定义

<p> This is a paragraph. </p>

链接

href 属性，指定链接的地址

<a href="https://www.baidu.com">百度一下</a>

targe 属性，定义被链接的文档在何处显示：target="_blank"则将链接在新窗口中打开

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

name 属性，规定锚的名称，创建html页面中的书签（实现页面内跳转），书签对读者是不可见的。使用id属性来代替 name 属性命名锚同样有效。假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

<a name="tips">基本的注意事项</a>
<!-- 在同一文档中创建指向该锚的链接：点击“有用的提示”可以跳转到“基本的注意事项” -->
<a href="#tips">有用的提示</a>
<!-- 在其他页面中创建指向该锚的链接 -->
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

图像

通过 <img> 来定义，图像的名称和尺寸是以属性的形式提供的

src属性：源属性，用来指定图像的 URL 地址
alt属性：替换文本属性，当图像无法载入时候，替换文本属性告诉读者图片表示的信息

<img src="w3school.jpg" width="120" htight="120" />

空HTML元素

<br /> 表示空的标签，换行

水平线

用 <hr /> 在html页面中创建水平线

<p> Paragraph 1 </p>
<hr />
<p> Paragraph 2 </p>

注释

<!-- 这是注释 -->

文本格式化

<b>：表示加粗bold
<strong>：表示加粗
<big>：表示增大
<em>：表示强调emphasized
<i>：表示斜体italic
<small>：表示变小
<sub>：表示下标
<sup>：表示上标
<pre>：保存<pre>和</pre>之间所有格式：空格和换行
<code>：计算机代码
<kbd>：键盘输入
<samp>：例子文本
<var>：计算机变量
<tt>：TeleType文本
<address>：表示地址
<abbr>：鼠标移到该内容上可以显示属性title的内容：<abbr title="etcetera">etc.</abbr>
<acronym>：如<abbr>
<bdo>：如果浏览器支持 bi-directional override (bdo)，下一行会从右向左输出
<blockquote>：块引用，浏览器会插入换行和外边距
<q>：段引用，浏览器不插入换行和外边距
<del>：删除文本
<ins>：下划线文本

样式

样式能够对文档进行格式化，有三种方式插入样式表：

外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过<style>标签定义内部样式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式表：当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

`<style>`标签

<style>用于为 HTML 文档定义样式信息。其中type 属性是必需的，定义 style 元素的内容，唯一可能的值是”text/css”，style元素位于head部分中

<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>

<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

`<link>`标签

最常用的用途是链接样式表

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

`<div>`标签

定义文档中的节或区域/块级（division/section），可以把文档分割为独立的、不同的部分，用作严格的组织工具。

<div>是一个块级元素，其中的内容自动地开始一个新行，可以通过<div>的class或id应用额外的样式，其中class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。

<body>

 <h1>NEWS WEBSITE</h1>
  <p>some text. some text. some text...</p>

 <div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
 </div>

 <div class="news">
  <h2>News headline 2</h2>
  <p>some text. some text. some text...</p>
 </div>

</body>

`<span>`标签

定义文档中的行内的小块或区域，用来组合行内元素

<p><span>some text.</span>some other text.</p>

如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。

可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

<table border="1">
<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> 标签进行定义：

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

空格占位符

 

列表

无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签，每个列表项始于 <li>。

<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>

有序列表：类似与无序列表，但列表项目使用数字进行标记。有序列表始于 <ol> 标签，每个列表项始于 <li> 标签。

<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>

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

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

表单

允许用户在表单中（比如文本域、单选框、复选框等）输入信息的元素，使用 <form> 定义。

输入：<input>，输入类型由类型属性type定义的；

文本域：<input type="text" name="name" />
单选按钮：<input type="radio" name="sex" value="male" />Male<br/>
复选框：<input type="checkbox" name="reading" /> Reading<br/>
确定按钮：<input type="submit" value="Submit" />
普通按钮： <input type="button" value=”Cancel" />

form表单属性：

action属性：点击确定按钮（submit）之后，表单的内容能够被传送到action指定的文件中，action制定的文件通常会对接收到的表单数据进行相关的处理：<form name="input" aciton="html_form_action.asp" method="get">
method属性：指定submit通过哪种方式发送：post/get

其他子项：

下拉菜单：

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected="selected">Fiat</option>
</select>

文本框：

<textarea rows="10" cols="30">Hello world.

框架

垂直框架：horizontal

<frameset cols="25%, 50%, 25%>
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
<frameset>

水平框架：vertical

<frameset rows="25%, 50%, 25%>
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
<frameset>

内联框架

用于在网页中显示网页，使用<iframe>框架

<iframe src="demo_iframe.html" width="200" height="200"></iframe>
<iframe src="https://www.baidu.com" width="200" height="200"></iframe>

去除边框：

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

iframe作为链接的目标：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

背景

bgcolor：设置背景属性颜色

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

background：设置背景图像，或者为背景图像的URL

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

`<!DOCTYPE>` 标签

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

HTML头部元素

头部元素<head>中元素：<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等等，以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<title>，它定义浏览器工具栏中的标题，提供页面被添加到收藏夹时显示的标题以及显示在搜索引擎结果中的页面标题

<title>标题</title>

<base>，它为页面上的所有链接规定默认地址或默认目标（target）

<base target="_blank" />

<meta>：元数据（metadata）是关于数据的信息，签提供关于 HTML 文档的元数据，元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta name="author" content="w3school.com.cn">

<link>，定义文档与外部资源之间的关系，常用于链接样式表。

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

<style>：为 HTML 文档定义样式信息。

<head>
<style type="text/css">
    body {background-color:yellow}
    p {color:blue}
</style>
</head>

`<meta>`标签

元数据总是以名称/值的形式被成对传递的。

name属性：name 属性提供了名称/值对中的名称，”keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

<meta name="keywords" content="HTML,ASP,PHP,SQL">

http-equiv 属性：当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

content 属性：content 属性提供了名称/值对中的值，content 属性始终要和 name 属性或 http-equiv 属性一起使用。
scheme 属性：用于指定要用来翻译属性值的方案。此方案应该在由标签的 profile 属性指定的概况文件中进行了定义。

HTML脚本

<script>：该标签定义客户端脚本，比如javascript，script元素既可以包含脚本语句，也可以通过src属性指向外部脚本文件，必须的type属性规定脚本的MIME类型。

<script type="text/javascript">
document.write("Hello World!")
</script>

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

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

HTML字符实体

html实体

HTML标签

HTML标签

HTML实例

标题

段落

链接

图像

空HTML元素

水平线

注释

文本格式化

样式

<style>标签

<link>标签

<div>标签

<span>标签

表格

空格占位符

列表

表单

框架

内联框架

背景

<!DOCTYPE> 标签

HTML头部元素

<meta>标签

HTML脚本

HTML字符实体

`<style>`标签

`<link>`标签

`<div>`标签

`<span>`标签

`<!DOCTYPE>` 标签

`<meta>`标签