HTML 笔记

HTML 和 HTML5

HTML 或 Hyper Text Markup Lanuage （超文本标记语言）是一种标记语言，使用特定的标签和元素来表示网页的结构。

超文本指的是一种包含链接到其他文本的文本。标记指的是用在文档中的标签和元素。

HTML 文件通常以 .html 后缀为扩展名。网站的主页通常命名为 index.html。

HTML 的标准由 W3C（World Wide Web Consortium）组织制定。当前的版本为 HTML5。

HTML 标签 Tag

大多数 HTML 元素都有一个开始标签和一个结束标签，例如：

 响应式网页设计笔记

开始标签和结束标签都以尖括号（angle brackets）作为开始和结束。结束标签和开始标签唯一的区别就是多了一个斜杠。

有些元素是自闭合元素（self-closing element），其没有结束标签。这类元素通常使用或表示。

文档类型 Document Type

在文档的顶部，需要声明 HTML 的版本。

通过来声明 HTML 的版本，"..." 部分是版本号。对应 HTML5。

! 和大写的 DOCTYPE 很重要，尤其是针对旧版本的浏览器。但 html 无论大写小写都可以。

所有的 HTML 代码都必须位于 html 标签中。其中位于之后，位于网页的结尾。

这是一个网页结构的例子：

文档结构 Document Structure

html 的结构主要分为两大部分：head 和 body。网页的描述放入 head 标签，网页的内容则应放入 body 标签。

比如 link、meta、title 和 style 都应放入 head 标签。

标题 Heading

HTML 一共有六级标题，分别是：

一级标题
、二级标题
、三级标题
四级标题
、五级标题
、六级标题

段落 Pragraph

p 代表 paragraph

这是一个段落

占位符 Placeholder

Web 开发者通常用 lorem ipsum text 来做占位符。 lorem ipsum text 是从古罗马西塞罗的一段著名经文中随机抽取的。

注释 Comment

注释的作用是：说明代码功能以及在不删除代码的情况下使其失效。

结构元素

HTML5 引入了很多更具描述性的 HTML 元素，包括

主体
、页眉
、页脚、
导航栏
、、文章
、部分

这些元素让 HTML 更易读，同时有助于搜索引擎优化（SEO）和无障碍访问（Accessibility）。

main 元素使搜索引擎和开发者能很快地找到网页的主要内容。

图片 Image

src 指向图片的地址，所有 img 元素必须有 alt 属性

alt 属性有两个作用：

让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；
当图片无法加载时，页面需要显示的替代文本。

注意：

img 元素是没有结束标签的。
理想情况下，alt 属性不应该包含特殊字符，除非有特殊需要。
所有 HMTL 标签都应该是小写字母。
如果图片是纯装饰性的，把 alt 的属性值设置为空。

超链接 Anchor

用 a 来实现网页间的跳转。

例如：

this links to freecodecamp.org

a 元素也可以用于创建内部链接，跳转到网页内的各个不同部分。

要创建内部链接，需要将链接的 href 属性值设置为一个哈希符号 # 加上想内部链接到的元素的 id，通常是在网页下方的元素。然后你需要将相同的 id 属性添加到链接到的元素中。 id 是描述网页元素的一个属性，它的值在整个页面中唯一。例如：

Contacts
...
Contacts

可以在其他文本元素内嵌套链接，也可以在链接内嵌套元素。


Here's a  link to www.freecodecamp.org for you to follow.

target 是超链接元素的一个属性，它用来指定链接的打开方式。属性值 _blank 表示链接会在新标签页打开。 href 是锚点元素的另一个属性，它用来指定链接的 URL。

如果把 a 的 href 属性值设置为 #，创建的是一个死链接（不跳转到其他页面）

列表 List

无序列表 Unordered List

无序列表以

元素，最后以

结束。

例如:


  milk
  cheese

有序列表 Ordered List

有序列表以

元素。最后以

结束。

例如:


  Garfield
  Sylvester

表单 Form

通过 HTML 来实现发送数据给服务器的表单，只需要给 form 元素添加 action 属性即可。如果不指定 action，提交的请求会发送给当前网页。

例如：

数据

当表单提交后，浏览器会发出请求，客户端或服务器脚本会响应该请求并处理数据。

默认情况下，表单数据是作为 GET 请求被发送的，为 URL 含有的已提交数据。

举个例子：如果发送请求到：https://example.com/animals，提交数据为：frog，则 URL：

