1. Link to External Pages with Anchor Elements
a元素,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。
下面是一张a元素的图示。a元素位于段落元素的中间,这意味着链接会出现在段落的中间。
这有一个例子:
<p>Here's a <a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社区 </a> for you to follow.</p>
2.Nest an Anchor Element within a Paragraph
例如:
<p>Here's a <a href="https://freecodecamp.cn"> link to FreeCodeCamp中文社区</a> for you to follow.</p>
Nesting(嵌套)就是把一个元素放在另一个元素里面。
3. Make Dead Links using the Hash Symbol
有时你想为你的网站添加一个a元素,但此时你还不知道要将它们链接到哪儿,此时可以使用固定链接。
把你的a元素的href属性的值替换为一个#,别名hash(哈希)符号,将其变为一个固定链接。
4. Turn an Image into a Link
你可以通过把某元素嵌套进a元素使其变成一个链接。
把你的图片嵌套进a元素。举例如下:
<a href="#"><img src="/images/relaxing-cat.jpg"></a>
5. Add Alt Text to an Image for Accessibility
alt属性,也被称为alt text, 是当图片无法加载时显示的替代文本。alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要,搜索引擎也会搜索alt属性。
简而言之,每一张图片都应该有一个alt属性!
你可以像下面例子中一样为img元素添加一个alt属性:
<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">
6. Create a Bulleted Unordered List
HTML有一个特殊元素,用于创建unordered lists(无序列表), 或带项目符号的列表。
无序列表以<ul>
元素开始,并包含一个或多个<li>
元素。
例如:
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
7. Create an Ordered List
HTML有一个特殊元素,用于创建ordered lists(有序列表), 或数字编号列表。
有序列表以<ol>
元素开始,并包含一个或多个<li>
元素。
例如:
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
8. Create a Text Field
现在让我们来创建一个form(表单)。
Text input(文本输入框)是用来获得用户输入的绝佳方式。
你可以用如下方法创建:
<input type="text">
注意,input元素是自关闭的。
9. Add Placeholder Text to a Text Field
占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。
你可以用如下方式创建占位符:
<input type="text" placeholder="this is placeholder text">
10. Create a Form Element
使用HTML来构建可以跟服务器交互的Web表单(form),通过给你的form元素添加一个action属性来达到此目的。
action属性的值指定了表单提交到服务器的地址。
例如:
<form action="/url-where-you-want-to-submit-form-data"></form>
11. Add a Submit Button to a Form
让我们来为你的form添加一个submit(提交)按钮,点击这个按钮,表单中的数据将会被发送到你通过action属性指定的地址上。
下面是submit按钮的例子:
<button type="submit">this button submits the form</button>
12. Use HTML5 to Require a Field
当你设计表单时,你可以指定某些选项为必填项(required),只有当用户填写了该选项后,用户才能够提交表单。
例如,如果你想把一个文本输入字段设置为必填项,在你的input元素中加上required属性就可以了,你可以使用:
<input type="text" required>
13. Create a Set of Radio Buttons
类比是最好的学习方式,当你搞不清一个概念时,最好在生活中找到对应的案例。
单选就是你只能在多个选项中选择一个,就好比你有很多追求者,但却只能选择一个结婚。
多选一的场景就用radio button(单选按钮)
单选按钮只是input输入框的一种类型。
每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
注意:所有关联的单选按钮应该使用相同的name属性。
下面是一个单选按钮的例子:
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
14. Create a Set of Checkboxes
当你在大学选课时,面对几百门课程,而因为时间和精力,你只能从中选择十几门。
这样的场景就用checkboxes(复选按钮)。
复选按钮是input的输入框的另一种类型。
每一个复选按钮都应该嵌套进label元素中。
所有关联的复选按钮应该具有相同的name属性。
下面是复选按钮的例子:
<label><input type="checkbox" name="personality"> Loving</label>
15.Check Radio Buttons and Checkboxes by Default
使用checked属性,你可以设置复选按钮和单选按钮默认被选中。
为此,只需在input元素中添加属性checked
<input type="radio" name="test-name" checked>