计算机知识杂货铺

外观

HTML

复制页面

约 8678 字大约 29 分钟

2026-04-04

文档

W3C

https://www.w3school.com.cn

MDN

https://developer.mozilla.org/zh-CN

image-20220223111429169
image-20220223111429169
image-20220223111442894
image-20220223111442894

网页的形成

浏览器市场份额：

https://tongji.baidu.com/research/site

浏览器内核

负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

image-20220222151857260
image-20220222151857260

Web标准(浏览器3层页面)

三层标准：结构（html）、表现（css）、行为（javascript）

image-20220222151951999
image-20220222151951999

html骨架标签

image
image
HTM
HTM
image
image

html元素标签分类

image-20220222152059864
image-20220222152059864

html标签关系

  • 嵌套关系
  • 并列关系

代码开发工具

使用sublime-text

http://www.sublimetext.com/

o html:5
o html:5

HTML模板

<!DOCTYPE html>

告诉浏览器文档使用哪种HTML规范

<html lang="en">

指定html语言种类

  • en英语
  • zh-CN中文
<meta charset="UTF-8">

字符集：多个字符的集合

image-20220222152321613
image-20220222152321613

标签的语义化（含义）

结构清晰

在合适的地方放入合适的标签

常用标签

排版标签

（1）标题标签 

<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>
image-20220223112808916
image-20220223112808916

（2）段落标签

<p>段落</p>

（3）水平线标签

<hr />

（4）换行标签

<br />

（5）<div>和<span>标签

<div></div>
<span></span>

div标签用来布局，一行只能放一个

span标签一行可放置多个

文本格式化标签

<strong></strong>文字以粗体方式显示
<em></em> 文字以斜体方式显示
<del></del>文字以加删除线方式显示
<ins></ins>文字以加下划线方式显示

标签属性

外在特性,html标签属性

图像标签

<img src="URL" alt="替换文本">

https://www.runoob.com/tags/tag-img.html

属性属性值描述
srcURL图像的路径
alt文本图像不能显示时的替换文本
title文本鼠标悬停时显示的内容
width像素（XHTML不支持%页面百分比）设置图像的宽度
height像素（XHTML不支持%页面百分比）设置图像的高度（一般不设置）
border数字设置图像边框的宽度

注意：

  1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
  2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
  3. 采取键值对的格式 key="value"的格式

链接标签

<a href="#"></a>

https://www.runoob.com/tags/tag-a.html

属性作用
href指定链接目标的URL地址
target指定链接页面打开方式，_self（默认），_blank（在新窗口打开）

注意：

  1. 可以为图像、表格、音频、视频等各种网页元素添加超链接
  2. #空链接
  3. 外部链接，http://www.baidu.com
  4. 内部链接，内部页面名称

注释标签

<!-- 注释内容 -->
快捷键：ctrl+/   ctrl+shift+/
image-20220222153207816
image-20220222153207816

锚点

<a href="#id">跳转锚点</a>
<h2 id="id">跳转</h2>
image-20220222153247074
image-20220222153247074

base标签

<base target="_blank">

所有链接默认添加_blank

注意：跳转锚点也是链接！！！

预格式化文本

<pre>
        test
    aaaaaaaaaaaaa,
    bbbbbbbbbbbbb,
    ddddddddddddd.
</pre>

按照书写格式显示

特殊字符

特殊字符描述字符的代码
空格&nbsp;
<小于号&lt;
>大于号&gt;
image-20220222153507674
image-20220222153507674

路径

相对路径

  • 同一级路径，图片引用的时候，直接写出图片的名字就可以了
  • 上一级目录../

绝对路径

创建表格

<table>
     <tr>
         <td>单元格内的文字</td>
         <td>单元格内的文字</td>
         <td>单元格内的文字</td>
     </tr>
</table>

tr标签：定义表格中的行,嵌套在tale标签中

td标签：定义表格中的单元格，嵌套在<tr></tr>内

操作table元素的方法

