跳转至

HTML

约 3982 个字 254 行代码 2 张图片 预计阅读时间 16 分钟

Reference

属性

  • HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
  • 属性总是以名称/值对的形式出现，比如：name="value"。
  • 属性总是在 HTML 元素的开始标签中规定。

使用小写属性

  • 属性和属性值对大小写不敏感。
  • 不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
  • 而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

  • 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
  • 在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号 
    name='Bill "HelloWorld" Gates'

标题

  • 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
  • <h1> 定义最大的标题。<h6> 定义最小的标题。
  • 浏览器会自动地在标题的前后添加空行。
  • 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

header is important

  • 确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
  • 搜索引擎使用标题为您的网页的结构和内容编制索引。

段落

  • 使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）
  • 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

重要的几个标签

  1. <body>

    • 标签定义了HTML文档的主体部分，是所有可见内容的容器。
    • 一个HTML文档中只能有一个标签。
    • 它通常包含文本、图片、链接、表格、列表等所有用户可见的内容。

  2. <div>

    • 是一个块级元素，用于组织内容和布局。
    • 它没有特定的语义含义，主要用于CSS样式化和JavaScript操作的钩子。
    • 标签常用于创建布局的“容器”，因为它可以轻松地通过CSS进行样式化和定位。

  3. <span>

    • 是一个内联元素，用于对文档中的文本的一部分进行分组或应用样式。
    • 与
      类似，也没有特定的语义含义。
    • 它主要用于在文本内部进行小范围的样式化或用作JavaScript的钩子。

样式

  • 通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

不赞成使用的标签和属性

  • 在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。
  • 避免使用这些被废弃的标签和属性！
  • 对于这些标签和属性：使用样式代替！
标签 描述
<center> 定义居中的内容。
<font> 和 <basefont> 定义 HTML 字体。
<s> 和 <strike> 定义删除线文本
<u> 定义下划线文本
属性 描述
align 定义文本的对齐方式
bgcolor 定义背景颜色
color 定义文本颜色
样式示例
  • background-color 属性为元素定义了背景颜色
  • style 属性淘汰了“旧的” bgcolor 属性 
    <html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>
  • font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
  • style 属性淘汰了旧的 <font> 标签。 
    <html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>
  • text-align 属性规定了元素中文本的水平对齐方式：
  • style 属性淘汰了旧的 "align" 属性。 
    <html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

格式化

<pre>
这是
预格式文本。
它保留了      空格
和换行。

适合显示计算机代码
for i = 1 to 10
    print i
next i
</pre>


这是
预格式文本。
它保留了      空格
和换行。
适合显示计算机代码
for i = 1 to 10
    print i
next i

  • 这些标签常用于显示计算机/编程代码。
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

Computer code
Keyboard input
Teletype text
Sample text
Computer variable

  • 此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</a></address>
Written by Donald Duck.
Visit us at:
Example.com
Box 564, Disneyland
USA

在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。 

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

etc.
WWW

  • 如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

<bdo dir="rtl">
Here is some Hebrew text
</bdo>
Here is some Hebrew text

  • 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用：
<q>
这是短的引用。
</q>
这是长的引用：
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

这是短的引用： 这是短的引用。 

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

一打有 二十 十二 件。

颜色

Abstract

