--- title: "02-HTML" created: 2025-11-25 tags: - 项目筑基 --- # HTML > 从 web 标准到注册页面实战：骨架、常用标签、表格合并、表单全家桶，网页的框架全靠标签堆出来。 ## web 标准 随便打开一个网页 可以发现它由文字、图片、音频、视频、超链接组成 在网页的背后其实就是一串串前端程序员写的代码 这些代码通过浏览器的解析和渲染 变成用户眼中的页面 浏览器有很多 不同厂商名下的浏览器有着不同的内核、渲染引擎 那么渲染也就有些异同 为了避免同一网站在不同浏览器打开效果不同的问题 就需要制定一套标准 以这套标准去编写前端代码 这个 web 标准呢 由三个部分组成： - **HTML** 设计页面元素和内容 也就是框架（结构） - **CSS** 设计网页元素的外观和位置等页面样式（表现） - **JavaScript** 设计网页模型的定义以及一些交互效果（行为） ## 站点 网站网站 建一个网站往往要先建一个站点 什么是站点 有什么作用？ 站点是一种管理自己设计的网站中所有与之相联系的文件的工具，利用站点对网站相关的页面及各类网站所需的素材进行统一的管理。 简单点来说就是新建一个文件夹，站点就是这个文件夹的根目录，在这个新建的文件夹中包含了我们设计的网页中所需要的、所用到的所有文件，我们可以通过创建它来对我们进行的网页进行管理，并且在我们进行网页的编辑和设计时，方便我们浏览，有次序的找到指定文件，点开管理站点，还可以对其素材文件一目了然，大大减少了我们的工作量。站点名字可以用中文，无所谓，但是里面的文件和文件夹不要用中文命名，会存在编码上的问题。 这个也很好验证 可以简单建一个文件夹 在该文件夹里建一个 images 文件夹和一个记事本文件 打开记事本写上 hello web ctrl s 保存退出 F2 重命名改后缀为 .html 再打开它就能发现 和在 DW 中建站点达到的效果一模一样 **so—— 网站其实就是文件夹** 先从 HTML 入手 把框架整理好 ## 框架 html 叫做超文本标记语言 通过 html 标签来对网页中的文本图片音频视频等内容进行描述 重点在于——标签 在 vscode 中 输入 `!` 回车 就可以生成 html 的骨架： ```html Document ``` 开头的 `` 是少数不成对出现的标签之一 它是 HTML 的文档声明 告知浏览器当前文档所用的是哪种 HTML 规范 它本身并不属于文档的结构部分 然后可以发现在 `` 之下的就是 `` 标签 结束也是以 `` 其实 网页中的所有代码都包含在 `` 和 `` 标签对中 表示该文档是由超文本标记语言 HTML 编写的 再之后就可以看到分为了两个部分 `` 和 `` ### head head 标签是 HTML 文档所有头部元素的容器 用来描述 HTML 的相关信息 它里面的东西都是给搜索引擎看的（用于比对） 比如在 `` 标签中的关键字和说明 （杀毒也是用这个比对原理 杀毒软件往往有个病毒库 存储了病毒的文件名 杀毒软件会定期扫描我们的电脑 将电脑里的文件与病毒库的文件的文件名相比对 如果一致则发出警告 但这就意味着并不能百分百确定报警的就是找到了病毒） ![[web-image1.png]] 指定关键字 可以帮助我们匹配到相应的结果 在未打开链接时 我们所看到的文本 就是 `` 里的说明 这就是 `` 标签 也是为数不多的一个单独存在的标签： - 用于指定字符编码 ``（一般都是用 utf8） - 关键字 `` - 说明信息 `` 在 head 里还有： - `` 标签 用来设置标题信息 ![[web-image2.png]] - `` 标签 可以在里面写 css 代码 规定 html 元素在浏览器中呈现的样式 ```css ``` - `` 标签 用于链接外部样式表 整合 html 文档与外部资源的关系 ```html ``` - `` 标签 定义客户端脚本 像 javascript ![[web-image3.png]] 因为暂时不能理解这些东西 但可以随便找个网页扒一扒它的源代码 可以发现都是有这些部分的 tips：直接跳转到浏览器 DW 按 F12 vscode F5 或者 ctrl F5 ### body 另一部分就是 `` 了 它里面放的是 html 文档的主体部分 功能涵盖很多 所有我们在网页能看见的东西就基本是定义在 body 里面的 ### 标签规则 注意点： HTML 文件由一系列元素和标签组成 用标签规定元素的属性和它在文档中的位置 HTML 标签就是用尖括号括起来的关键词 绝大多数 HTML 标签都是成对出现的 包含首标签 `<标签名>` 和尾标签 `` 在首标签和尾标签中间的就是标签内容 层级示意： `<1>` → 图 → `<2>` → `<3>` → `` → `` → `` ![[web-image4.png]] 要求一层包含一层 不能交叉 大部分为双标签 由两部分组成 `<标签名>` 成对出现 一般是用在那种有开始有结束的句段 比如对某段文字进行设计 就在文字前后分别放上开始和结束标签 少数标签只由一部分组成 像换行 `
`、分割线 `
` 它好像并没有什么要段前段后框住什么东西 所以能够理解 只是加一个换行或者分割线而已 无需包裹内容 单个就能完成功能 然后标签中可以添加多个属性 如果是双标签 这些属性写在开始标签中 标签名和属性 属性与属性之间 用空格隔开 标签与标签间 只存在两种关系： ![[web-image5.png]] ## vscode 做前端设计还是得用 vscode DW 太简单 和 word 一样 没什么意义 关于 vscode 有一些小技巧要先熟悉： - ctrl / 快速注释（可以在左下角设置中调） - 输入英文 直接 enter 或者 tab 生成相应标签 - `!` enter/tab 生成结构标签 ## 常用标签 ### 标题标签 ![[web-image6.png]] 用 h 表示 共有六级标题 分别用 h1~h6 表示 ### 段落标签 ![[web-image7.png]] 用 p 表示 每两个 `