https://developer.mozilla.org/zh-CN/Web/API/HTMLTableElement

tableObject.cells[]cells 集合返回表格中所有单元格的一个数组。
tableObject.rows[]rows 集合返回表格中所有行（TableRow 对象）的一个数组，即一个 HTMLCollection。
tableObject.rowIndex行下标

表格属性

属性名含义常用属性值
border="0"设置表格的边框（默认0无边框）像素值
cellspacing="0"设置单元格与单元格之间的空白间距像素值（默认2px）
cellpadding="0"设置单元格内容与单元格边框之间的空白边距像素值（默认1px）
width="500"设置表格的宽度像素值
height="200"设置表格的高度像素值
align="center"设置表格在网页中的水平对齐方式left,center,right
border-collapse:collapse;是用来决定表格的边框是分开的还是合并的collapse
  相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。
separate
  默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。
image-20220222153926211
image-20220222153926211

表头单元格标签<th>

<tr>
   <th>姓名</th>
   <th>年龄</th>
   <th>性别</th>
</tr>
image-20220222154016365
image-20220222154016365

表格标题caption

<caption>个人信息表</caption>
image-20220222154045744
image-20220222154045744

案例-小说排行榜

image-20220222154119207
image-20220222154119207
<body>
    <table border="1" cellspacing="0" cellpadding="0" width="500" height="200" align="center">
        <caption><h3>小说排行榜</h3></caption>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="image/down.jpg" alt=""></td>
            <td>345</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="image/down.jpg" alt=""></td>
            <td>124</td>
            <td>675432</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="image/up.jpg" alt=""></td>
            <td>212</td>
            <td>7654</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
            <td>4</td>
            <td>东游记</td>
            <td><img src="image/up.jpg" alt=""></td>
            <td>23</td>
            <td>75645</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td><img src="image/down.jpg" alt=""></td>
            <td>121</td>
            <td>7676</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td><img src="image/up.jpg" alt=""></td>
            <td>576576</td>
            <td>1231421</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td><img src="image/up.jpg" alt=""></td>
            <td>234</td>
            <td>7686</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
    </table>
</body>

合并单元格

跨行合并

rowspan="合并单元格的个数"

跨列合并

colspan="合并单元格的个数"

合并单元格顺序：先上 后下 先左 后右

  1. 先确定是 跨行 还是 跨列 合并
  2. 根据 先上 后下 先左 后右 的原则找到目标单元格 写上合并方式 还有要合并的单元格数量
  3. 删除多余的单元格
image-20220222154338996
image-20220222154338996
<body>
    <table border="1" height="300px" width="500px" cellspacing="0" cellpadding="0" align="center">
        <caption>个人简历</caption>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td>18</td>
            <!-- 跨行合并 -->
            <td rowspan="2">照片</td>
        </tr>
        <tr>
            <td>身高&nbsp;180</td>
            <td>汉族</td>
            <td>已婚</td>
            <!-- <td>照片</td> -->
        </tr>
        <tr>
            <td>个人作品</td>
            <!-- 跨列合并 -->
            <td colspan="3">个人作品</td>
            <!-- <td>个人作品</td>
            <td>个人作品</td> -->
        </tr>
        <tr>
            <td>个人简历</td>
            <td colspan="3">个人简历</td>
            <!-- <td>个人简历</td>
            <td>个人简历</td> -->
        </tr>
    </table>
</body>

划分表格结构

定义表格的头部，内部必须拥有<tr>标签

<thead>
    <tr>
      <td>刘德华</td>
      <td>男</td>
      <td>18</td>
      <!-- 跨行合并 -->
        <td rowspan="2">照片</td>
    </tr>
</thead>

用于定义表格的主体