颜色名 十六进制颜色值 颜色
AliceBlue #F0F8FF  
AntiqueWhite #FAEBD7  
Aqua #00FFFF  
Aquamarine #7FFFD4  
Azure #F0FFFF  
Beige #F5F5DC  
Bisque #FFE4C4  
Black #000000  
BlanchedAlmond #FFEBCD  
Blue #0000FF  
BlueViolet #8A2BE2  
Brown #A52A2A  
BurlyWood #DEB887  
CadetBlue #5F9EA0  
Chartreuse #7FFF00  
Chocolate #D2691E  
Coral #FF7F50  
CornflowerBlue #6495ED  
Cornsilk #FFF8DC  
Crimson #DC143C  
Cyan #00FFFF  
DarkBlue #00008B  
DarkCyan #008B8B  
DarkGoldenRod #B8860B  
DarkGray #A9A9A9  
DarkGreen #006400  
DarkKhaki #BDB76B  
DarkMagenta #8B008B  
DarkOliveGreen #556B2F  
Darkorange #FF8C00  
DarkOrchid #9932CC  
DarkRed #8B0000  
DarkSalmon #E9967A  
DarkSeaGreen #8FBC8F  
DarkSlateBlue #483D8B  
DarkSlateGray #2F4F4F  
DarkTurquoise #00CED1  
DarkViolet #9400D3  
DeepPink #FF1493  
DeepSkyBlue #00BFFF  
DimGray #696969  
DodgerBlue #1E90FF  
Feldspar #D19275  
FireBrick #B22222  
FloralWhite #FFFAF0  
ForestGreen #228B22  
Fuchsia #FF00FF  
Gainsboro #DCDCDC  
GhostWhite #F8F8FF  
Gold #FFD700  
GoldenRod #DAA520  
Gray #808080  
Green #008000  
GreenYellow #ADFF2F  
HoneyDew #F0FFF0  
HotPink #FF69B4  
IndianRed #CD5C5C  
Indigo #4B0082  
Ivory #FFFFF0  
Khaki #F0E68C  
Lavender #E6E6FA  
LavenderBlush #FFF0F5  
LawnGreen #7CFC00  
LemonChiffon #FFFACD  
LightBlue #ADD8E6  
LightCoral #F08080  
LightCyan #E0FFFF  
LightGoldenRodYellow #FAFAD2  
LightGrey #D3D3D3  
LightGreen #90EE90  
LightPink #FFB6C1  
LightSalmon #FFA07A  
LightSeaGreen #20B2AA  
LightSkyBlue #87CEFA  
LightSlateBlue #8470FF  
LightSlateGray #778899  
LightSteelBlue #B0C4DE  
LightYellow #FFFFE0  
Lime #00FF00  
LimeGreen #32CD32  
Linen #FAF0E6  
Magenta #FF00FF  
Maroon #800000  
MediumAquaMarine #66CDAA  
MediumBlue #0000CD  
MediumOrchid #BA55D3  
MediumPurple #9370D8  
MediumSeaGreen #3CB371  
MediumSlateBlue #7B68EE  
MediumSpringGreen #00FA9A  
MediumTurquoise #48D1CC  
MediumVioletRed #C71585  
MidnightBlue #191970  
MintCream #F5FFFA  
MistyRose #FFE4E1  
Moccasin #FFE4B5  
NavajoWhite #FFDEAD  
Navy #000080  
OldLace #FDF5E6  
Olive #808000  
OliveDrab #6B8E23  
Orange #FFA500  
OrangeRed #FF4500  
Orchid #DA70D6  
PaleGoldenRod #EEE8AA  
PaleGreen #98FB98  
PaleTurquoise #AFEEEE  
PaleVioletRed #D87093  
PapayaWhip #FFEFD5  
PeachPuff #FFDAB9  
Peru #CD853F  
Pink #FFC0CB  
Plum #DDA0DD  
PowderBlue #B0E0E6  
Purple #800080  
Red #FF0000  
RosyBrown #BC8F8F  
RoyalBlue #4169E1  
SaddleBrown #8B4513  
Salmon #FA8072  
SandyBrown #F4A460  
SeaGreen #2E8B57  
SeaShell #FFF5EE  
Sienna #A0522D  
Silver #C0C0C0  
SkyBlue #87CEEB  
SlateBlue #6A5ACD  
SlateGray #708090  
Snow #FFFAFA  
SpringGreen #00FF7F  
SteelBlue #4682B4  
Tan #D2B48C  
Teal #008080  
Thistle #D8BFD8  
Tomato #FF6347  
Turquoise #40E0D0  
Violet #EE82EE  
VioletRed #D02090  
Wheat #F5DEB3  
White #FFFFFF  
WhiteSmoke #F5F5F5  
Yellow #FFFF00  
YellowGreen #9ACD32  