` 间会自动换行 ### 换行标签 如果想在段中换行 需要加上 `
` ![[web-image8.png]] 在 DW 中可以使用 shift+enter 自动加 `
` 标记 ![[web-image9.png]] 打开自动换行功能 可以帮助我们在代码视图看的更明了 不会影响在网页中的展示（代码端的自动换行） 对于空格 html 格式的文档中只允许有一个空格 所以单纯按下多个空格键无法实现显示多个空格的效果 要输入 ` ` 来实现 ![[web-image10.png]] ### 水平线标签 ![[web-image11.png]] 用 `
` 表示 常放在标题和正文的中间 ### 文本格式化标签 可以在文本标签中对某些字进行特殊处理 像 word 一样 ![[web-image14.png]] 两边虽然单词不同 但效果是一样的 主要是强调作用（告诉可以看这段代码的人如果是用 strong……说明这段东西比较重要） 这东西很少用到 因为样式一般是用 css 去确定 ### 图片标签 ```html ``` 输入 img 回车即可弹出相应标签 src 和 alt 为标签属性（还有很多缺省属性） src 中放的是要打开的图片地址 可以用相对路径也可以用绝对路径（带盘符的、或者直接一个网站） 为了可移植性 肯定是主要使用相对路径 - `./` 是打开当前目录 - `../` 是打开上一级目录 输入之后后面会有提示引用哪个文件 alt 里放的是替换文本 当该图片无法显示时（路径出错 加载失败等） 就会显示 alt 里面的内容 ```html 萨摩耶 ``` ![[web-image15.png]] 除这两个以外还有很多属性可以加上去 比如 title ```html 萨摩耶 ``` ![[web-image16.png]] 当把鼠标放在图片上时 就会显示该文本 还有 width、height 属性 一般要调大小只去设置其中一个（另一个会自动等比例缩放） 如果同时设置两个 设置不当时 图片会发生变形 ```html 萨摩耶 ``` 可见 标签里可以存在多个属性 属性间用空格隔开 属性间其实并没有顺序之分 so—— 图片 用 img 标签 有 src、alt、title、width、height 等属性 ### 音频标签 ```html ``` 与 img 相同 输入 audio 回车就会弹出相应标签 在 src 里输入 `./` 就能选择要打开的音频 （体现出之前分好文件夹的重要性） （目前只支持三种音频格式 MP3、Wav、Ogg） 但是 如果这个时候用网页去打开 会发现没有播放 也没有显示 难道添加失败了？ 不 只是看不见而已 加上 controls 属性 就能看到一个播放音频的控件 ```html ``` ![[web-image17.png]] 此外还可以添加： - autoplay 自动播放（有些浏览器不允许自动播放 怕社死 比较人性化） - loop 循环播放 ```html ``` ### 视频标签 输入 video 回车 ```html ``` 虽然能显示 但是没有播放键 它也不会自动播放 看上去就和一张图片似的 所以要加上 controls 属性 让播放键显示出来（此外也能用 width 和 height 调宽高） ```html ``` ![[web-image18.png]] 视频可以实现自动播放 autoplay 但是得加上无声 muted（防社死 浏览器不允许） ```html ``` 这样一来就能实现 一打开 视频就会播放 但是没有声音 要加循环播放同样是用 loop ### 链接标签 又叫 a 标签、超链接、锚链接 点击后跳转到另一个页面 输入 a 回车即可 ```html 超链接 ``` 在 `` 中间 放的是点击的对象（点这个东西就可以弹到某处） ![[web-image19.png]] 在 a 标签里面有个 href 的属性 用于选择对象 可以选择跳到当前站点内的一个文件中去 用 `./` 相对路径就行 也可以选择跳到某个网站 用它的网址（绝对路径） ```html 百度 ``` 这种情况下我们点击超链接 确实会弹到相应网页 但是 原来的网页被覆盖了 如果想实现保持该网页不变 点击后再开一个网页的效果该如何 ——加上 target 属性 ![[web-image20.png]] - _blank：表示在保留当前网页窗口的状态下 在新窗口中显示被打开的链接网页（点击后新生成一个页面） - _parent：表示在当前窗口显示被打开的链接页面（默认如此） - _self：同上 区别在于如果是框架网页 parent 在父框架打开 self 在当前框架打开 - _top：当前窗口打开 如果是框架网页 则删除所有框架 显示当前网页 ```html 超链接 百度 ``` 如果要设置超链接 但暂时不知道该跳转到哪个位置 可以在 href 属性里 使用 # 表示空链接 占位 不过它还有一个妙用 就是 点击它后 会回到页面顶部（逛淘宝遇到过这个功能） ```html 空链接 ``` ### 列表标签 分为三种：无序列表、有序列表、自定义列表 #### 无序列表 输入 ul 回车（un 前缀吧可能 un 什么东西 list） 表示定义一个无序列表 在该列表中的每一项 使用 li 标签 （ul 标签里只允许有 li 标签 li 标签里可以嵌套任意内容） ![[web-image24.png]] #### 有序列表 输入 ol 回车（可以用 order list 理解） 里面的内容也是用 li 标签 ![[web-image25.png]] 同样 ol 标签中只允许嵌套 li 标签 li 标签中可以嵌套任意内容 #### 自定义列表 输入 dl 回车（design list？？） ![[web-image26.png]] ![[web-image27.png]] dl 标签里可以嵌套 dt 标签（title）和 dd 标签 dt 标签表示自定义列表的主题 dd 标签用于自定义某项内容 特点在于 dd 前会默认显示缩进效果 ## 表格 ### 基本表格 用 table 定义一个表格 - tr 表示表格的每一行（该表有几行） - td 表示表格单元格 放具体每个格子里的内容 ![[web-image28.png]] ```html
``` 要多少行就用多少个 tr 每行有多少个内容 就加多少个 td 都是成对出现 另外有个小技巧 格式基本是不变的 要变的只是里面的内容 所以可以想到复制粘贴 但还是比较麻烦 ——可以选中一段代码 shift+alt+↓ 快速复制粘贴到下方 ### 表格样式属性 另外可以加上一些属性去简单设置一下表格样式（具体得 css） 像表格 应该要有边框 那么就能在 table 标签里面加上一个 border 的属性 理解呢就是 表格其实就是一个大的文本框 每个内容都有一个独自的文本框 然后这些文本框之间应该存在一个空隙 这就是 border 单位为像素 ```html ``` 此外 还可以设置表格的大小 还是和图片视频一样 用 width 和 height 属性 ![[web-image29.png]] 虽然没有像 dw 里直接拖动调大小方便 但差别不大 还是要习惯用代码写 ### 表格标题、表头 在前面用的是 h1 作为标题 但好像不是亲生的 表格应该有自己的标题 当然 有相应的标签 且会默认居中显示——caption ![[web-image30.png]] 然后对于表格的首行 一般放些属性名 有着特殊的加粗、居中效果起提示作用 它的标签为 th（table head？） ![[web-image31.png]] 它也是放在列中的（tr 标签里面） 用来替代 td 表示这不是一般的内容 是 th table head 内容 ### 表格结构标签 这个对于效果来说没太大区别 但是对一个表的各部分进行一个标记、分组 有利于后续的管理设计（css 有标签选择器） 对于一个表格可以分成三个块：表格头部、表格主体以及表格底部 ![[web-image32.png]] ![[web-image33.png]] ![[web-image34.png]] ![[web-image35.png]] ![[web-image36.png]] 只是给管理者方便后面设计用的 观察到的效果并没有什么不同 然后因为添加了这些东西 对代码的缩进进行了一个调整 同时向后缩进 选中 按 tab 同时向前缩进 选中 shift+tab ### 合并单元格 像刚才那个表的表尾明显有很多重复的地方 感觉把它合并起来更好看 然后这些连续起来的课 应该也能进行一个合并 纵向合并叫做跨行合并 横向合并叫做跨列合并 有一个原则——**左上原则** （上下合并 保留最上的 删除其他 左右合并 保留最左的 删除其他） 首先要明白的是 要合并哪些单元格 先看纵向的 ![[web-image37.png]] 要把第一行的 c# 和第二行的 c# 合并 根据原则来看 那就是保留第一行的 c# 把第二行的 c# 删掉 ![[web-image38.png]] ![[web-image39.png]] 显然还不够 还少了一步合并 对于纵向的跨行合并 要用到属性 rowspan 加在保留的那个单元格的 td 标签里 要合并多少个单元格 rowspan 的属性值就填多少 ![[web-image40.png]] 其他的几个也是同理 ![[web-image41.png]] 但是在星期五的三个无的合并遇到了问题 ![[web-image42.png]] 如果要把三个无也一起合并 整个第二列就都被注释了 那就会使得单元格变小成一行的空间 不符合本意 所以 还是保留三个无 ![[web-image43.png]] 这个问题应该可以用设置单元格大小来解决 再看横向的 ![[web-image44.png]] 要合并这些 按照原则就是保留第五列第一个单元 删掉后面的单元 然后在（5,1）处加上一个合并的属性 横向的合并用的是 colspan ![[web-image45.png]] 觉得不好看就加个 center 标签 ```html ``` ![[web-image46.png]] 其他的也同理 注意点是： 只有在同一个结构标签里的单元格才能合并 不能跨结构标签合并（thead、tbody、tfoot） 小结一下： ```html
好好学习，天天向上，加油
``` ## 表单 对于一些选择性别、地域、勾选协议、输入账号密码、等等功能 都要用到表单 ### input 非常重要的一个关键词——input 可以通过 type 属性值的不同 展示不同效果 ![[web-image47.png]] #### text 提示语中默认的就是这个 ```html ``` 用于显示输入单行文本 ![[web-image48.png]] 像输入账号就可以用到这个 有些网站比较人性化 他会在这个框里给出一些提示语 用的是 placeholder 属性（占位 提示输入文本） ![[web-image49.png]] ![[web-image50.png]] #### password 输入账号 那肯定对应就有输入密码 type 属性中的 password 属性值 ```html ``` ![[web-image51.png]] ![[web-image52.png]] 可见 这个密码框输入进去会默认是用·表示的 旁边有个小眼睛 可以选择显示内容 同时会发现 input 属性不会自动换行 如果要实现那种常见排版 就得手动加上换行标签 br 再完善些 前面可以加提示语 ![[web-image53.png]] #### radio 关于性别男女这类单向选择 要用到 radio 属性值 ![[web-image54.png]] 大致可能会觉得这样实现 ![[web-image55.png]] 看上去没什么问题 但是并没有实现两个只能选一个的功能 因为它们是独立的两个 input 那么该怎样去把这俩关联起来呢 用上 name 属性 **name——分组** 有相同 name 属性的单选框为一组 一组中同时只能有一个被选中 ![[web-image56.png]] 这样一来 就基本实现了单选的功能 （好像不能再次点击取消选中） 然后还有一个功能可以实现 就是 比如说某个网站更多是女生在使用 那么就可以在打开该网页时 就默认选定了是女 如果是男性再自行另选 这涉及到一个默认值的属性 checked ```html 男 女 ``` 要设置哪个为默认 就在哪个的 input 标签里加上 checked 属性 #### checkbox 有单选就自然有多选 属性值：checkbox ![[web-image57.png]] 同理 可以加上默认值属性 checked ```html 爱好：吃饭睡觉打豆豆 ``` #### file 有时候客户端需要接受用户端传输的一个文件 这就需要一个功能来帮助用户去提交 ![[web-image58.png]] 点击选择文件 就会弹出当前电脑的文件资源管理器 右侧显示状态 但这样只是单选 如果允许多选 就可以加上 multiple 属性 ```html ``` ![[web-image59.png]] （这仅仅只是通过选择的渠道 真正要送到后台还需要一系列接口） #### 按钮 ![[web-image60.png]] 单纯生成三个按钮很简单 ![[web-image61.png]] 但是怎么真正实现它的提交、重置等功能呢 肯定是要和前面的代码相关联起来才行 要用到 form 标签 比如说现在要实现将上面所有功能（账号密码性别爱好文件）作为一个整体 去提交或者撤销 就要用 form 标签把这些表单标签一同裹起来 ```html
账号：
密码：