<tbody>
    <tr>
       <td>身高&nbsp;180</td>
       <td>汉族</td>
       <td>已婚</td>
       <!-- <td>照片</td> -->
    </tr>
    <tr>
        <td>个人作品</td>
       <!-- 跨列合并 -->
       <td colspan="3">个人作品</td>
       <!-- <td>个人作品</td>
       <td>个人作品</td> -->
    </tr>
    <tr>
       <td>个人简历</td>
       <td colspan="3">个人简历</td>
       <!-- <td>个人简历</td>
       <td>个人简历</td> -->
    </tr>
</tbody>

定义表格的脚注

<tfoot>
    <tr>
       <td colspan="4">--脚注</td>
    </tr>
</tfoot>

列表标签

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

<ul></ul>中只能嵌套<li></li>标签

<li>与<li>之间相当于一个容器，可容纳所有元素

有序列表

<ol>
    <li>美国</li>
    <li>中国</li>
    <li>俄罗斯</li>
</ol>

自定义列表

<dl>
    <td>湖北</td>
    <dd>天门</dd>
    <dd>武汉</dd>
    <dd>孝感</dd>
</dl>
image-20220222154634309
image-20220222154634309

表单标签

一个完整的表单由表单控件、提示信息和表单域构成

<input type="属性值" value="你好">
<input/>标签为单标签
type属性用来指定控件类型
属性属性值描述
typetext单行文本输入框
password密码输入框
radio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
image图像形式的提交按钮
file文件域
name由用户自定义控件的名称
value由用户自定义input控件中的默认文本值
size正整数input控件在页面中的显示宽度
checkedchecked定义选择控件默认被选中的项
maxlength正整数控件允许输入的最多字符数

name属性

单选按钮可通过设置相同的name属性值

img
img
性别：
    男<input type="radio" name="sex">
    女<input type="radio" name="sex">

复选按钮可选择多个

image-20220222154850623
image-20220222154850623
爱好：
    看书<input type="checkbox" name="hobby">
    动漫<input type="checkbox" name="hobby">
    电影<input type="checkbox" name="hobby">
    打游戏<input type="checkbox" name="hobby">
    学习<input type="checkbox" name="hobby">

checked属性表示默认选中状态

动漫<input type="checkbox" name="hobby" checked="checked">
图片提交按钮：<input type="image" src="image/btn.png">
image-20220222154937318
image-20220222154937318
上传文件：<input type="file">

label标签

概念

label标签为input元素定义标注

作用

用于绑定一个表单标签，当点击label标签时，被绑定的表单元素就会获得焦点

当鼠标点击label标签里面的文字时，光标会定位到指定的表单里面

绑定元素

  • label直接包括input表单
<label>
    测试：
    <input type="text">
</label>
  • for属性规定label与哪个表单元素绑定（id）
<label for="test">测试label标签</label>
<input type="text" id="test">

textarea控件（文本域）

用户留言：<textarea></textarea>
image-20220222155131590
image-20220222155131590

作用

通过textarea控件可以轻松地创建多行文本输入框

禁止拖动

resize: none;

select下拉列表

省份:
<select>
    <option selected="selected">--请选择省份--</option>
    <option>北京</option>
    <option>天津</option>
    <option>上海</option>
    <option>武汉</option>
    </select>
城市:
<select>
    <option selected="selected">--请选择所属城市--</option>
    <option>武昌区</option>
    <option>江岸区</option>
    <option>青山区</option>
</select>
  • <select>中至少包含一对option
  • 在option中定义selected="selected"时，当前项即为默认选择项

分组

<select name="" id="pro">
        <optgroup label="湖北省">
            <option value="武汉市">武汉市</option>
            <option value="孝感市">武汉市</option>
        </optgroup>
        <optgroup label="广东省">
            <option value="东莞市">东莞市</option>
            <option value="广州市">广州市</option>
        </optgroup>
        <optgroup label="湖南省">
            <option value="长沙市">长沙市</option>
        </optgroup>
    </select>
image-20220223150311842
image-20220223150311842

from表单域

<form action="" method="post" name="Testfrom">
    用户名：<input type="text" name="Username">
    密码：<input type="possword" name=pwd>
</form>

常用属性

