HTML 基础总结一

紫藤庄园2025年1月10日...大约 7 分钟

HTML 基础总结一

开发环境

VSCODE
Open In Browser
Chinese 汉化插件

HTML 骨架

html：整个网页。
head：网页头部，存放给浏览器看的代码。
body：网页主体，存放给用户看的代码。

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>网页主体</body>
</html>

提示

vscode 快速生成骨架快捷键 ! + enter/tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTML 标签的关系

父子关系或者叫嵌套关系。
兄弟关系或者叫并列关系。

注释

学习和工作中，关键代码都要加注释。方便阅读理解。

<!-- 我是注释 -->
vscode 添加注释快捷键 ctrl+/

标题标签

h1 ~ h6 独占一行。
一个网页 h1 只出现一次。存放标题或者logo。
h2 ~ h6次数无限制。

<h1>一级标题</h1>
<h2>二级标题</h2> 
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

段落标签独占一行。
两个段落标签之间有空隙。

<p>段落标签</p>

文本格式化标签

strong/b：加粗。
em/i：倾斜。
ins/u：下划线。
del/s：删除线。

图像标签

浏览器等比例缩放图片。

<img src="图像的URL" alt="图片不显示时替换文本" title="鼠标放在上面提示文本" width=300 height=300>

音频标签

src：音频路径(必须的属性)，支持mp3、ogg、wave格式文件。
controls：控制面板。在h5中，属性名和属性值一样可以简写为一个单词。
loop：循环播放。在h5中，属性名和属性值一样可以简写为一个单词。
autoplay：自动播放。在h5中，属性名和属性值一样可以简写为一个单词。

<audio src="音频文件URL" controls loop autoplay></audio>

视频标签

<video src="视频文件URL" controls loop muted autoplay></video>

路径

相对路径。
绝对路径。

./  进入当前文件夹。
../ 进入上一级文件夹。
../../  进入上上一级文件夹。

超链接标签

<a href="https://www.baidu.com" target="_blank">跳转到百度</a>

列表

布局内容排列整齐的区域。

包含有序、无序和定义列表。

无序列表：布局排列整齐的不需要规定顺序的区域。ul标签只能嵌套li。

<ul>
  <li>无序列表第一项</li>
  <li>无序列表第二项</li>
  <li>无序列表第三项</li>
</ul>

有序列表：布局排列整齐的需要规定顺序的区域。ol标签只能嵌套li。

<ol>
  <li>有序列表第一项</li>
  <li>有序列表第二项</li>
  <li>有序列表第三项</li>
</ol>

定义列表：dl标签只能嵌套dt和dd。dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。

<dl>
 <dt>定义列表标题</dt>
 <dd>定义列表描述/详情</dd>
 <dd>定义列表描述/详情</dd>
</dl>

表格

table 标签嵌套 tr，tr 标签嵌套 td/th。

table 是表格。
tr 是行。
th 是表头单元格。
td 是内容单元格。

<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>88</td>
    <td>99</td>
    <td>187</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>88</td>
    <td>88</td>
    <td>176</td>
  </tr>
</table>

提示

表格中的内容会撑开表格的宽度和高度

表格结构标签，让表格的结构更加清晰，但效果和上面未添加时是一样的。

thead 是表格头部。
tbody 是表格体区域。
tfoot 是表格底部。

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>88</td>
      <td>99</td>
      <td>187</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>88</td>
      <td>88</td>
      <td>176</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>总结</th>
      <th>全市第一</th>
      <th>全市第一</th>
      <th>全市第一</th>
    </tr>
  </tfoot>
</table>

合并单元格：将多个单元格合并成一个单元格，以合并同类信息。

明确合并目标。
保留最左最上的单元格，添加属性。
- 跨行合并：保留最上单元格，添加属性 rowspan。
- 跨列合并：保留最左单元格，添加属性 colspan。
删除其他单元格。

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td rowspan="2">88</td>
      <td>99</td>
      <td>187</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>88</td>
      <td>176</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>总结</th>
      <th colspan="3">全市第一</th>
    </tr>
  </tfoot>
</table>

表单

作用：搜集用户信息。

input 标签 type 属性值为 text 时是文本框。
input 标签 type 属性值为 password 时是密码框。
input 标签 type 属性值为 radio 时是单选框。name 属性值可以将多个 radio 分组。
input 标签 type 属性值为 checkbox 时是多选框。
input 标签 type 属性值为 file 时是上传文件。multiple 属性可以选择多个文件。
textarea 多行文本域标签。

文本框：<input type="text" placeholder="提示信息">
密码框：<input type="password" placeholder="提示信息">
单选框：<input type="radio" name="gender" checked>男 
       <input type="radio" name="gender">女
多选框：<input type="checkbox" checked name="aihao"> 打游戏 
       <input type="checkbox" checked name="aihao"> 跑步 
       <input type="checkbox" name="aihao"> 读书
文件上传：<input type="file" multiple>
文本域：<textarea>请输入多行文本</textarea>

下拉菜单

select 标签嵌套 option，select是下拉菜单整体，option 是下拉菜单的每一项。

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>天津</option>
</select>

label

增大点击范围，可以用于文本框、密码框、上传文件、单选框、复选框、文本域等控件上。

label 标签只包裹文字内容，不包裹表单控件。需要设置 label标签的 for 属性值和表单控件的 id 属性值相同。
label 标签包裹文字和表单控件，不需要设置 for 属性和表单的 id。

性别：
<input type="radio" id="man" name="gender">
<label for="man">男</label>
<label><input type="radio" name="gender">女</label>

按钮

button 标签 type 属性值为 submit 时是提交按钮，点击后可以提交数据到后台。
button 标签 type 属性值为 reset 时是重置按钮，点击后将表单控件恢复默认值。
button 标签 type 属性值为 button 时是普通按钮，默认没有功能，一般配合js一起使用。

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

<form>
  文本框：<input type="text" placeholder="请输入用户名"><br>
  密码框：<input type="password" placeholder="请输入密码"><br>
  <button type="submit">提交按钮</button>
  <button type="reset">重置按钮</button>
</form>

无语义标签

作用：布局网页(划分网页区域，摆放内容)

div：独占一行。
span：不换行。

<div>这是div标签，换行</div>
<div>这是div标签，换行</div>
<span>这是span标签，不换行</span>
<span>这是span标签，不换行</span>

字符实体

作用：在网页中显示预留字符。

空格： 
小于号：<
大于号：>