HTML快速入门（基础标签、图片、音频、视频标签、超链接标签、列表标签、表格标签、布局标签、表单标签）

电玩女神 2023-10-07 19:52 72阅读 0赞

#### 文章目录 ####

*  什么是HTML?
 *   *  HTML快速入门【案例】
     *  总结
     *  基础标签
     *  图片、音频、视频标签
     *  总结
     *  超链接标签
     *  列表标签
     *  表格标签
     *  布局标签
     *  表单标签
     *  表单标签-表单项

## 什么是HTML? ##

*  HTML 是一门语言，所有的网页都是用 HTML 这门语言编写的
 *  HTML: 超文本语言
    
     *  超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容
     *  标记语言：由标签构成的语言
 *  HTML 运行在浏览器上，HTML 标签由浏览器来解析
 *  HTML 标签都是预定好的。例如：使用< img >展示图片
 *  W3C标准：网页主要由三部分组成
    
     *  结构 ：HTML
     *  表现：CSS
     *  行为:Java Script

### HTML快速入门【案例】 ###

![在这里插入图片描述][01fa72f888ad4253b046914f23c4e5e3.png]  
1.新建文本文件，后缀名改为 .html  
2.编写 HTML 结构标签  
3.在< body >中定义文字  
![在这里插入图片描述][577b3eaa45a84bb2bd21348a4ae5f6d9.png]

### 总结 ###

1.HTML 文件是以 .htm 或 .html 为扩展名  
2. HTML结构标签

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt; HTML &gt;</td> 
   <td>定义 HTML 文档</td> 
  </tr> 
  <tr> 
   <td>&lt; head &gt;</td> 
   <td>定义关于文档的信息</td> 
  </tr> 
  <tr> 
   <td>&lt; title &gt;</td> 
   <td>定义文档的标题</td> 
  </tr> 
  <tr> 
   <td>&lt; body &gt;</td> 
   <td>定义文档的主体</td> 
  </tr> 
 </tbody> 
</table>

3.HTML标签不区分大小写  
4.HTML 标签属性值 单双引皆可  
5 HTML 语法松散

### 基础标签 ###

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt; h1 &gt;- &lt; h6 &gt;</td> 
   <td>定义标题，h1 最大，h6最小</td> 
  </tr> 
  <tr> 
   <td>&lt; font &gt;</td> 
   <td>定义文本的字体 、字体尺寸、字体颜色</td> 
  </tr> 
  <tr> 
   <td>&lt; b &gt;</td> 
   <td>定义粗体</td> 
  </tr> 
  <tr> 
   <td>&lt; i &gt;</td> 
   <td>定义斜体文体</td> 
  </tr> 
  <tr> 
   <td>&lt; u &gt;</td> 
   <td>定义文本下划线</td> 
  </tr> 
  <tr> 
   <td>&lt; center &gt;</td> 
   <td>定义文本居中</td> 
  </tr> 
  <tr> 
   <td>&lt; p &gt;</td> 
   <td>定义段落</td> 
  </tr> 
  <tr> 
   <td>&lt; br&gt;</td> 
   <td>定义拆行</td> 
  </tr> 
  <tr> 
   <td>&lt; hr&gt;</td> 
   <td>定义水平线</td> 
  </tr> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/7e54e453eb5c47d8b506afe9ba61b97b.png" alt="在这里插入图片描述"></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

*  转义字符

![在这里插入图片描述][3a42b92d9ff94c57abb7c6137b5b012b.png]

### 图片、音频、视频标签 ###

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt; img &gt;</td> 
   <td>定义图片</td> 
  </tr> 
  <tr> 
   <td>&lt; audio &gt;</td> 
   <td>定义音频</td> 
  </tr> 
  <tr> 
   <td>&lt; video &gt;</td> 
   <td>定义视频</td> 
  </tr> 
 </tbody> 
</table>

*  img:定义图片
 *  src:规定显示图像的 URL（统一资源定位符）
 *  height:定义图像的高度
 *  width:定义图像的宽度
 *  audio:定义音频。支持的音频格式：MP3、WAV、OGG
    
     *  src:规定音频的 URL
     *  controls:显示播放控件
 *  video:定义视频。支持的音频格式：MP4、WebM、OGG
    
     *  src:规定视频的 URL
     *  controls:显示播放控件

### 总结 ###

1.图片、音频、视频标签  
![在这里插入图片描述][3b41eb4fb930400cbf779811baad3a48.png]  
2.尺寸单位：px和%  
3.路径：绝对路径和相对路径

### 超链接标签 ###

![在这里插入图片描述][d4f4226ca2e140e5a4fe02742d4d6ef4.png]

*  href:指定访问资源的 URL
 *  target:指定打开资源的方式
    
     *  \_self:默认值，在当前页面打开
     *  \_blank:在空白页面打开

### 列表标签 ###

