HTML4基础知识总结

最新推荐文章于 2023-08-07 18:15:48 发布

努力的可达鸭

最新推荐文章于 2023-08-07 18:15:48 发布

阅读量188

点赞数

分类专栏： HTML+CSS 文章标签：前端 html

本文链接：https://blog.csdn.net/m0_46641400/article/details/130541152

版权

C/S架构与B/S架构

C/S架构，特点：需要安装、偶尔更新、不跨平台、开发更具针对性。
B/S架构，特点：无需安装、无需更新、可跨平台、开发更具通用性。
名词解释：C ➡ client（客户端）、B ➡ browser（浏览器）、S ➡ server（服务器）。

五大浏览器四大内核

Chrome（谷歌）：早期使用 webkit 内核，现在使用 Blink 内核。
Safari：使用 webkit 内核。
IE：使用 Trident 内核。
Firefox（火狐）：使用 Gecko 内核。
Opera（欧朋）：早期使用 Presto 内核（已放弃维护），现在使用 Blink 内核。

HTML基本结构

想要呈现在网页中的内容写在 body 标签中。
head 标签中的内容不会出现在网页中。
head 标签中的 title 标签可以指定网页的标题。

<html>
	<head>
		<title>网页标题</title>
	</head>
	<body>
		...
	</body>
</html>

排版标签

标签名	标签含义
h1~h6	标题
p	段落
div	没有任何含义，用于整体布局（生活中的包装袋）

h1 最好写一个，h2~h6 能适当多写。
h1~h6 不能相互嵌套。
p标签很特殊！它里面不能有：h1~h6、p、div标签。

块级元素与行内元素

块级元素：独占一行（排版标签都是块级元素）。
行内元素：不独占一行。
使用原则：块级元素中能写行内元素和块级元素，行内元素只能写行内元素、不能写块级元素。

文本标签

文本标签通常都是行内元素

标签名	标签含义
em	要着重阅读的内容
strong	十分重要的内容（语气比em要强）
span	没有语义，用于包裹短语的通用容器

图片标签

基本使用

标签名	标签含义
img	图片

常用属性：

src：图片路径（又称：图片地址）——图片的具体位置。
alt：图片描述。
width：图片宽度，单位是像素。
height：图片高度，单位是像素。

alt 属性的作用：

搜索引擎通过 alt 属性，得知图片的内容——最主要的作用。
当图片无法展示的时候，有些浏览器会呈现 alt 属性的值。
盲人阅读器会朗读 alt 属性的值。

路径的分类

相对路径

以当前位置作为参考点，去建立路径。

符号	含义
./	同级
/	下一级
…/	上一级

绝对路径

以根位置作为参考点，去建立路径。

本地绝对路径（很少使用）：一旦换设备，路径处理起来比较麻烦，所以很少使用。
网络绝对路径：使用网络绝对路径，确实方便，但要注意：若服务器开启防盗链，会造成图片引入失败。

常见图片格式

jpg 格式：是一种有损压缩格式、支持的颜色丰富、占用空间小、不支持透明背景、不支持动态图、可应用于对图片细节没有极高要求的场景。
png 格式：是一种无损压缩格式、支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
bmp 格式：不进行压缩的一种格式、支持的颜色丰富、保留的细节更多、占用空间较大、不支持透明背景、不支持动态图、应用于对图片细节要求极高的场景。
gif 格式：仅支持256种颜色，色彩呈现不是很完整、支持的颜色较少、支持简单透明背景、支持动态图、应用于网页中的动态图片。
webp 格式：谷歌推出的一种格式，专门用来在网页中呈现图片、具备上述几种格式的优点，但兼容性不太好、一旦使用务必要解决兼容性问题。
base64 格式：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。

超链接

从当前网页进行跳转
可以实现：①跳转到指定页面 ②跳转到指定文件（也可触发下载） ③跳转到锚点位置 ④唤起指定应用

标签名	标签语义
a	超链接

常用属性：

href ：指定要跳转到的具体目标。
target：控制跳转时如何打开页面，常用值：_self：在本窗口打开；_blank：在新窗口打开。
id：元素的唯一标识，可用于设置锚点。
name：元素的名字，写在 a 标签中，也能设置锚点。

<!-- 浏览器能直接打开的文件 -->
<a href="自拍.jpg">自拍</a>

<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="内部资源.zip">内部资源</a>

<!-- 强制触发下载 -->
<a href="电影.mp4" download="电影片段.mp4">下载电影</a>

若浏览器无法打开文件，则会引导用户下载。
若想强制触发下载，可使用 download 属性，属性值即为下载文件的名称。

跳转到锚点

什么是锚点？——网页中的一个标记点。

设置锚点

<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>

<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>

具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。
name 和 id 都是区分大小写的，且 id 最好别是数字开头。

跳转锚点

<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>

<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>

<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>

<!-- 刷新本页面 -->
<a href="">刷新本页面</a>

<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>