大部分 HTML 元素都有一个开始标签和一个结束标签。
开始标签像这样:<h1>
结束标签像这样:</h1>
h1 元素通常被用作主标题,h2 元素通常被用作副标题, 还有 h3、h4、h5、h6 元素,它们分别用作不同级别的标题。
p 元素是网站上段落文本使用的元素。 p 是“paragraph(段落)”的缩写。
你可以像这样创建一个段落:<p>I'm a p tag!</p>
用占位符文本填充空白
Web 开发者通常用 lorem ipsum text 来做占位符。
在 HTML 中,注释的开始标签是 <!--
,结束标签是-->
。
HTML5 引入了很多更具描述性的 HTML 元素, 包括 main、header、footer、nav、video、article、section 等等。
这些元素让 HTML 更易读,同时有助于搜索引擎优化和无障碍访问。 main 元素让搜索引擎和开发者能很快地找到网页的主要内容。
给网站添加图片
使用 img 元素来为网站添加图片,其中 src 属性指向图片的地址。
例如:
<img src="https://www.freecatphotoapp.com/your-image.jpg">
注意:img 元素是没有结束标签的。
所有的 img 元素 必须 有 alt 属性。 alt 的属性值有两个作用,第一个作用是让屏幕阅读器可以知晓图片的内容,这会对网页的可访问性有很大提升;另一个作用是当图片无法加载时,页面需要显示的替代文本。
注意: 如果图片是纯装饰性的,把 alt 的属性值设置为空是最佳实践。
让我们给上面例子的 img 添加 alt 属性。
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
用 a 实现网页间的跳转
可以用 a(Anchor,简写为 a)来实现网页间的跳转。
a 需要一个 href 属性指向跳转的目的地。 同时,它还应有内容。 例如:
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
用 a 实现网页内部跳转
a(anchor)元素也可以用于创建内部链接,跳转到网页内的各个不同部分。
要创建内部链接,你需要将链接的 href 属性值设置为一个哈希符号 # 加上你想内部链接到的元素的 id,通常是在网页下方的元素。 然后你需要将相同的 id 属性添加到你链接到的元素中。 id 是描述网页元素的一个属性,它的值在整个页面中唯一。
当用户点击了 Contacts 链接,页面就会跳转到网页的Contacts区域
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
将 a 嵌套在段落中
可以在其他文本元素内嵌套链接。
<p>
Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>
target
target是锚点元素的一个属性,它用来指定链接的打开方式。 属性值 _blank 表示链接会在新标签页打开。 href 是锚点元素的另一个属性,它用来指定链接的 URL:
<a href="https://www.freecodecamp.org" target="_blank"> link to www.freecodecamp.org </a>
a 元素内的文本 link to www.freecodecamp.org 叫作锚文本,会显示为一个可以点击的链接。
用 # 号来创建链接占位符
有时你想为网站添加一个 a 元素,但还不确定要将它链接到哪里。href 属性的当前值是指向“https://www.freecatphotoapp.com”。 请将 href 属性的值替换为#,以此来创建链接占位符。
例如: href="#"
给图片添加链接
你可以通过把元素嵌套进 a 里使其变成一个链接。
如果我们要把图片嵌套进 a 元素, 可以这样写:
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Three kittens running towards the camera."></a>
如果把 a 的 href 属性值设置为 #,创建的是一个死链接(不跳转到其他画面)。
创建一个无序列表
HTML 有一个特定的元素用于创建无序列表。
无序列表以 <ul>
开始,中间包含一个或多个<li>
元素, 最后以 <ul>
结束。
例如:
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
创建一个有序列表
HTML 中有用于创建有序列表的特定元素。
有序列表以 </ol>
开始,中间包含一个或多个 <li>
元素。 最后以 </ol>
结束。
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
创建一个输入框
input 输入框可以让你轻松获得用户的输入。
<input type="text">
注意 input 输入框是没有结束标签的。
给输入框添加占位符文本
占位符文本用户在 input 输入框中输入任何东西前的预定义文本。
<input type="text" placeholder="this is placeholder text">
创建一个表单
只通过 HTML 来实现发送数据给服务器的表单, 只需要给 form 元素添加 action 属性即可。
<form action="/url-where-you-want-to-submit-form-data">
<input>
</form>
给表单添加提交按钮
给表单添加一个 submit(提交)按钮。 点击提交按钮时,表单中的数据将会被发送到 action 属性指定的 URL (地址)上。
<button type="submit">this button submits the form</button>
给表单添加一个必填字段
当你设计表单时,你可以指定某些字段为必填项(required),只有当用户填写了该字段后,才可以提交表单。
如果你想把文本输入框设置为必填项,在 input 元素中加上 required 属性就可以了,例如:
<input type="text" required>
创建一组单选按钮
radio buttons(单选按钮)就好比单项选择题,正确答案只有一个。
单选按钮是 input 选择框的一种类型。
每一个单选按钮都应该嵌套在它自己的 label(标签)元素中。 这样,我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮,选中其中一个按钮,其他按钮即显示为未选中,以确保用户只提供一个答案。
下面是一个单选按钮的例子:
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
最佳实践是在 label 元素上设置 for 属性,让其值与相关联的 input 单选按钮的 id 属性值相同。 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。 例如:
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
我们也可以在 label 标签中嵌入 input 元素:
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
在表格中添加一对单选按钮,每个按钮嵌套在自己的 label 元素中。 一个选项应该是 indoor ,另一个选项应该是 outdoor。 两个按钮的 name 属性都是 indoor-outdoor,以创建一组单选按钮。
创建一组复选框
checkboxes(复选框)就好比多项选择题,正确答案有多个。
复选框是 input 选择框的一种类型。
每一个复选框都应该嵌套在它自己的 label(标签)元素中。 这样,我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的复选框应该拥有相同的 name 属性。
使得 input 与 label 关联的最佳实践是在 label 元素上设置 for 属性,让其值与相关联的 input 复选框的 id 属性值相同。
下面是一个复选框的例子:
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
使用单选框和复选框的 value 属性
如果没有指明 value 属性值,则会使用默认值做为表单数据提交,也就是 on。 在这种情况下,如果用户选中 “indoor” 选项然后提交表单,表单数据则会包含 indoor-outdoor=on。 这样的表单数据看起来不够直观,因此最好将 value 属性值设置为一些有意义的内容。
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
给单选按钮和复选框添加默认选中项
在一个 input 元素里面添加 checked 这个词,即可实现。 例如:
<input type="radio" name="test-name" checked>
元素嵌套
div 元素也叫内容划分元素,是一个包裹其他元素的通用容器。
和其他普通元素一样,你可以用<div>
来标记一个 div 元素的开始,用 </div>
来标记一个 div 元素的结束。
声明 HTML 的文档类型
<!DOCTYPE html>
<html>
</html>
定义 HTML 文档的 head 和 body
html 的结构主要分为两大部分:head 和 body。 网页的描述应放入 head 标签, 网页的内容(向用户展示的)则应放入 body 标签。
<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>
<div>
</div>
</body>
</html>
更改文本的颜色
需要修改 color 属性值。
以下是将 h2 元素设置为蓝色的方法:
<h2 style="color: blue;">CatPhotoApp</h2>
请注意,需要在内联 style 声明末尾加上 ;。