HTML 基础知识

不吃胡萝卜！

已于 2024-01-15 17:33:25 修改

阅读量1k

点赞数 24

文章标签： html 前端

于 2024-01-13 18:11:49 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_61926490/article/details/135562007

版权

本文详细介绍了HTML的基础知识，包括网页构成、HTML标签的使用（如语义标签、布局标签、图像和链接、表格、列表、表单和表单控件等），以及Web标准和浏览器内核。重点讲解了如何构建和优化网页结构，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结一下之前学习的前端知识 ~ 因为之前是手写笔记，正好整理成电子版也方便查看 ~

网页

n 个网页组成网站
由图片、链接、文字、声音、视频等元素组成
.html 或 .htm 后缀结尾的文件 HTML文件

HTML

超文本标记语言，用来描述网页。

可加入图片、声音、动画、多媒体等内容（超越了文本限制）
可以从一个文件跳转到另一个文件中，与世界各地主机的文件连接（超级链接文本）

浏览器

是网页显示、运行的平台

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

Web 标准

结构 —— 对网页元素进行整理和分类。 HTML
表现 —— 设置网页元素的版式、颜色、大小等外观样式。 CSS
行为 —— 指网页模型的定义及交互的编写。 Javascript

HTML 语法规范

由尖括号<>包围关键字
HTML标签通常成对出现（双标签 <html></html>;单标签 <br/>）

HTML 基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在基本标签上书写。

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，称为根标签
<head></head>	文档的头部	注意在 head 标签中我们必须要设置的标签是 title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放在 body 里面的

HTML 常用标签

语义标签

【标题标签】<h1> - <h6> 共六级标签，大小依次减

特点：加了标题的文字会变粗，字号也会变大，一个标题占一行

【段落和换行标签】

分段：<p> </p> 网页中若干个空格，只会显示一个空格。因此分段必须用段落标题。

特点：文本在一个段落中会根据浏览器窗口的大小自动换行。段落与段落之间有空隙。

换行：<br/> 单标签！

特点：与分段不同，换行只是另起一行显示，不会有间隔空隙。

空格：&nbsp（很多个空格、很多换行只会识别出一个空格。想要多个的效果需要使用 &nbsp 和 <br/>）

文本格式化标签

语义	标签
加粗	<strong></strong> 或者 <b></b>
倾斜	<em></em> 或者 <i></i>
删除线	<del></del> 或者 <s></s>
下划线	<ins></ins> 或者 <u></u>

<div>、<span> 布局标签

没有语义，就相当于是盒子，用来装内容

<div> 独占一行 <span>跨距一行可显示多个

图像标签和路径

src 是 <img> 标签的必须属性，用于指定图像文件的路径和文件名。

图像标签的其他属性：

alt：替换文本，图像不能显示时显示的文字
title：提示文本，鼠标放到图像上时显示的文字
width：设置图像的宽度
height：设置图像的高度
border：设置图像的边框粗细（常用CSS设置）

图像标签属性注意点：

图像标签可以拥有多个属性，必须写在标签的后面
属性之间不分前后顺序，标签名与属性、属性与属性之间均以空格分开
属性采取键值对的格式，即 key = "value"
测试点：必须有title属性（悬停及未加载显示）

目标文件夹：存放做页面所需要的相关素材，比如 html文件、图片等

根目录：打开目标文件夹的第一层

相对路径：图片相对于当前HTML页面的位置作为起点。

相对路径分类	符号	说明
同一级路径		图像文件位于 HTML 文件同一级如 <img src="baidu.gif" />
下一级路径	/	图像文件位于 HTML 文件下一级如 <img src="images/baidu.gif" />
上一级路径	../	图像文件位于 HTML 文件上一级如 <img src="../baidu.gif" />

绝对路径：指目录下的绝对位置，通常从盘符开始。（一般不使用）

* 绝对路径中是 \，相对路径中是 /

超链接标签

< a href = "跳转目标" target = "目标窗口的弹出方式"> 文本或图像 </a>

href 必须属性，指定连接目标的 url 地址

【链接分类】

外部链接必须以 http:// 开头
内部链接直接链接内部页面名称即可
空链接 # 当时没有确定链接目标
下载链接如果href里面地址是一个文件或者压缩包，会下载这个文件
网页元素链接在网页中的各种网页元素都可以添加超链接
锚点链接快速定位到页面中的某个位置

表格标签

表格的基本语法：

<table></table> 用于定义表格的标签
<tr></tr> 用于定义表格中的行，必须嵌套在 <table> 中
<td></td> 用于定义单元格，必须嵌套在 <tr> 中

表头单元格标签：位于表格的第一行或第一列，表头单元格里的文本内容加粗居中显示
<th></th>

表格属性：......通常用CSS设置，不再赘述

表格结构标签：<thead> 表格头部区域 <tbody> 表格主体区域（前面提过的<th>是表头单元格）

列表标签

表格用来显示数据，列表就是用来布局。

分为三大类：无序列表、有序列表、自定义列表。

无序列表

<ul> 标签表示HTML页面中项目的无序列表，<li> 定义列表项

无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul></ul> 中只能嵌套 <li></li> ，无法直接在 <ul></ul> 中输入其他标签或文字
<li></li> 相当于一个容器，可以容纳所有元素
无序列表会带有自己的样式属性，实际使用中，会用CSS来设置

有序列表

各个列表项会按照一定的顺序排列定义。

<ol> 标签用于定义有序列表，列表排序以数字来显示，<li>为列表项

<ol></ol>中只能嵌套 <li></li> ，无法直接在 <ol></ol> 中输入其他标签或文字
<li></li> 相当于一个容器，可以容纳所有元素
有序列表会带有自己的样式属性，实际使用中，会用CSS来设置

自定义列表

表单标签

网页中常见的表单标签：注册页面。表单为了收集用户信息，跟用户交互。

一个完整的表单通常由：表单域、表单控件（表单元素）和提示信息

表单域

【定义】一个包含表单元素的区域。

<form> 实现用户信息收集和传递（将表单信息送给服务器、后台）
<form action="url地址" method="提交方式" name="表单域名称">

action：url地址：用于指定处理表单数据的服务器程序的url地址
method：get / post ：用预设值表单数据的提交方式
name：名称：用于指定表单的名称，以区分同一个页面中的多个表单域

get：1、参数 url 明文显示 2、提交速度快 3、提交参数有长度限制【常用于查询使用】
post：1、非明文显示 2、提交速度慢（相较于 get） 3、提交参数的参数长度无限制【常用于提交数据、登陆、注册】

表单控件

【定义】允许用户在表单中输入或选择的内容控件。

<input type="属性值" /> 单！
type 为必写属性，设置不用的属性值来制定不同的控件类型

属性值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮（通过设定同样的 name 属性，实现多选一）
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文字。默认宽度为20字符。