html知识梳理汇总

html知识梳理汇总

只是一些关于html常用标签的小知识汇总，方便细碎时间看看回忆，基本上都是W3school和freeCodeCamp的

---

一、基础

1、标题

1. 是通过 h1-h6 等标签进行定义的。
2. h1 定义最大的标题，h6 定义最小的标题。
3. HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后

2、水平线

<hr /> 标签在 HTML 页面中创建水平线。

3、注释

<!-- -->

4、段落

<p>
浏览器会自动地在段落的前后添加空行。
（p 是块级元素）

5、换行

<br/>

6、文本格式化标签

1、<b>定义粗体文本。
2、<i> 定义斜体字。
3、<del> 定义删除字。

7、图片

<img>
1、src 指 “source”。值是图像的 URL 地址。
2、img 元素是是空标签,没有结束标签的
3、替换文本属性（Alt）
所有的 img 元素必须有 alt 属性。
alt 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本

8、链接

<a>
有两种使用 <a> 标签的方式：

一、通过使用 href 属性 - 创建指向另一个文档的链接

<a href="url">Link text</a>

href 属性规定链接的目标。

1、开始标签和结束标签之间的文字被作为超级链接来显示。
2、“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
3、使用 Target 属性，你可以定义被链接的文档在何处显示。
eg：下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

4、 href 属性的值替换为#，以此来创建链接占位符。例如: href="#"

二、通过使用 name 属性 - 创建文档内的书签

name 属性规定锚（anchor）的名称。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

要创建内部链接，你需要将链接的 href 属性值设置为一个哈希符号 # 加上你想内部链接到的元素的 id，通常是在网页下方的元素。 然后你需要将相同的 id 属性添加到你链接到的元素中。 id 是描述网页元素的一个属性，它的值在整个页面中唯一

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

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

9、列表

一、无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于·<ul> 标签。每个列表项始于<li>

• Coffee
• Milk

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

二、有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

1. Coffee
2. Milk

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

三、定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以<dd> 开始。

Coffee

Black hot drink

Milk

White cold drink

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

10、div和span

<div> 元素是块级元素

<div> 没有特定含义，是一个包裹其他元素的通用容器。
块级元素在浏览器显示时，通常会以新行来开始（和结束）

<span>元素是内联元素，可用作文本的容器。

内联元素在显示时通常不会以新行开始

---

二、表单

1、<form> 元素

表单用于收集用户输入。<form> 元素定义 HTML 表单：

<form>
 .
form elements
 .
</form>

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

2、<input>

<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性,有不同的输入显示。
注意 input 输入框是没有结束标签的

一、文本输入

<input type="text"> 定义用于文本输入的单行输入字段：
文本字段的默认宽度是 20 个字符

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

浏览器中显示：

二、单选按钮输入

<input type="radio"> 定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

浏览器中显示：

每一个单选按钮都应该嵌套在它自己的 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，以创建一组单选按钮。

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

三、占位符文本

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

<input type="text" placeholder="this is placeholder text">

浏览器中显示：

3、action属性

action 属性定义在提交表单时执行的动作。
我们可以只通过 HTML 来实现发送数据给服务器的表单， 只需要给 form 元素添加 action 属性即可。

<form action="action_page.php">

在上面的例子中，指定了某个服务器脚本来处理被提交表单；如果省略 action 属性，则 action 会被设置为当前页面。

给表单添加一个 submit（提交）按钮。 点击提交按钮时，表单中的数据将会被发送到 action 属性指定的 URL 上。

<form action="https://www.freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
      <button type="submit">Submit</button>
 </form>

浏览器上显示：

4、required 属性

如果你想把文本输入框设置为必填项，在 input 元素中加上 required 属性就可以了

<input type="text" required>

5、复选框

每一个复选框都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。所有关联的复选框应拥有相同的 name 属性。
使得 input 与 label 关联的最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 复选框的 id 属性值相同。

<label for="loving">
<input id="loving" type="checkbox" name="personality">
 Loving
</label>

6、value属性

value 属性规定输入字段的初始值
提交表单时，所选项的值会发送给服务端。 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 属性值设置为一些有意义的内容。

7、checked属性

checked 属性把复选框和单选按钮都设置为默认选中。

8、密码输入

输入类型：password
<input type="password">定义密码字段：
password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form> 

浏览器中显示：

9、html5

HTML5 输入类型
HTML5 增加了多个新的输入类型：

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。