HTML-Notes | Liang‘s Web-Notes

type

status

date

slug

summary

web 开发简介

HTML-内容、骨架

CSS-排版、美化、外表

JS-动态、交互、血液

HTML 骨架结构

html：整个网页

head：网页头部，用来存放给浏览器看的信息，例如 CSS

title：网页标题
style：网页内部 CSS 样式
link：引入外部样式等

body：网页主体，用来存放给用户看的信息，例如图片、文字

VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

注释

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

HTML 基本标签

标签总体特点：

标签要成对出现，中间包裹内容

<>里面放英文字母（标签名）

结束标签比开始标签多 /

标签分类：双标签和单标签

标题-h

文字加粗

字号逐渐减小

独占一行（换行）

经验
h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
h2 ~ h6 没有使用次数的限制

段落-p

独占一行

段落之间存在间隙

换行-br

水平线-hr

文本格式化标签

为文本添加特殊格式，以突出重点

加粗、倾斜、下划线、删除线

<b><i><u><s>也可以实现同样功能，但无强调语义，故不太常用。

插入图片-img

alt：图片无法显示的时候显示的文字

title：鼠标悬停在图片上面的时候显示的文字

width：值为数字，没有单位

height：值为数字，没有单位

src：图片地址

src用于指定图像的位置和名称，是 <img> 的必须属性。
属性名=“值”。
属性之间用空格隔开。

路径

相对路径：从当前文件位置出发查找目标文件

绝对路径：从盘符出发查找目标文件，或者通过链接找到网络上的图片

相对路径

查找方式：从当前文件位置出发查找目标文件

特殊符号：

/ 表示进入某个文件夹里面 → /

. 表示当前文件所在文件夹 → ./

.. 表示当前文件的上一级文件夹 → ../

超链接-a

作用：点击跳转到其他页面。

href：跳转的链接，可以绝对，也可以相对

target：默认当前窗口跳转，属性值为_blank可实现新窗口跳转

开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

href 属性值是跳转地址，是超链接的必须属性。
超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

音频-audio

src：音频链接（MP3、Ogg、Wav）

controls：显示音频控制面板

loop：循环播放

autoplay：自动播放

src 为必填属性。

视频-video

src：视频地址（MP4、WebM、0gg）

controls：显示音频控制面板

loop：循环播放

muted：静音播放

autoplay：自动播放

src 为必须填属性。
在浏览器中，想要自动播放，必须有 muted 属性。

列表

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

无序列表

有序列表

自定义列表

无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

定义列表

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

表格-table

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

tr：行

th：表头，即行标题

td：内容

一行一行写，第一行表示标题

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。

合并单元格

合并单元格的步骤：

明确合并的目标

保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并，保留最上单元格，添加属性 rowspan

跨列合并，保留最左单元格，添加属性 colspan

删除其他单元格

表单-form

作用：收集用户信息。

使用场景：

登录页面

注册页面

搜索区域

表单域标签下，下面的标签才起作用。

input

type：type 属性值不同，则功能不同

text：文本框

placeholder：提示信息

password：密码框

placeholder：提示信息

radio：单选框

name：控件名称，控件分组，同组只能选中一个（单选功能）
checked：默认选中属性名和属性值相同，简写为一个单词

checkbox：多选框

checked：默认选中属性名和属性值相同，简写为一个单词

file：上传文件

multiple：文件多选

下拉菜单-select

select 嵌套 option

select 是下拉菜单整体

option是下拉菜单的每一项

selected：默认选中属性

文本域-textarea

多行文本表单控件。

注意点：
实际开发中，使用 CSS 设置文本域的尺寸
实际开发中，一般禁用右下角的拖拽功能

标签-label

经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

写法一

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

写法二：使用 label 标签包裹文字和表单控件，不需要属性

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮-button

submit：提交按钮，点击后可以提交数据到后台（默认功能）

reset：重置按钮，点击后将表单控件恢复默认值

button：普通按钮，默认没有功能，一般配合JavaScript 使用

语义化-布局标签-div

无语义

div：独占一行
span：不换行

有语义

header：头部
nav：导航
footer：底部
aside：侧边栏
section：区块
article：文章

🌻

欢迎在下方留言讨论~

🌻HTML-Notes