*  有序列表（order list）  
    1.咖啡  
    2.茶  
    3.牛奶  
    ![在这里插入图片描述][2fcd0871767e4c538bf8a599ac676e06.png]
 *  无序列表
 *  咖啡
 *  茶
 *  牛奶  
    ![在这里插入图片描述][9970dcd79a7249e6b79e6051a0ec09d7.png]  
    ![在这里插入图片描述][a123f6a45f8c4e87aa7c708509636ae5.png]

### 表格标签 ###

![在这里插入图片描述][e78b3808edf7480d9d6cefa2c9624e3a.png]  
![在这里插入图片描述][a473377e6a094d3cbc2314a3f819b974.png]

*  table:定义表格
    
     *  border：规定表格边框的宽度
     *  width：规定表格的宽度
     *  cellspacing:规定单元格之间的空白
 *  tr:定义行
    
     *  align:规定表格行的内容对齐方式
 *  td:定义单元格
    
     *  rowspan:规定单元格可横跨的行数
     *  colspan:规定单元格可横跨的列数

![在这里插入图片描述][0a69e9add91a4459a55879dd45f2761b.png]

### 布局标签 ###

![在这里插入图片描述][2a63c8b1ea6046a2989670169702faf4.png]

### 表单标签 ###

*  表单：在网页中主要负责数据采集功能，使用标签定义表单
 *  表单项（元素）：不同类型的 input 元素、下拉列表、文本域等  
    ![在这里插入图片描述][35303324c99a4739a2b27037360f3b8e.png]
 *  form:定义表单
 *  action：规定当提交表单时向何处发送表单数据，URL
 *  method:规定用于发送表单数据的方式  
    \- get:浏览器会将数据直接附在表单的 action URL之后，大小有限制  
    \- post:浏览器会将数据放到 http请求消息体中。大小无限制

### 表单标签-表单项 ###

*  < input >:表单项，通过type属性控制输入形式
 *  < select >:定义下拉列表，< option>定义列表项  
    ![在这里插入图片描述][96b6fb8c717d40cd8272e0fd763f226b.png]
 *  < textarea>:文本域  
    ![在这里插入图片描述][b0937a4e6ae546018ae33c7fb3614f21.png]  
    ![在这里插入图片描述][a1ed38c8bc914a60b0e3cdddf8a7c4d2.png]

[01fa72f888ad4253b046914f23c4e5e3.png]: https://img-blog.csdnimg.cn/01fa72f888ad4253b046914f23c4e5e3.png
[577b3eaa45a84bb2bd21348a4ae5f6d9.png]: https://img-blog.csdnimg.cn/577b3eaa45a84bb2bd21348a4ae5f6d9.png
[3a42b92d9ff94c57abb7c6137b5b012b.png]: https://img-blog.csdnimg.cn/3a42b92d9ff94c57abb7c6137b5b012b.png
[3b41eb4fb930400cbf779811baad3a48.png]: https://img-blog.csdnimg.cn/3b41eb4fb930400cbf779811baad3a48.png
[d4f4226ca2e140e5a4fe02742d4d6ef4.png]: https://img-blog.csdnimg.cn/d4f4226ca2e140e5a4fe02742d4d6ef4.png
[2fcd0871767e4c538bf8a599ac676e06.png]: https://img-blog.csdnimg.cn/2fcd0871767e4c538bf8a599ac676e06.png
[9970dcd79a7249e6b79e6051a0ec09d7.png]: https://img-blog.csdnimg.cn/9970dcd79a7249e6b79e6051a0ec09d7.png
[a123f6a45f8c4e87aa7c708509636ae5.png]: https://img-blog.csdnimg.cn/a123f6a45f8c4e87aa7c708509636ae5.png
[e78b3808edf7480d9d6cefa2c9624e3a.png]: https://img-blog.csdnimg.cn/e78b3808edf7480d9d6cefa2c9624e3a.png
[a473377e6a094d3cbc2314a3f819b974.png]: https://img-blog.csdnimg.cn/a473377e6a094d3cbc2314a3f819b974.png
[0a69e9add91a4459a55879dd45f2761b.png]: https://img-blog.csdnimg.cn/0a69e9add91a4459a55879dd45f2761b.png
[2a63c8b1ea6046a2989670169702faf4.png]: https://img-blog.csdnimg.cn/2a63c8b1ea6046a2989670169702faf4.png
[35303324c99a4739a2b27037360f3b8e.png]: https://img-blog.csdnimg.cn/35303324c99a4739a2b27037360f3b8e.png
[96b6fb8c717d40cd8272e0fd763f226b.png]: https://img-blog.csdnimg.cn/96b6fb8c717d40cd8272e0fd763f226b.png
[b0937a4e6ae546018ae33c7fb3614f21.png]: https://img-blog.csdnimg.cn/b0937a4e6ae546018ae33c7fb3614f21.png
[a1ed38c8bc914a60b0e3cdddf8a7c4d2.png]: https://img-blog.csdnimg.cn/a1ed38c8bc914a60b0e3cdddf8a7c4d2.png