前台界面（1）---HTML基本定义及常见标签

已经很久没有更新博客了，从今天开始要继续走在学习的路上，话不多说，先来干货：

目录

1. HTML定义

2. H标签

3. Img标签

4. P标签

5. A标签

6. 无序列表

7. 有序列表

8. Form表单

9. Text input文本输入框

10. Button submit提交按钮

11. 单选按钮

12. 复选按钮

13. Div标签

-------------------------------------------黄金分割线------------------------------------------------

内容

1. HTML定义

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

2. H标签

h1是一个HTML元素，h1是header1的简写，意思是一级标题。

大部分元素都有一个开始标记和一个结束标记。

开始标记像这样：<h1>

结束标记像这样：</h1>

开始标记和结束标记的唯一区别就是结束标记多了一个/。

h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。

3. Img标签

也有一些标签没有结束标记，如使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。

举例如下：

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

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

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

简而言之，每一张图片都应该有一个alt属性！

你可以像下面例子中一样为img元素添加一个alt属性：

<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">

4. P标签

P标签中的P是英文paragraph段落的缩写，经常被用来创建一个段落。如

<p>123456454</p>

5. A标签

a元素，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

如：

<p>Here's a <a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社区 </a> for you to follow.</p>

Nesting（嵌套）就是把一个元素放在另一个元素里面，如把a元素放到了p元素中。

有时你想为你的网站添加一个a元素，但此时你还不知道要将它们链接到哪儿，此时可以使用固定链接。

把你的a元素的href属性的值替换为一个#，别名hash(哈希)符号，将其变为一个固定链接。

举例如下：

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

6. 无序列表

HTML有一个特殊元素，用于创建unordered lists（无序列表）, 或带项目符号的列表。

无序列表以<ul>元素开始，并包含一个或多个<li>元素。

例如：

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

将会创建一个带项目符号的"milk"和"cheese"列表。

7. 有序列表

HTML有一个特殊元素，用于创建ordered lists（有序列表）, 或数字编号列表。

有序列表以<ol>元素开始，并包含一个或多个<li>元素。

例如：

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

将创建一个包含"Garfield"和"Sylvester"的数字编号列表。

8. Form表单

使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。

action属性的值指定了表单提交到服务器的地址。

例如：

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

9. Text input文本输入框

Text input(文本输入框)是用来获得用户输入的绝佳方式。

你可以用如下方法创建：

<input type="text">

注意，input元素是自关闭的。

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

你可以用如下方式创建占位符：

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

当你设计表单时，你可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。

例如，如果你想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了，你可以使用：
<input type="text" required>

10. Button submit提交按钮

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

下面是submit按钮的例子：

<button type="submit">this button submits the form</button>

为你的form元素添加一个type为submit的提交按钮，用"Submit"作按钮文本。

11. 单选按钮

单选就是你只能在多个选项中选择一个，就好比你有很多追求者，但却只能选择一个结婚。

多选一的场景就用radio button(单选按钮)

单选按钮只是input输入框的一种类型。

每一个单选按钮都应该嵌套在它自己的label(标签)元素中。

注意：所有关联的单选按钮应该使用相同的name属性。

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

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

12. 复选按钮

当你在大学选课时，面对几百门课程，而因为时间和精力，你只能从中选择十几门。

这样的场景就用checkboxes（复选按钮）。

复选按钮是input的输入框的另一种类型。

每一个复选按钮都应该嵌套进label元素中。

所有关联的复选按钮应该具有相同的name属性。

下面是复选按钮的例子：

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

注意：使用checked属性，你可以设置复选按钮和单选按钮默认被选中。

为此，只需在input元素中添加属性checked

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

13. Div标签

div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。

所以可以利用CSS的继承关系把div上的CSS传递给它所有子元素。

你可以用<div>来标记一个div元素的开始，然后用</div>来标记一个div元素的结束。

14. 注释

注释的开始标记是<!--

结束标记是-->

注释有两个功能：

1、想让某一段代码不起作用，但你又不想删除这一段代码。

2、就是给代码添加一些说明，方便团队合作或日后自己查看，但又不想影响代码本身。