性别：男 女
爱好：吃饭睡觉打豆豆



``` 有个 action 属性 就是说这些东西要提交到哪个文件中去 这个暂时不用管 关于 button 它还可以单独作为一个标签 而不是这里的属性值 学了 JavaScript 就会经常用到 因为它可以自定义 所以有着无限可能 #### button 这边简单了解一下 button 标签中的一些属性 ![[web-image62.png]] ![[web-image63.png]] ### select ![[web-image64.png]] 选择城市什么的 这种下拉菜单 就要用到 select 标签 跟表格类似 select 作为整个菜单的整体 option 作为菜单的每一项 ![[web-image65.png]] 可以选择默认选中 在相应的 option 标签中加上 selected 属性即可 没加默认选中时 默认会选中第一个 ![[web-image66.png]] ### textarea 在网页中可能会需要输入多行文本 比如提交作业 提交邮件…… 就要用到 textarea 标签 ![[web-image67.png]] cols 规定文本域内可见宽度 rows 规定文本域内可见行数 在网页中可以看到右下角可以拖拽改变大小 但实际上这个功能一般都会被禁用 不然会破坏自己的排版设计 这个禁用只能用 css 禁用 html 无法完成禁用 这个文本框也可以使用 placeholder 去做个提醒 显得不那么单调 ```html ``` ### label 可以用于绑定内容和表单标签的关系 比如说 性别选择 ![[web-image68.png]] 就可以通过 label 实现 点击"男""女"也能勾选相应的圈 有两种方法 一、使用 label 标签把内容（如：文本）包裹起来 在表单标签上添加 id 属性 在 label 标签的 for 属性中设置对应的 id 属性值 ```html 性别: ``` 显得比较冗长 二、直接使用 label 标签把内容（如：文本）和表单标签一起包裹起来 需要把 label 标签的 for 属性删除即可 ```html 性别： ``` 对比下来第二种要方便得多 ### div 与 span 没有语义的布局标签——div、span 实际开发中会大量频繁地使用这两个标签 - div 标签：一行只显示一个（独占一行） - span 标签：一行可以显示多个 具体等后面深入 ![[web-image69.png]] ## 字符实体 ![[web-image70.png]] 至此 html 就基本学完了 来综合性做个网站试试看 ## 实例 ### 注册页面 ```html 首页

玮的web

昵称：

性别：

所在城市：

希望的用途： 学习 娱乐 查阅

个人介绍：


我承诺 我同意所有条款

``` ### 跳转页面 ```html 页面一

这是一个跳转页面

猫狗日记
班级课表
百度 ``` ### 页面一：猫狗日记 ```html 猫狗日记

猫狗日记

``` ### 页面二：班级课表 ```html 班级课表

课程表

课程表
星期一 星期二 星期三 星期四 星期五
c#
数据结构
高数
近代史
  
 
   
   
网页设计
  
外语
    
     
   
心理
体育
军事
   
好好学习，天天向上


``` ## 附件 - [[web前端.docx|web前端.docx]] --- ⬅️ [[01-前端学习路线|01-前端学习路线]] 🏠 [[00-前端与可视化|00-前端与可视化]] ➡️ [[03-CSS 基础|03-CSS 基础]]