前端加油鸭！【FCC】HTML基础（1）

HTML是英文Hyper Text Markup Language(超文本标记语言)的缩写。

创建标题

h1就是一个HTML元素，h1是header1的简写，意思是一级标题。
二级至六级标题依次表示为h2,h3,…,h6
大部分元素都有一个开始标记(如<h1>)和一个结束标记(如</h1>),开始标记和结束标记的唯一区别就是结束标记多了一个/。

创建段落

<p\>段落<\/p>

添加注释

<\!--注释内容：给代码添加一些说明，在程序中不起作用-->

修改元素样式

<h2>的开始标记中添加style=“color: blue” 将二级标题设置为蓝色，其中color表示颜色属性；
字号由样式属性font-size控制，字体由font-family属性设置。

<h2 style="color: blue">二级标题内容</h2>

在元素中添加style，称为内联样式。但使用层叠样式表（CSS）更易于维护

添加图片

使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。举例如下：

<img src="https://www.your-image-source.com/your-image.jpg">

img元素是自关闭元素，不需要结束标记。

alt属性，也被称为alt text, 是当图片无法加载时显示的替代文本。alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要，搜索引擎也会搜索alt属性。

添加锚点元素（超链接）

a元素，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。
下面是一张a元素的图示。a元素位于段落元素的中间，这意味着链接会出现在段落的中间。

<p>Here are <a href="http://freecatphotoapp.com"> cat photos </a> </p>

显示效果为：

点击cat photos进入网页http://freecatphotoapp.com

把图片嵌套进a元素，点击图片进入链接

<a href="#"><img src="/images/relaxing-cat.jpg"></a>

想要添加一个a元素，但还不知道链接目标时，可将href的值替换为一个#（别名hash符号），将其变为一个固定链接。

添加无序列表

列表中各项为<li>元素，嵌套在<ul>元素中。用于创建unordered lists（无序列表）, 或带项目符号的列表。

<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>

显示效果：

添加有序列表（或数字编号列表）

与无序列表相似。列表中各项为<li>元素，嵌套在<ol>元素中

创建表单

文本输入框

表单在网页中主要负责数据采集功能。
文本输入框(Text input)用来获得用户输入，input元素是自关闭的。

<input type="text" placeholder="this is placeholder text">

其中，占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。

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

<input type="text" required`>

使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。
action属性的值指定了表单提交到服务器的地址。代码如下：

<form action="/url-where-you-want-to-submit-form-data"></form>

按钮

添加一个submit(提交)按钮，点击这个按钮，表单中的数据将会被发送到你通过action属性指定的地址上。
下面是submit按钮的例子：

<button type="submit">Submit</button>

单选按钮

单选就是你只能在多个选项中选择一个。用radio button(单选按钮)
单选按钮只是input输入框的一种类型。每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
注意：所有关联的单选按钮应该使用相同的name属性。下面是一个单选按钮的例子（选项Indoor和Outdoor中二选一）：

  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>

复选按钮

多个选项中选择多个的场景中就用checkboxes（复选按钮）。
复选按钮是input的输入框的另一种类型。每一个复选按钮都应该嵌套进label元素中。
所有关联的复选按钮应该具有相同的name属性。下面是复选按钮的例子（选项Loving、Warm和Friendly中可选择多个）：

  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Warm</label>
  <label><input type="checkbox" name="personality"> Friendly</label>

使用checked属性，你可以设置复选按钮和单选按钮默认被选中。为此，只需在input元素中添加属性checked

<input type="radio" name="test-name" checked>