初学html

发表于 | 分类于 | 评论数： | 阅读次数：
本文字数： 12k | 阅读时长 ≈ 11 分钟

摘要

本文部分内容来源于网络，个人收集整理，请勿传播

HTML5简介

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: Hyper Text Markup Language

  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

什么是 HTML5?

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

标签分类

  • 自闭和标签 
1
<meta charset="UTF-8">
  • 主动闭合标签
1
<title>Document</title>

head标签

meta

  • 编码
  • 跳转
  • 刷新
  • 关键字
  • 描述
  • IE兼容
1
2
3
4
5
6
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="refresh" content="0; url=http://example.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="meta,我的标签">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Free Web tutorials on HTML and CSS">

title

网页的头部信息

1
<title>Document</title>
  • css
  • icon
1
2
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

style

在页面中写样式，参照css

script

引入js文件

1
<script src="my.js"></script>

body标签

图标以及各种字符,请参照

  • p：段落
  • br：换行
  • hr：分割线
  • h系列：标题
  • <!-- 这是一个注释 -->

input

  • type=’text’：name、value
  • type=’password’：name、value
  • type=’submit’：value=’’ 提交按钮、表单
  • type=’button’：按钮
  • type=’radio’：单选框 value、checked=’checked’ name相同互斥
  • type=’checkbox’：复选框 value、checked=’checked’ name批量获取数据
  • type=’file’：依赖<form action="" enctype="multipart/form-data"></form>
  • type=’rest’：重置

textarea

1
<textarea name="" id="" cols="30" rows="10"></textarea>

select

name，内部option value，提交到后台，size，multiple

a

  • 跳转
  • 锚：href=”#id” 标签的id不允许重复
1
<a href="https://c.isme.pub/" target="_blank">isme</a>

img

1
<img src="a.png" alt="图片" title="">

列表

  • 无序列表：ul li
  • 有序列表：ol li
  • 自定义列表：dl dt dd

表格

  • table
    • thead
      • tr
        • th
    • tbody
      • tr
        • th
  • colspan
  • rowspan

label

用于点击文件，使用关联的标签获取光标

1
2
<label for="user">用户名</label>
<input type="text" name="username" id="user">

fieldset

  • legend

标签分类

  • 块级标签
    • div
    • h
    • p
  • 内联标签
    • span
  • 标签之间可以嵌套
  • 标签存在的意义：css、js操作

html标签表格

属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style） title
title 描述了元素的额外信息 (作为工具条使用)
<html> 定义HTML文档
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
<body> 定义文档的主体
<h1> to <h6> 定义
<hr> 定义水平线
<!--> 定义注释
<p> 定义一个段落
<br> 插入单个折行（换行）
<a> 定义一个超级链接
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义定义列表
<dt> 自定义列表项目
<dd> 定义自定列表义的描述
<div> 定义了文档的区域，块级(block-level)
<span> 用来组合文档中的行内元素，内联元素(inline)
<div> 定义文档区块，块级(block-level)
<span> 定义span，用来组合文档中的行内元素。
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域(一个多行的输入控件)
<label> 定义了<input>元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了<fieldset>元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<keygen> 定义了表单的密钥对生成器字段
<output> 定义一个计算结果
<iframe> 定义一个内联的iframe
<script> 定义了客户端脚本
<noscript> 定义了不支持脚本浏览器输出的文本

HTML字符实体

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; (IE不支持)
￠ 分 &cent; &#162;
£ 镑 &pound; &#163;
¥ 日圆 &yen; &#165;
€ 欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

URL编码实例

字符 URL
€ %80
£ %A3
© %A9
® %AE
À %C0
Á %C1
 %C2
à %C3
Ä %C4
Å %C5

颜色

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

html 速查

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
HTML基本文档（HTML Basic Document）
<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>

<body>
Visible text goes here...
</body>
</html>

基本标签(Basic Tags)
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

<p>This is a paragraph.</p>
<br> (line break)
<hr> (horizontal rule)
<!-- This is a comment -->
文本格式化（Formatting）
<b>Bold text</b>
<code>Computer code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd> 
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>

<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (a section quoted from another source)
<cite> (title of a work)
<del> (deleted text)
<ins> (inserted text)
<sub> (subscripted text)
<sup> (superscripted text)
链接（Links）
Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>
Bookmark:
<a id="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

图片（Images）
<img src="URL" alt="Alternate Text" height="42" width="42">
样式（Styles/Sections）
<style type="text/css">
  h1 {color:red;}
  p {color:blue;}
</style>

<div>A block-level section in a document</div>
<span>An inline section in a document</span>
Unordered list
<ul>
  <li>Item</li>
  <li>Item</li>
</ul>
Ordered list
<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
Definition list
<dl>
  <dt>Item 1</dt>
    <dd>Describe item 1</dd>
  <dt>Item 2</dt>
    <dd>Describe item 2</dd>
</dl>
Tables
<table border="1">
  <tr>
    <th>table header</th>
    <th>table header</th>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
  </tr>
</table>

框架（Iframe）
<iframe src="demo_iframe.htm"></iframe>

表单（Forms）
<form action="demo_form.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>

<textarea name="comment" rows="60" cols="20"></textarea>

</form>

Entities
&lt; is the same as <
&gt; is the same as >