https://example.com/animals?animal=frog

所以可以从前端或者后端从 URL 取得数据。

当然也可以使用 POST 方法，改动请求属性：

...

如果使用了 POST ，数据被储存在请求体（request of body）。此时数据不会在 URL 中显示，只能通过前后端脚本取得数据。

通常来说，如果是登录注册表单，信息敏感型表单，需要使用 POST 方法；如果数据是可分享的，搜索型表单，可以使用 GET 方法，此时浏览器历史会记录该 URL。

标签 Label

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

最喜欢的颜色

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

输入框 Text Field

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

创建一个文本输入框：

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

属性

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

name

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

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

占位符

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

创建一个占位符：

类型

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

文本区 TextArea

多行文本使用 textarea 标签。

Comment

选择器 Select

使用 select 标签。

Color

首先把 label 的 for 和 select 的 id 联系，然后加入独有的 name 属性值。

在 select 中加入多个 option，每个代表一个选项。每个 option 都有一个独特的 value 属性，可以区分不同的选项。value 属性是用于处理数据的，而 option 标签的中间的人类可读的或者用于用户的。

日期 Date

HTML5 规范添加了 date 类型来创建日期选择器。如果浏览器支持，在点击 input 标签时，会弹出日期选择器。

Enter a date:

HTML5 还引入了 time 标签与 datetime 属性来标准化时间。 time 元素是一个行内元素，用于在一个页面上显示日期或时间。 datetime 属性包含的有效格式。辅助设备可以获取这个值。这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术方式使用它。

Master Camper Cat officiated the cage match between Goro and Scorpion last Wednesday, which ended in a draw.

按钮 Button

给表单添加一个 submit（提交）按钮。点击提交按钮时，表单中的数据将会被发送到 action 属性指定的 URL 上。

例如：

必填项

可以指定某些字段为必填项（required），只有当用户填写了该字段后，才可以提交表单。

在 input 元素中加上 required 属性就可以了，例如：

单选框 Radio

radio buttons（单选按钮）是 input 选择框的一种类型。

每一个单选按钮都应该嵌套在它自己的 label（标签）元素中。相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的单选按钮应该拥有相同的 name 属性。创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以确保用户只提供一个答案。

 
  Indoor

最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 单选按钮的 id 属性值相同。这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。

也可以在 label 标签中嵌入 input 元素：

 
  Indoor


  Name:

fieldset 标签包裹整组单选按钮，实现这个功能。它经常使用 legend 标签来提供分组的描述，以便屏幕阅读器用户会阅读 fieldset 元素中的每个选项。

当选项的含义很明确时，如“性别选择”，fieldset 与 legend 标签可以省略。这时，使用包含 for 属性的 label 标签就足够了。


  
    Choose one of these three items:
    
    Choice One

    
    Choice Two

    
    Choice Three

复选框 Checkbox

checkboxes（复选框）是 input 选择框的一种类型。

每一个复选框都应该嵌套在它自己的 label（标签）元素中。这样，相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的复选框应该拥有相同的 name 属性。

使得 input 与 label 关联的最佳实践是在 label 元素上设置 for属性，让其值与相关联的 input 复选框的 id 属性值相同。

 Loving

value 属性

提交表单时，被选中项的值会发送给服务端。 radio 和 checkbox 的 value 属性值决定了发送到服务端的实际内容。


  Indoor


  Outdoor

这里有两个 radio 单选框。当用户提交表单时，如果 indoor 选项被选中，表单数据会包含：indoor-outdoor=indoor。也就是所选项的 name 和 value 属性值。

如果没有指明 value 属性值，则会使用默认值做为表单数据提交，也就是 on。在这种情况下，如果用户选中 "indoor" 选项然后提交表单，表单数据则会包含 indoor-outdoor=on。这样的表单数据看起来不够直观，因此最好将 value 属性值设置为一些有意义的内容。

默认值

用 checked 属性把第一个复选框和单选按钮都设置为默认选中。

表格 Table

表格把数据组织为行和列的形式。

table表格
tr表行
th表头
td表项
tbody主体
caption字幕
colspan合并列
rowspan 合并行

The table header
The table body	with two columns

引用 Quote

使用q和blockquote表示引用内容

quote

    quote

代码块 Code

使用 code 表示代码块

console.log();

文本格式 Pre

使用pre使得 HTML 按预定文本显示

something

划分元素 Division Element

div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。

它也是 HTML 中出现频率最高的元素。


   something