h1
元素通常被用作主标题,h2
元素通常被用作副标题,还有h3
、h4
、h5
、h6
元素,它们分别用作不同级别的标题。
用 p 元素代表段落
所有的img
元素必须有alt
属性,alt
属性的文本是当图片无法加载时显示的替代文本,这对于通过屏幕阅读器来浏览网页的用户非常重要。
注意:如果图片是纯装饰性的,用一个空的alt
是最佳实践。理想情况下,alt
属性不应该包含特殊字符,除非需要。
在 HTML 中,注释的开始标记是<!- -
,结束标记是- ->
。
用锚点实现网页内部跳转
设置锚点的href
属性值为井号#
加上想跳转区域对应的id
属性值,这样就可以创建一个内部跳转。id
是用来描述网页元素的一个属性,它的值在整个页面中唯一。
下面是用来创建内部锚点的例子:
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
当用户点击了Contacts
链接,页面就会跳转到网页的Contacts区域。
通过修改href
属性为#footer
来更改外部链接为内部链接,同时修改文本cat photos
为Jump to Bottom
。
移除 target="_blank"
属性避免点击链接会打开新的元素页。
给输入框添加占位符文本
Placeholder
占位符是用户在input
输入框中输入任何东西前的预定义文本。
给表单添加一个必填字段
<input type="text" required>
单选按钮
radio buttons
(单选按钮)就好比单项选择题,正确答案只有一个。
最佳实践是在label
元素上设置for属性,让其值与单选按钮的id
属性值相等,这样就在label
元素和它的子元素单选按钮之间创建了一种链接关系。例如:
<label for="apple">
<input id="apple" type="radio" name="fruit">apple
</label>
<label for="orange">
<input id="orange" type="radio" name="fruit">orange
</label>
checkboxes
(复选框)就好比多项选择题,正确答案有多个。复选框是
input
输入框的另一种类型。每一个复选框都应该嵌套在它自己的
label
(标签)元素中。所有关联的复选框应该拥有相同的
name
属性。最佳实践是在
label
元素上设置for
属性,让其值与复选框的id
属性值相等,这样就在label
元素和它的子元素复选框之间创建了一种链接关系。例如:下面是一个复选框的例子:
<label for="apple"><input id="apple" type="checkbox" name="personality"> apple</label><label for="banana"><input id="banana" type="checkbox" name="personality"> banana</label><label for="orange"><input id="orange" type="checkbox" name="personality"> orange</label>给单选按钮和复选框添加默认选中项
<input type="radio" name="test-name" checked><form action="/submit-cat-photo"><label><input type="radio" name="indoor-outdoor" checked>室内</label><label><input type="radio" name="indoor-outdoor">室外</label><br><label><input type="checkbox" name="personality" checked>忠诚</label><label><input type="checkbox" name="personality">懒惰</label><label><input type="checkbox" name="personality">积极</label><br><input type="text" placeholder="猫咪图片地址" required><button type="submit">提交</button></form>声明 HTML 文档的文档类型
在文档的顶部,你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言,大部分浏览器都支持 HTML 的最新标准,也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。
你可以通过
<!DOCTYPE ...>
来告诉浏览器你使用的是 HTML 的哪个版本,"...
" 部分就是版本的数字信息。<!DOCTYPE html>
对应的就是 HTML5。
!
和大写的DOCTYPE
是很重要的,特别是对于老的浏览器。但html
大写小写都可以。接下来,所有的 HTML 代码都必须位于
html
标签中。其中<html>
位于<!DOCTYPE html>
的后面,</html>
位于网页的结尾。这是网页结构一个例子:
<!DOCTYPE html>
<html>
<!-- Your HTML code goes here -->
</html>
html
的结构主要分为两大部分:head
、body
。关于网页的描述都应该放入head
标签,网页的内容都应该放入body
标签。比如
link
、meta
、title
和style
都应该放入head
标签。这是网页布局的一个例子:
<!DOCTYPE html>
<html>
<head>
<!-- metadata elements -->
</head>
<body>
<!-- page contents -->
</body>
</html>