属性属性值作用
actionurl地址指定接收并处理表单数据的服务器程序的url地址
methodget/post设置表单数据的提交方式
name名称指定表单的名称，区分同一个页面的多个表单
  • get请求通常表示获取数据
  • post请求通常表示提交数据
  • get请求发送的数据都写在地址栏上，用户可见
  • post请求发送的数据用户不可见
  • get请求不能提交大量数据，但post可以，因此不要混用

html 5

html5 mdn 介绍：https://developer.mozilla.org/zh-CN/Web/Guide/HTML/HTML

语义化标签

新增语义化标签作用
<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 块级标签
<aside> 侧边栏标签
<footer> 尾部标签

IE9使用需要转换为块级元素

image-20220222155529139
image-20220222155529139

多媒体标签

新增多媒体标签作用
<audio>音频
<video>视频

音频格式

image-20220222155621556
image-20220222155621556

音频标签语法格式

<audio src="文件地址" controls="controls"></audio>
<audio controls="controls">
    <source src="media/探清水河.mp3" type="audio/mpeg">
    <source src="media/探清水河.ogg" type="audio/ogg">
    您的浏览器暂不支持audio标签
</audio>

音频标签常见属性

属性属性值作用
autoplayautoplay音频在就绪后马上播放
controlscontrols向用户显示控件，比如播放按钮
looploop每当音频结束时，重新开始播放
srcurl要播放音频的url

谷歌浏览器禁用autoplay="autoplay"

视频格式

image-20220222155749756
image-20220222155749756

视频标签语法格式

<video src="文件地址" controls="controls"></video>
<video controls="controls" width="400px">
    <source src="media/vscode.mp4" type="video/mp4">
    <source src="media/vscode.ogg" type="video/ogg">
    您的浏览器暂不支持video标签，播放视频
</video>

视频标签常见属性

属性属性值作用
autoplayautoplay视频在就绪后马上播放
controlscontrols向用户显示控件，比如播放按钮
widthpixels(像素)设置播放器宽度
heightpixels(像素)设置播放器宽度
looploop播放完是否继续播放该视频，循环播放
preloadpreload是否等加载完再播放
srcurl视频url地址
posterlmgurl加载等待的画面图片
mutedmuted静音播放

谷歌浏览器禁用autoplay="autoplay"

表单属性

属性值说明
type="email"限制用户输入必须为email类型
type="url"限制用户输入必须为url类型
type="date"限制用户输入必须为日期类型
type="time"限制用户输入必须为时间类型
type="month"限制用户输入必须为月类型
type="week"限制用户输入必须为周类型
type="search"搜索框
type="number"限制用户输入必须为数字类型
type="tel"手机号码
type="color"生成一个颜色选择表单
<form action="">
    <ul>
        <li>邮件：<input type="email"></li>
        <li>网址：<input type="url"></li>
        <li>日期：<input type="date"></li>
        <li>时间：<input type="time"></li>
        <li>月：<input type="month"></li>
        <li>周：<input type="week"></li>
        <li>数字：<input type="number"></li>
        <li>手机号码：<input type="tel"></li>
        <li>搜索框<input type="search"></li>
        <li>颜色选择<input type="color"></li>
        <li>日期：<input type="submit" value="提交"></li>
    </ul>
</form>
image-20220223140449041
image-20220223140449041
属性值说明
requiredrequired表单内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
autocompleteoff/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项
默认已经打开，如 autocomplete="on"
关闭 autocomplete="off"
需要放在表单内同时加上name属性
同时成功提交
multiplerequired可以多选文件提交

贡献者

xiaofei731016

更新日志

2026/9/29 16:54
查看所有更新日志
  • 0604e-更新于
  • 6226c-更新侧边栏配置和图标于
  • 82f3b-文件后缀错误，导致部分内容404于
  • 6d097-打包更新不符合规范的语法于
  • fb8bc-更新为vuepress于

🎉 公告 🎉

您在使用过程中遇到任何问题，欢迎通过 issue 反馈。