CSS

  • 当单个文件需要特别样式时，就可以使用内部样式表。可以在 head 部分通过 <style> 标签定义内部样式表。 
    <head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
  • 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 
    <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • 当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。 
    <p style="color: red; margin-left: 20px">
This is a paragraph
</p>
  • @import写在<style>标签内最开始 
    <style>
  @import "外部CSS样式"
</style>

链接

  • 有两种使用 <a> 标签的方式：
    • 通过使用 href 属性 - 创建指向另一个文档的链接
    • 通过使用 name 属性 - 创建文档内的书签

HTML 链接语法

  • 链接的 HTML 代码很简单，href 属性规定链接的目标，开始标签和结束标签之间的文字被作为超级链接来显示。
  • "链接文本" 不一定是文本。图片或其他 HTML 元素都可以成为链接。 
    <a href="http://www.w3school.com.cn/">访问 W3School</a>

target属性

  • 使用 Target 属性，你可以定义被链接的文档在何处显示。
    在新窗口打开
    <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

Visit W3School!

name属性

  • name 属性规定锚（anchor）的名称。
  • 可以使用 name 属性创建 HTML 页面中的书签。
  • 书签不会以任何特殊方式显示，它对读者是不可见的。
  • 当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

  • 首先，我们在 HTML 文档中对锚进行命名（创建一个书签）： 

    <a name="tips">基本的注意事项 - 有用的提示</a>

  • 然后，我们在同一个文档中创建指向该锚的链接： 

    <a href="#tips">有用的提示</a>

  • 也可以在其他页面中创建指向该锚的链接

  • 将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。 
    <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

基本的注意事项 - 有用的提示

  • 始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"
  • 命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。
  • 假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

图像

背景图片

  • gif 和 jpg 文件均可用作 HTML 背景。
  • 如果图像小于页面，图像会进行重复。

调整图片

  • background-size

    • 可以指定背景图片的尺寸，可以是具体的宽高值，也可以是预定义的值cover,contain
    • cover: 保证背景图片完全覆盖整个元素，图片可能会被裁剪。
    • contain: 确保背景图片完整显示在元素内部，可能会导致图片无法完全覆盖元素的全部空间。
    • 具体值：如100px 200px，直接指定宽度和高度

  • background-position

    • 这个属性接受两个值：第一个值控制水平位置，第二个值控制垂直位置。这些值可以是关键字（如top、bottom、left、right、center），也可以是长度（如px、em）或百分比。
    • 50% 100%意味着背景图像将在容器的水平中心和垂直底部显示。

表格

  • 在HTML中，<table>标签用于创建表格。在这个表格结构中，<tr>和<td>是两个基本的元素，它们分别代表表格的行和单元格：

    • <tr>: 表示Table Row，即表格的一行。你可以在<tr>元素内部使用<td>（表格单元格）或<th>（表格头部单元格）元素来定义行中的单元格。
    • <td>: 表示Table Data，即表格中的一个数据单元格。它位于<tr>元素内部，用于显示内容。每个<td>元素代表一行中的一个单元格。 
    <table>
<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>

    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2

边框属性

  • border = "1"：可以为表格添加边框，同时里面的整数代表了边框的粗细程度 
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Row 1, cell 1 Row 1, cell 2
  • frame 属性可以控制围绕表格的边框。 

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

表头

  • 表格的表头使用 标签进行定义。

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

<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>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

空单元格

  • 在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
  • 这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp</td>
<td>row 2, cell 2</td>
</tr>
</table>

标题

  • <caption>标签可以为表格添加标题
我的标题
100 200 300
400 500 600

添加背景颜色和图片

  • bgcolor和background可以为<td>或者整个表格添加背景颜色和图片 
    <table border="1">
