html
......
(数字代表不同级别的标题)
.....
表示段落
<!-- -->表示注释
访问主要的网页
2、可以使用img元素来为网站添加图片,其中src属性指向图片的地址
<img src="https://www.freecatphotoapp.com/your-image.jpg">
img元素没有结束标签
<img src="图片地址" title="图片的信息" alt="图片不正常时,内容代替图片"
3.cat photosa>超链接
4.target
是锚点元素的一个属性,它用来指定链接的打开方式。 属性值 _blank
表示链接会在新标签页打开。 href
是锚点元素的另一个属性,它用来指定链接的 URL:
<a href="https://www.freecodecamp.org" target="_blank"> ... </a>
如果把 a
的 href
属性值设置为 #
,创建的是一个死链接(不跳转到其他画面)。
可以把现有的img图片元素前面加......
5.无序列表以 <ul>
开始,中间包含一个或多个 <li>
元素, 最后以 </ul>
结束。
6.有序列表以 <ol>
开始,中间包含一个或多个 <li>
元素。 最后以 </ol>
结束。
7.input
输入框可以让你轻松获得用户的输入
<input type="text">
把 input
输入框的 placeholder
占位符文本设置为 "cat photo URL"。
<input type="text" placeholder="cat photo URL">
form嵌套input
<input type="text" placeholder="cat photo URL">
</form>
8.当你设计表单时,你可以指定某些字段为必填项(required),只有当用户填写了该字段后,才可以提交表单。
如果你想把文本输入框设置为必填项,在 input
元素中加上 required
属性就可以了,例如:<input type="text" required>
最佳实践是在 label
元素上设置 for
属性,让其值与相关联的 input
单选按钮的 id
属性值相同。 这使得辅助技术能够在标签和相关的 input
元素之间建立关联关系。 例如:
<input id="indoor" type="radio" name="indoor-outdoor"> <label for="indoor">Indoor</label>
9.我们也可以在 label
标签中嵌入 input
元素:
<label for="indoor"> <input id="indoor" type="radio" name="indoor-outdoor">Indoor </label>
10.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>
11.在表格中添加一对单选按钮,每个按钮嵌套在自己的 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>
提交表单时,所选项的值会发送给服务端。 radio
和 checkbox
的 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>
这里有两个 radio
单选框。 当用户提交表单时,如果 indoor
选项被选中,表单数据会包含:indoor-outdoor=indoor
。 也就是所选项的 name
和 value
属性值。
如果没有指明 value
属性值,则会使用默认值做为表单数据提交,也就是 on
。 在这种情况下,如果用户选中 "indoor" 选项然后提交表单,表单数据则会包含 indoor-outdoor=on
。 这样的表单数据看起来不够直观,因此最好将 value
属性值设置为一些有意义的内容。
12.用 checked
属性把第一个复选框和单选按钮都设置为默认选中。
在一个 input 元素里面添加 checked
这个词,即可实现。 例如:
<input type="radio" name="test-name" checked>
后面+checked
13.div
元素也叫内容划分元素,是一个包裹其他元素的通用容器。
它也是 HTML 中出现频率最高的元素。
和其他普通元素一样,你可以用 <div>
来标记一个 div
元素的开始,用 </div>
来标记一个 div
元素的结束。
将你的列表“猫喜欢的三件事”和“猫最讨厌的三件事”放入同一个 div
元素中。
提示:你可以在第一个 <p>
之前插入 div
开始标记,在 </ol>
之后插入 div
结束标签。 这样,所有的列表都会位于 div
之内。
14.版本,"...
" 部分就是版本号。 <!DOCTYPE html>
对应的就是 HTML5。
!
和大写的 DOCTYPE
是很重要的,尤其是对那些老的浏览器。 但 html
无论大写小写都可以。
所有的 HTML 代码都必须位于 html
标签中。 其中 <html>
位于 <!DOCTYPE html>
之后,</html>
位于网页的结尾。
这是一个网页结构的列子。 你的 HTML 代码会在两个 html
标签之间。
<!DOCTYPE html> <html> </html>
-
html
的结构主要分为两大部分:head
和body
。 网页的描述应放入head
标签, 网页的内容(向用户展示的)则应放入body
标签。比如
link
、meta
、title
和style
都应放入head
标签。这是网页布局的一个例子: