Web前端笔记-1、html标签-文字排版、图片、连接、音视频、列表、表格、表单、字符实体、快速生成

HTML 超文本标记语言——HyperText Markup Language。

超文本是什么？ 链接 - 通过链接可以把多个网页链接到一起

标记是什么？ 标记也叫标签，带尖括号的文本

语法：

  1. 标签成对出现，中间包裹内容
  2. <>里面放英文字母（标签名）一般都是小写
  3. 结束标签比开始标签多/，双标签：成对出现的标签；单标签：只有开始标签，没有结束标签。

HTML基本骨架

html：整个网页

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

title：网页标题

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

VS Code 快速生成骨架：

在 HTML 文件（.html）中，!（英文）配合 Enter / Tab键

标签的关系

作用：明确标签的书写位置；让代码格式更整齐

关系：嵌套关系(父子关系)和并列关系(兄弟关系)。

父子关系：子级标签换行且缩进（Tab键）

兄弟关系：兄弟标签换行要对齐。

标签

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名：h1~h6（双标签）

显示特点：文字加粗、字号逐渐减小、独占一行（换行）、一共就6级

段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

标签名：p（双标签）

显示特点：独占一行、段落之间有间隙

换行和水平线标签

换行：<br>（单标签）break

水平线：<hr>（单标签）

文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

strong、em、ins、del 标签自带强调含义（语义）。

标签名 效果
strong 加粗
em 倾科
ins 下划线
del 删除线
标签名 效果
b 加粗
i 倾科
u 下划线
s 删除线

图像标签

作用：在网页中插入图片。

<img src="">

src：用于指定图像的位置和名称，是 <img>的必须属性。

alt：替换文本，图片无法显示的时候显示的文字。

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

width：图片的宽度，值为数字，没有单位。

height：图片的高度 ，值为数字，没有单位。

链接标签

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

<a href="">文字</a>

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

音视频标签

<audio src="音频的 URL"></audio>

controls：显示音频控制面板。

loop：循环播放。

autoplay：自动播放；为了提升用户体验，浏览器一般会禁用自动播放功能。

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

<video src="视频的 URL"></video>

muted 静音播放

controls：显示音频控制面板。

loop：循环播放。

autoplay：自动播放；为了提升用户体验，浏览器支持静音自动播放。

列表、表格、表单

列表

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

列表分类：无序列表、有序列表、定义列表。

无序列表

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

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

ul标签里面只能放li标签，li标签里面可以放其他标签。
包含关系快速生成：ul>li
数量快速生成：*n，ul>li*6>a

有序列表

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

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

ol 标签里面只能包裹li标签。

li 标签里面可以包裹任何内容。

定义列表

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

dl 里面只能包含dt 和 dd。

dt 和 dd 里面可以包含任何内容。

表格

网页中的表格与 Excel 表格类似，用来展示数据。

table：表格

tr：行

th：表头单元格

td：内容单元格

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

加边框：给table加属性 border="1"

表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

thead：表格头部，表格头部内容

tbody：表格主体，主要内容区域

tfoot：表格底部，汇总信息区域

合并单元格

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

合并单元格的步骤：

  1. 明确合并的目标
  2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
    • 跨行合并，保留最上单元格，添加属性 rowspan
    • 跨列合并，保留最左单元格，添加属性 colspan
  3. 删除其他单元格

不同的表格结构内的单元格是不能合并的。

表单

作用：收集用户信息。

使用场景：

  • 登录页面
  • 注册页面
  • 搜索区域

input标签基本使用

单标签

input 标签type 属性值不同，则功能不同。

type的属性值：

text：文本框，用于输入单行文本

password：密码框

radio：单选框

checkbox：多选框

file：上传文件

placeholder：占位文本

radio的input需要指定相同的name=""属性才能实现单选
单选和多选使用ckecked属性可以默认选择
文件上传表单控件默认只能上传一个文件，添加 multiple 属性可以实现文件多选

下拉表单

双标签

select>option：select是下拉菜单，option是菜单内容。

selected是下拉表单的默认选择

文本域

作用：多行输入文本的表单控件。

标签：textarea，双标签。（中间可以填写默认提示文字）

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

label标签

作用：网页中，某个标签的说明文本。

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

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

写法一：

label 标签只包裹内容，不包裹表单控件。

设置 label 标签的for 属性值 和表单控件的id 属性值相同。

<label for="sname">姓名：</label>
<input type="text" id="sname" placeholder="admin">

写法二：

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

<label>姓名：<input type="text" placeholder="admin"></label>

按钮 button

双标签

使用type属性指定按钮的类型。

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

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

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

注意：按钮需配合 form 标签（表单区域）才能实现对应的功能。
disable属性禁用。

语义化

无语义的布局标签

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

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

div是一个盒子，用来布局的

有语义的布局标签

header：网页头部

nav：网页导航

footer：网页底部

aside：网页侧边栏

section：网页区块

article：网页文章

Rx2CKGDccWu3PH1rQhKCNs0a6powxpxr7nLn52wKPEE=

字符实体

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

空格是&nbsp;

小于号是&lt;

大于号是&gt;

快速生成

  1. 用>创建父子结构标签，生成子元素
  2. 用+创建兄弟标签，生成同级元素
  3. 用.或者#创建类标签
  4. 用[]来创建属性标签
  5. 用{}表示标签的内容
  6. 用$来实现编号
  7. 用@n来修改起始值

快捷键：

  1. alt+shift+箭头 上下移
  2. alt+鼠标 多光标
posted @ 2025-05-07 16:37  subeipo  阅读(65)  评论(0)    收藏  举报