<tr>
  <td bgcolor="red">First</td>
  <td>Row</td>
</tr>   
<tr>
  <td 
  background="/i/eg_bg_07.gif">
  Second</td>
  <td>Row</td>
</tr>
</table>

跨行或跨列的单元格

  • 在<td>标签中使用clospan或rowspan来达到跨列或跨行的效果
    <table border="1">
  <tr>
    <td colspan="2" style="text-align:center;">First Row</td>
  </tr>
  <tr>
    <td>Second Row, First Column</td>
    <td>Second Row, Second Column</td>
  </tr>
</table>

    <table border="1">
  <tr>
    <td rowspan="2" >First Column</td>
    <td>First Row, Second Column</td>
  </tr>
  <tr>
    <td>Second Row, Second Column</td>
  </tr>
</table>
First Row
Second Row, First Column Second Row, Second Column
First Column First Row, Second Column
Second Row, Second Column

块与内联元素

  • “块级元素”译为 block level element，“内联元素”译为 inline element
  • 块级元素在浏览器显示时，通常会以新行来开始（和结束）
    • 如：<h1>, <p>, <ul>, <table>
  • 内联元素在显示时通常不会以新行开始。
    • 如：<b>, <td>, <a>, <img>

表单

  • HTML 表单用于搜集不同类型的用户输入。
  • <form>元素来定义表单
  • HTML 表单包含表单元素。
  • 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

input 元素

  • <input>元素是最重要的表单元素，根据不同的type属性可以有各种形态
类型 描述 实例
text 定义常规文本输入
radio 定义单选按钮输入（选择多个选择之一） Man!
Submit 定义提交按钮（提交表单）
button 按钮
password 密码
checkbox 复选框允许用户在有限数量的选项中选择零个或多个选项。 I have a bike
I have a car

文本输入

<form>
First name: </br>
<input type="text" name="firstname">
</br>
Last name:</br>
<input type="text" name="lastname">
</form>
  • 表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

First name:

Last name:

单选按钮输入

  • radio类型
    <form>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="male">Female
</form>
    Male Female

提交按钮

  • 定义用于向表单处理程序（form-handler）提交表单的按钮。

  • 表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

  • 表单处理程序在表单的 action 属性中指定

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
First name:

Last name:


Action 属性

  • action 属性定义在提交表单时执行的动作。

  • 向服务器提交表单的通常做法是使用提交按钮。

  • 通常，表单会被提交到 web 服务器上的网页。

  • 如果省略 action 属性，则 action 会被设置为当前页面。

<form action="action_page.php">

Method 属性

  • method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）： 
    <form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">

Name 属性

  • 如果要正确地被提交，每个输入字段必须设置一个 name 属性。

fieldset 元素

  • <fieldset>元素在HTML中用于对表单内的相关元素进行分组。它通常用于将表单 中的一组相关的控件（如输入框、选择列表等）组织在一起，这有助于提高表单的可读性和可用性。<fieldset>元素还可以与<legend>元素配合使用，后者为<fieldset>提供标题，进一步增强了表单的结构和清晰度。

  • 使用<fieldset>的主要目的和优点包括：

    • 逻辑分组：将表单中相关的元素逻辑上分组在一起，使表单的结构更加清晰。
    • 可访问性：对于使用屏幕阅读器的用户，<fieldset>和<legend>的组合提高了表单的可访问性，因为屏幕阅读器可以宣读<legend>内容，让用户知道接下来的表单控件属于哪个分组。
    • 样式化：可以对<fieldset>应用CSS样式，以视觉上区分不同的表单部分。

下拉菜单

标签 描述
<select> 下拉菜单和列表标签
<option> 下拉菜单和列表项目标签
<optgroup> 下拉菜单和列表项目分组标签
<textarea> 文字域标签
select 标签属性
属性描述
name设置下拉菜单和列表的名称
multiple设置可选择多个选项
size设置列表中可见选项的数目