HTML 笔记-CFANZ编程社区

HTML 和 HTML5

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>
  <li>milk</li>
  <li>cheese</li>
</ul>

有序列表 Ordered List

有序列表以 <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。

标签 Label

使用标签描述表单组件的内容，比使用纯 HTML 文本更具有可访问性。

<label for="color">最喜欢的颜色</label>
<input type="text" id="color" name="color">

标签的 for 属性匹配输入框的 id 属性。

输入框 Text Field

input 输入框可以获得用户的输入。

创建一个文本输入框：

<input type="text" id="color" name="color">

注意 input 输入框是没有结束标签的。

属性

输入框的 id 属性连接输入框和标签。

name

输入框的 name 属性指示了用户输入的数据。例如：

name="mountain"，用户输入："Gutenberg"，那么请求中会包含：mountain=Gutenberg。

占位符

用户在 input 输入框中输入任何内容前的预定义文本。

创建一个占位符：

<input type="text" placeholder="这是一段占位符">

类型

button
checkbox
color
date
file
email
hidden
number
password
radio
range
search
submit
text
time
url
...

文本区 TextArea

多行文本使用 textarea 标签。

<label for="comment">Comment</label>
<textare id="comment" name="comment"></textare>

选择器 Select

使用 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 标签的中间的人类可读的或者用于用户的。

日期 Date

HTML5 规范添加了 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

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>
  <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>

复选框 Checkbox

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>