上一节我们写了标题和段落。现在把一行 HTML 拆开,就能知道应该在哪里改文字、在哪里加设置。元素(element)是网页内容的一个组成部分;标签(tag)是源码中用尖括号写出的标记。对段落而言,开始标签、内容和结束标签一起组成整个元素。
<p>周六见!</p><p> 是开始标签,周六见! 是内容,</p> 是结束标签。结束标签的斜杠写在元素名称前。本课程统一使用小写标签,并显式写出这些元素的结束标签,方便你检查配对关系。
在开始标签中添加属性
属性(attribute)为元素补充信息。例如 title 属性可以提供额外说明;在许多桌面浏览器中,用鼠标悬停一会儿会出现提示。
<p title="集合时间是上午十点">周六见!</p>title 是属性名,等号后面引号中的文字是属性值。它位于开始标签内部,与 p 之间用空格分隔;正文仍然是“周六见!”。请使用英文直引号 ",不要使用中文弯引号。属性值一般加引号,这样包含空格的值也能完整表达。多个属性之间也要用空格分开。
提示框不是可靠的必读信息展示方式:触屏用户不一定能悬停,键盘和辅助技术的支持也有差异。集合时间这类重要内容仍然应该放在正文中。这个例子主要帮助我们认清属性的位置。
元素也可以放在另一个元素里面
在段落中标出重要内容,可以使用 strong。它表示内容很重要,默认常显示为粗体;第二章会进一步比较不同文字标签。
<p>请带上<strong>自己的书</strong>。</p>这叫嵌套:strong 放在 p 内部。先打开外层的 p,再打开内层的 strong;关闭时顺序相反,先关 strong,再关 p。不要写成交叉的 <p><strong>文字</p></strong>,即使浏览器尝试修复,也不能证明源码正确。
不是每种元素都有结束标签
br 用来在一段内容中换行,写成 <br> 即可。它属于空元素(void element),不能容纳子内容,也不写 </br>。后面会遇到的 img、input 和 meta 也属于这一类。“空元素”并不是指内容刚好为空的 <p></p>,而是 HTML 规定的一类元素。
在 Lab 中切换属性示例和嵌套示例。先读开始标签,再找对应的结束标签,最后修改 strong 包住的范围,看看只有哪几个字发生变化。
页面实验:元素、标签与属性
先切换对照示例,再按照观察提示修改一处 HTML,比较源码与真实页面。示例中的英文短句可以替换成自己的文字。
尝试在段落上悬停。title 属性不会替代段落正文。
预览保留浏览器默认的标题、段落和表单外观。示例切换会替换编辑内容;重置实验可恢复初始状态。可点击页内链接、输入文字和选择选项;此练习预览不提交数据、不运行脚本。要在本机尝试,将完整代码保存为 index.html 后用浏览器打开。
知识测验
动手编写:元素、标签与属性
新建 index.html,按照下面的要求编写完整页面;保存并用浏览器打开,边操作边检查结果。参考答案是一种实现,文字内容可以不同。
- 写一个 p,正文为“请带水杯”,用 strong 标记“水杯”。
- 在 p 的开始标签中加入 title="活动提醒",检查标签关闭顺序。