云计算服务
服务器租用
DDOS 防护
虚拟主机
域名服务
基础设施
关于我们
HTML 或 Hyper Text Markup Lanuage （超文本标记语言） 是一种标记语言，使用特定的标签和元素来表示网页的结构。
超文本指的是一种包含链接到其他文本的文本。标记指的是用在文档中的标签和元素。
HTML 文件通常以 .html 后缀为扩展名。网站的主页通常命名为 index.html。
HTML 的标准由 W3C（World Wide Web Consortium） 组织制定。当前的版本为 HTML5。
HTML 标签 Tag大多数 HTML 元素都有一个开始标签和一个结束标签，例如：
<h1> 响应式网页设计笔记 </h1>
开始标签和结束标签都以尖括号（angle brackets）作为开始和结束。结束标签和开始标签唯一的区别就是多了一个斜杠。
有些元素是自闭合元素（self-closing element），其没有结束标签。这类元素通常使用 <br> 或 <br /> 表示。
文档类型 Document Type
在文档的顶部，需要声明 HTML 的版本。
通过 <!DOCTYPE ...> 来声明 HTML 的版本，"..." 部分是版本号。 <!DOCTYPE html> 对应 HTML5。
! 和大写的 DOCTYPE 很重要，尤其是针对旧版本的浏览器。 但 html 无论大写小写都可以。
所有的 HTML 代码都必须位于 html 标签中。 其中 <html> 位于 <!DOCTYPE html> 之后，</html> 位于网页的结尾。
这是一个网页结构的例子：
<!DOCTYPE html>
<html>
<!-- Your code -->
</html>
文档结构 Document Structure
html 的结构主要分为两大部分：head 和 body。 网页的描述放入 head 标签， 网页的内容则应放入 body 标签。
比如 link、meta、title 和 style 都应放入 head 标签。
<!DOCTYPE html>
<html>
<head>
<meta />
<style>
</style>
</head>
<body>
<div>
</div>
</body>
</html>
标题 Heading
HTML 一共有六级标题，分别是：
<h1>一级标题</h1>、<h2>二级标题</h2>、<h3>三级标题</h3>
<h4>四级标题</h4>、<h5>五级标题</h5>、<h6>六级标题</h6>
段落 Pragraph
p 代表 paragraph
<p>这是一个段落</p>
占位符 Placeholder
Web 开发者通常用 lorem ipsum text 来做占位符。 lorem ipsum text 是从古罗马西塞罗的一段著名经文中随机抽取的。
注释 Comment
<!-- 注释内容 -->注释的作用是：说明代码功能以及在不删除代码的情况下使其失效。
结构元素
HTML5 引入了很多更具描述性的 HTML 元素， 包括
<main>主体</main>、<header>页眉</header>、<footer>页脚</footer>、
<nav>导航栏</nav>、<video>视频</video>、<article>文章</article>、<section>部分</section>
这些元素让 HTML 更易读，同时有助于搜索引擎优化 （SEO） 和无障碍访问 （Accessibility）。
main 元素使搜索引擎和开发者能很快地找到网页的主要内容。
图片 Image
<img src=" " alt=" " width="" height="" />
src 指向图片的地址，所有 img 元素必须有 alt 属性
alt 属性有两个作用：
让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；当图片无法加载时，页面需要显示的替代文本。注意：
img 元素是没有结束标签的。理想情况下，alt 属性不应该包含特殊字符，除非有特殊需要。所有 HMTL 标签都应该是小写字母。如果图片是纯装饰性的，把alt 的属性值设置为空。超链接 Anchor
用 a 来实现网页间的跳转。
例如：
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
a 元素也可以用于创建内部链接，跳转到网页内的各个不同部分。
要创建内部链接，需要将链接的 href 属性值设置为一个哈希符号 # 加上想内部链接到的元素的 id，通常是在网页下方的元素。 然后你需要将相同的 id 属性添加到链接到的元素中。 id 是描述网页元素的一个属性，它的值在整个页面中唯一。例如：
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
可以在其他文本元素内嵌套链接，也可以在链接内嵌套元素。
<p>
Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>
target 是超链接元素的一个属性，它用来指定链接的打开方式。 属性值 _blank 表示链接会在新标签页打开。 href 是锚点元素的另一个属性，它用来指定链接的 URL。
如果把 a 的 href 属性值设置为 #，创建的是一个死链接（不跳转到其他页面）
列表 List无序列表 Unordered List
无序列表以 <ul> 开始，中间包含一个或多个 <li> 元素， 最后以 </ul> 结束。
例如:
<ul>有序列表 Ordered List
<li>milk</li>
<li>cheese</li>
</ul>
有序列表以 <ol> 开始，中间包含一个或多个 <li> 元素。 最后以 </ol> 结束。
例如:
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
表单 Form
通过 HTML 来实现发送数据给服务器的表单， 只需要给 form 元素添加 action 属性即可。如果不指定 action，提交的请求会发送给当前网页。
例如：
<form action="/url-where-you-want-to-submit-form-data">数据
<input>
</form>
当表单提交后，浏览器会发出请求，客户端或服务器脚本会响应该请求并处理数据。
默认情况下，表单数据是作为 GET 请求被发送的，为 URL 含有的已提交数据。
举个例子：如果发送请求到：https://example.com/animals，提交数据为：frog，则 URL：
https://example.com/animals?animal=frog
所以可以从前端或者后端从 URL 取得数据。
当然也可以使用 POST 方法，改动请求属性：
<form method="post">
...
</form>
如果使用了 POST ，数据被储存在请求体（request of body）。此时数据不会在 URL 中显示，只能通过前后端脚本取得数据。
通常来说，如果是登录注册表单，信息敏感型表单，需要使用 POST 方法；如果数据是可分享的，搜索型表单，可以使用 GET 方法，此时浏览器历史会记录该 URL。
使用标签描述表单组件的内容，比使用纯 HTML 文本更具有可访问性。
<label for="color">最喜欢的颜色</label>
<input type="text" id="color" name="color">
标签的 for 属性匹配输入框的 id 属性。
输入框 Text Fieldinput 输入框可以获得用户的输入。
创建一个文本输入框：
<input type="text" id="color" name="color">
注意 input 输入框是没有结束标签的。
id
输入框的 id 属性连接输入框和标签。
name
输入框的 name 属性指示了用户输入的数据。例如：
name="mountain"，用户输入："Gutenberg"，那么请求中会包含：mountain=Gutenberg。
占位符
用户在 input 输入框中输入任何内容前的预定义文本。
创建一个占位符：
<input type="text" placeholder="这是一段占位符">类型buttoncheckboxcolordatefileemailhiddennumberpasswordradiorangesearchsubmittexttimeurl...文本区 TextArea
多行文本使用 textarea 标签。
<label for="comment">Comment</label>选择器 Select
<textare id="comment" name="comment"></textare>
使用 select 标签。
<label for="color">Color</label>
<select id="color" name="color">
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
首先把 label 的 for 和 select 的 id 联系，然后加入独有的 name 属性值。
在 select 中加入多个 option，每个代表一个选项。每个 option 都有一个独特的 value 属性，可以区分不同的选项。value 属性是用于处理数据的，而 option 标签的中间的人类可读的或者用于用户的。
日期 DateHTML5 规范添加了 date 类型来创建日期选择器。 如果浏览器支持，在点击 input 标签时，会弹出日期选择器。
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
HTML5 还引入了 time 标签与 datetime 属性来标准化时间。 time 元素是一个行内元素，用于在一个页面上显示日期或时间。 datetime 属性包含的有效格式。 辅助设备可以获取这个值。 这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术方式使用它。
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>按钮 Button
给表单添加一个 submit（提交）按钮。 点击提交按钮时，表单中的数据将会被发送到 action 属性指定的 URL 上。
例如：
<button type="submit">this button submits the form</button>
必填项
可以指定某些字段为必填项（required），只有当用户填写了该字段后，才可以提交表单。
在 input 元素中加上 required 属性就可以了，例如：<input type="text" required>
radio buttons（单选按钮）是 input 选择框的一种类型。
每一个单选按钮都应该嵌套在它自己的 label（标签）元素中。 相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以确保用户只提供一个答案。
<label>
<input type="radio" name="indoor-outdoor">Indoor
最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 单选按钮的 id 属性值相同。 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。
也可以在 label 标签中嵌入 input 元素：
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
fieldset 标签包裹整组单选按钮，实现这个功能。 它经常使用 legend 标签来提供分组的描述，以便屏幕阅读器用户会阅读 fieldset 元素中的每个选项。
当选项的含义很明确时，如“性别选择”，fieldset 与 legend 标签可以省略。 这时，使用包含 for 属性的 label 标签就足够了。
<form>复选框 Checkbox
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>
checkboxes（复选框）是 input 选择框的一种类型。
每一个复选框都应该嵌套在它自己的 label（标签）元素中。 这样，相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的复选框应该拥有相同的 name 属性。
使得 input 与 label 关联的最佳实践是在 label 元素上设置 for属性，让其值与相关联的 input 复选框的 id 属性值相同。
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
value 属性
提交表单时，被选中项的值会发送给服务端。 radio 和 checkbox 的 value 属性值决定了发送到服务端的实际内容。
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
这里有两个 radio 单选框。 当用户提交表单时，如果 indoor 选项被选中，表单数据会包含：indoor-outdoor=indoor。 也就是所选项的 name 和 value 属性值。
如果没有指明 value 属性值，则会使用默认值做为表单数据提交，也就是 on。 在这种情况下，如果用户选中 "indoor" 选项然后提交表单，表单数据则会包含 indoor-outdoor=on。 这样的表单数据看起来不够直观，因此最好将 value 属性值设置为一些有意义的内容。
默认值
用 checked 属性把第一个复选框和单选按钮都设置为默认选中。
<input type="radio" name="test-name" checked>
表格 Table
表格把数据组织为行和列的形式。
table表格tr表行th表头td表项tbody主体caption字幕colspan合并列rowspan 合并行The table header
The table body
with two columns
引用 Quote
使用q和blockquote表示引用内容
<q>quote</q>
<blockquote>
quote
</blockquote>
代码块 Code
使用 code 表示代码块
<code>console.log();</code>
文本格式 Pre
使用pre使得 HTML 按预定文本显示
something
划分元素 Division Element
div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。
它也是 HTML 中出现频率最高的元素。
<div>
<p> something </p>
</div>
.png)
.png)
