HTML总结

HTML总结

目录

1. HTML简介

2. HTML特点

3. 标签

---

正文

HTML

称为超⽂本连接，是⼀种标识性语⾔。通过标记符号来标记要显⽰的部分⽹页⽂件本⾝是⼀种⽂本⽂件，通过在⽂本⽂件中添加标 记符，可以告诉浏览器如何显示其中的内容。

HTML特点

**1. **简易性：

超级⽂本标记语⾔采⽤超集⽅式，从⽽更加灵活⽅便。

2. 可扩展性：

超级⽂本标记语⾔的⼴泛应⽤带来了加强功能，增加标识符等要求，超级⽂本标记语⾔采取⼦类元素的⽅式，为系统扩展带来保证。

**3. **平台无关性：

虽然个⼈计算机⼤行其道，但使用MAC等其他机器的⼤有⼈在，超级⽂本标记语⾔可以使⽤在⼴泛的平台上，这也是万维网盛⾏的另⼀个 原因。

**4. **通⽤性：

HTML是⽹络的通⽤语⾔，⼀种简单、通⽤的全置标记语⾔。它允许⽹页制作⼈建⽴⽂本与图⽚相结合的复杂页⾯，这些页⾯可以被网上任何其他⼈浏览到，⽆论使⽤的是什么类型的电脑或浏览器。

标签

1. 块级元素（block）：独占⼀⾏，宽⾼可控，宽度默认，可以放任何元素，⽂字类元素不允许放其他块级元素。例如：div、p、h1~h6、ul、ol、li等标签；

2. ⾏内元素又称为内联元素（inline）：⼀⾏可以写多个，宽⾼不可控，只能放⽂本或其他⾏内元素。例如：a、b、i、em、span、strong等标签；

3. ⾏内块元素（inline-block）：img、input、td等。

---

标题

HTML 提供了从大到小6级标题，分别是：h1~h6

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

文本格式化

这些标签可用于文本的格式化，其余标签不建议用来进行格式化的设置 。

<del>定义删除字</del>
<ins>定义插入字</ins>
<u>定义非文本注释的嵌入式文本范围</u>
<small>定义小号字</small>
<strong>定义加重语气</strong>
<em>定义着重文字</em>
<s>定义加删除线文本定义</s>

超链接

HTML 使用超链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

• 一个未访问过的链接显示为蓝色字体并带有下划线。
• 访问过的链接显示为紫色并带有下划线。
• 点击链接时，链接显示为红色并带有下划线。

<a href="https://www.baidu.com" target="_blank">新页面打开百度</a>
<a href="https://www.baidu.com" target="_self">当前页面打开百度</a>
<h1 id="h1">h1</h1>
<a href="#h1">跳转到h1</a>

图片

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址

<img alt="风景图"  width="300" height="250"  src="https://x0.ifengimg.com/cmpp/fck/2020_30/65cca65a549d6c2_w1024_h578.jpg" >

表格

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

列表

HTML 支持有序、无序和定义列表:

1. 无序列表

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

2. 标签。

3. <ul>
       <li>项1</li>
       <li>项2</li>
   </ul>
   

4. 有序列表

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

   <ol>
       <li>项1</li>
       <li>项2</li>
   </ol>
   

5. 自定义列表

   自定义列表不仅仅是一列项目，而是项目及其注释的组合。

   自定义列表以<dl>标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

   <dl>
       <dt>自定义项1</dt>
       <dd>- 定义1</dd>
       <dt>自定义项2</dt>
       <dd>- 定义2</dd>
   </dl>
   

表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。

我们可以使用 <form> 标签来创建表单:

<form>
    文本输入
    <input type="text" name="text"placeholder="请输入文本">
    密码输入
    <input type="password" name="ps" placeholder="请输入密码">
    数字输入
    <input type="number" name="age" min="18" value="18" placeholder="请输入数字">
    单选
    <input type="radio" name="gender" value="male" checked> 男<br>
 	<input type="radio" name="gender" value="female"> 女<br>
    下拉框
    <select name="select">
        <option value="1">选项1</option>
        <option value="2" selected>选项2</option>
        <option value="3">选项3</option>
  	</select>
    多选
    <input type="checkbox" name="checkbox1" value="1">选项1<br>
    <input type="checkbox" name="checkbox2" value="2" checked>选项2<br>
    <input type="checkbox" name="checkbox3" value="3">选项3<br>
    文件
    <input type="file" name="photo">
    文本域
    <textarea name="message" rows="15" cols="20">
    提交
    <input type="submit" value="提 交">
    重置
  	<input type="reset" value="重 置">
</form>