响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

-1大部分 HTML 元素都有一个开始标签和一个结束标签。

Hello

-2 h2元素

h1元素通常被用作主标题，h2 元素通常被用作副标题，还有 h3、h4、h5、h6 元素，它们分别用作不同级别的标题。

-3用 p 元素代表段落

p 元素是网站上段落文本使用的元素。 p 是“paragraph（段落）”的缩写。

创建一个段落：

I'm a p tag!

在 h2 元素下方添加一个 p 元素，

-4用占位符文本填充空白

-5HTML 的注释

注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。
注释的另一个用途就是在不删除代码的前提下，让代码不起作用。

-6HTML5 元素介绍

HTML5 引入了很多更具描述性的 HTML 元素，包括 main、header、footer、nav、video、article、section 等等。
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。 main 元素让搜索引擎和开发者能很快地找到网页的主要内容。

-7给网站添加图片

使用 img 元素来为你的网站添加图片，其中 src 属性指向图片的地址。

注意：img 元素是没有结束标签的。
所有的 img 元素必须有 alt 属性。 alt 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。
注意：如果图片是纯装饰性的，把 alt 的属性值设置为空是最佳实践。
理想情况下，alt 属性不应该包含特殊字符，除非有特殊需要。
让我们给上面例子的 img 添加 alt 属性。

-8用 a 实现网页间的跳转

用 a（Anchor，简写为 a）来实现网页间的跳转。
a 需要一个 href 属性指向跳转的目的地。同时，它还应有内容。例如：

this links to freecodecamp.org

浏览器将显示文本 this links to freecodecamp.org，这是一个可点击的链接。
通过这个链接可以访问https://www.freecodecamp.org。

-9用 a 实现网页内部跳转

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

要创建内部链接，你需要将链接的 href 属性值设置为一个 哈希符号 # 加上你想内部链接到的元素的 id，通常是在网页下方的元素。然后你需要将相同的 id 属性添加到你链接到的元素中。 id 是描述网页元素的一个属性，它的值在整个页面中唯一。
当用户点击了 Contacts 链接，页面就会跳转到网页的 Contacts 区域。

Contacts
...

Contacts

当用户点击 Contacts 链接，可以访问网页中带有 Contacts 标题元素的部分。

-12将 a 嵌套在段落中


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

文本是被包裹在 p 元素内

锚点元素（它需要结束标签）：

...

target 是锚点元素的一个属性，它用来指定链接的打开方式。属性值_blank表示链接会在新标签页打开。
href 是锚点元素的另一个属性，它用来指定链接的 URL：
a 元素内的文本 link to www.freecodecamp.org 叫作锚文本，会显示为一个可以点击的链接：
此示例的最终输出结果是这样：
Here's a link to www.freecodecamp.org for you to follow.

-13用 # 号来创建链接占位符

(有时你想为网站添加一个 a 元素，但还不确定要将它链接到哪里。)
href 属性的当前值是指向 “https://www.freecatphotoapp.com”。
请将 href 属性的值替换为#，以此来创建链接占位符。

例如: href="#"

-14给图片添加链接

通过把元素嵌套进 a 里使其变成一个链接。将 img 嵌套进 a 元素中。
如果我们要把图片嵌套进 a 元素，可以这样写：


=>把 a 的 href 属性值设置为 #，创建的是一个死链接（不跳转到其他画面）
=> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

  Click here to view more 


cat photos
.

-15创建一个无序列表

HTML 有一个特定的元素用于创建无序列表。
无序列表以
- 元素，最后以
结束。
例如:


  milk
  cheese

会创建一个要点列表，包括 milk 和 cheese。显示效果如下:

milk
cheese

-16创建一个有序列表

HTML 中有用于创建有序列表的特定元素。

有序列表以

元素。最后以

结束。

例如:


  Garfield
  Sylvester

将创建一个包含 Garfield 和 Sylvester 的编号列表。
1.Garfield
2.Sylvester

-17创建一个输入框

input 输入框可以让你轻松获得用户的输入。
你可以像这样创建一个文本输入框：
( 注意 input 输入框是没有结束标签的。)

-18给输入框添加占位符文本

占位符文本用户在 input 输入框中输入任何东西前的预定义文本。
你可以像这样创建一个占位符(placeholder[ˈpleɪshəʊldə(r)])：

注意：别忘了 input 元素是 "自闭和标签"，即不需要结束标签。(input / //表单元素标签
br/ //换行 hr/ //水平线 img / //图片 option/ //下拉菜单项 meta / link /)

-19创建一个表单

通过 HTML 来实现发送数据给服务器的表单，只需要给 form 元素添加 action 属性即可。例如：

把现有的 input 元素嵌套到一个表单 form 元素里，然后设置 form 元素的 action 属性值

-20给表单添加提交按钮

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

-21给表单添加一个必填字段

当你设计表单时，你可以指定某些字段为必填项（required），只有当用户填写了该字段后，才可以提交表单。
如果你想把文本输入框设置为必填项，在 input 元素中加上 required 属性就可以了，例如：

-22创建一组单选按钮

radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。
( 单选按钮是 input 选择框的一种类型 )

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

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

下面是一个单选按钮的例子：

 #label 标签中嵌入 input 元素
  Indoor 

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

-23创建一组复选框

checkboxes（复选框）就好比多项选择题，正确答案有多个。
( 复选框是 input 选择框的一种类型 )
每一个复选框都应该嵌套在它自己的 label（标签）元素中。这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的复选框应该拥有相同的 name 属性。
使得 input 与 label 关联的最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 复选框的 id 属性值相同。

下面是一个复选框的例子：

Loving

-24使用单选框和复选框的 value 属性

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

例如：

value="indoor" type="radio" name="indoor-outdoor">Indoor

value="outdoor"type="radio" name="indoor-outdoor">Outdoor

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

-25给单选按钮和复选框添加默认选中项

用 checked 属性把第一个复选框和单选按钮都设置为默认选中。在一个 input 元素里面添加 checked 这个词，即可实现。
例如:


 Indoor

#默认值选中，可修改

-26元素嵌套

div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。
它也是 HTML 中出现频率最高的元素。
和其他普通元素一样，可以用
来标记一个 div 元素的开始，用
来标记一个 div 元素的结束。

-27声明 HTML 的文档类型

在文档的顶部，我们需要告诉浏览器网页所使用的 HTML 的版本。 HTML 是一个在不停发展的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。大部分主流浏览器都支持最新的 HTML5 规范。但是一些陈旧的网页可能使用的是老版本的 HTML。
可以通过来告诉浏览器页面上使用的 HTML 版本，"..." 部分就是版本号。对应的就是 HTML5。
! 和大写的 DOCTYPE 是很重要的，尤其是对那些老的浏览器。但 html 无论大写小写都可以。
所有的 HTML 代码都必须位于 html 标签中。其中位于之后，位于网页的结尾。

网页布局

标记文本的结构主要分为两大部分：head 和 body。 head 元素应只包含 title，body 元素应该包含 h1 和 p。

-28定义 HTML 文档的 head 和 body

html 的结构主要分为两大部分：head 和 body。网页的描述应放入 head 标签，网页的内容（向用户展示的）则应放入 body 标签。
比如 link、meta、title 和 style 都应放入 head 标签。

响应式网页设计freeCodecamp(基础 HTML 和 HTML5)