前端学习- HTML记个笔记后面复习用 HTML 是英文 Hyper Text Markup Language（超文本标

HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。大部分 HTML 元素都有一个开始标记和一个结束标记。例如:

<h1>一级标题</h1>
<h2>二级标题,有时也叫副标题</h2>
<p>段落内容</p>

1.注释:给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。

<!--注释内容-->

2.`main`元素让搜索引擎和开发者瞬间就能找到网页的主要内容。

<main><p></p>
</main>

3.用`img`元素来为你的网站添加图片，其中`src`属性指向一个图片的地址。

<img src="src属性指向一个图片的地址。" 
alt="`alt`属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。">

注意：img元素是没有结束标记的。

4.可以用`a`锚点（Anchor，简写 a）来实现网页间的跳转。

<a href="网址url">链接显示的文字内容</a>

锚点同样也可以用来在网页内不同区域的跳转。

设置锚点的href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。id是用来描述网页元素的一个属性，它的值在整个页面中唯一。

<a href="#contacts-header">Contacts</a>
....
<h2 id="contacts-header">Contacts</h2>

当用户点击了Contacts链接，页面就会跳转到网页的Contacts区域。

另外 a还有target="_blank"属性加上这个点击链接会打开新的元素页。

<a href="网址URL" target="_blank">点击这里会打开新的页面,因为锚点加了target=“_blank“这个属性</a>

还有锚点可以其他文本元素内嵌套链接

<p>View more <a href="网址URL",target ="_blank">学习资料</a></p>

例子的最后输出将会是这样：

View more 学习资料

有时你想为网站添加一个锚点，但如果你还不确定要将它链接到哪儿，这时可以使用固定链接。将href属性的值替换为#，也称为井号，就可以创建固定链接。(暂时不懂跳过可以,往后学习javascript)

5.以通过把元素嵌套进锚点里使其变成一个链接。

<a href="#"> <img src="网址URL" alt="图片刷新不出来时替代的文字"></a>

把现存的图片嵌套进锚点中。当鼠标悬停在图片上时，鼠标的光标如果从箭头指针变成手形指针，那么此时图片就是一个链接了。

6.无序列表

<ul>
  <li>牛奶</li>
  <li>奶酪</li>
</ul>

显示结果为:

牛奶
奶酪

7.有序列表

<ol>\
  <li>加菲猫</li>
  <li>哆啦A梦</li>
</ol>

显示结果为

加菲猫
哆啦A梦

8.通过给`form`表单添加一个`action`属性，你可以使用纯 HTML 来构建向服务器提交数据的 Web 表单。

<form action="/url-where-you-want-to-submit-form-data"></form>

9.输入框(有输入文字的,单选的,多选的)

创建一个type属性为text的input输入框

<input type="text">

注意：input输入框是没有结束标记的。

Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。

<input type="text" placeholder="占位,就是那种输入框里有字,但你也可以输入给他覆盖">

让我们来给表单添加一个submit提交按钮，当点击提交按钮时，表单中的数据将会被发送到action属性指定的地址上。

<form action="/提交到这个URL">

<input type="text" placeholder="占位符">

<button type="submit">提交按钮</button>

</form>

10.设计必填字段

当你设计表单时，你可以指定某些字段为必填项(required)，只有当用户填写了该字段后，才可以提交表单。如果你想把文本输入框设置为必填项，在input元素中加上required属性就可以了

<input type="text" placeholder="占位符"required>
<button type="submit">提交</button>

11.设计单选按钮

<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">indoor
</label>
<label for="outdoor">
<input id="outdoor" type="radio" name="indoor-outdoor">outdoor
</label>

radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。

单选按钮只是input输入框的一种类型。

每一个单选按钮都应该嵌套在它自己的label（标签）元素中。

所有关联的单选按钮应该拥有相同的name属性。

最佳实践是在label元素上设置for属性，让其值与单选按钮的id属性值相等，这样就在label元素和它的子元素单选按钮之间创建了一种链接关系。

12.设置复选(多选)按钮

<label><input type="checkbox" name="personality">忠诚</label>
<label><input type="checkbox" name="personality">懒惰</label>
<label><input type="checkbox" name="personality">积极</label>

checkboxes（复选框）就好比多项选择题，正确答案有多个。

复选框是input输入框的另一种类型。

每一个复选框都应该嵌套在它自己的label（标签）元素中。

所有关联的复选框应该拥有相同的name属性。

13.添加默认选项

通过添加checked属性，你可以设置某个单选按钮或多选按钮被默认选中。

为此，只需给input元素添加 "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>

14.元素嵌套

把无序列表、有序列表和段落都嵌套进同一个div元素。

<div>
<p>猫咪最喜欢的三件东西：</p>
<ul>
<li>猫薄荷</li>
<li>激光笔</li>
<li>千层饼</li>
</ul>
</div>
<div>
<p>猫咪最讨厌的三件东西：</p>
<ol>
<li>跳蚤</li>
<li>打雷</li>
<li>同类</li>
</ol>
</div>

div元素，也叫division（层）元素，是一个盛装其他元素的通用容器。它也是 HTML 中出现频率最高的元素。和其他普通元素一样，你可以用<div>来标记一个div元素的开始，用</div>来标记一个div元素的结束。

前端学习- HTML