当前位置：首页 > news >正文

HTML HTML基础(2)

news 2025/9/6 10:42:10

1.开发者文档

W3C官网： www.w3c.org
W3School： www.w3school.com.cn
MDN： developer.mozilla.org —— 推荐。

2.排版标签

标签名	标签含义	单 / 双标签
h1 ~ h6	标题	双
p	段落	双
div	没有任何含义，用于整体布局	双

(1). h1 最好写一个， h2~h6 能适当多写。

(2). h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。

(3). p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签（暂时先这样记，后面会说规律）。

3.语义化标签

概念：用特定的标签，去表达特定的含义。
原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义很重要！
举例：会与 h1 标签，效果是文字很大（不重要），语义时网页主要内容（很重要）。
优势：
- 代码结构清晰可读性强。
- 有利于SEO（搜索引擎优化）。
- 方便设备解析（如屏幕阅读器、盲人阅读器等）。

4.块级元素和行内元素

(1).块级元素：独占一行（排版标签都是块级元素）。

(2).行内元素：不独占一行。

(3).使用原则：

(1.块级元素中能写行内元素和块级元素。

(2.行内元素中能写行内元素，但不能写块级元素。

(3.一些特殊规则：

①h1~h6不能互相嵌套

②p中不要写块级元素

5.文本标签_常用标签

(1).用于包裹：词汇、短语等。

(2).通常写在排版标签里。

(3).排版标签更宏观（大段的文字），文本标签更围观（词汇、短语）。

(4).文本标签通常都是行内元素。

标签	标签语义	单/双标签
em	要着重阅读的内容	双
strong	十分重要的内容	双
span	没有语义，用于包裹短语的通用容器	双

6.文本标签_不常用的

标签名	标签语义	单/双标签
cite	作品标题	双
dfn	特殊术语，或专有名词	双
del 与 ins	删除的文本【与】插入的文本	双
sub 与 sup	下标文字【与】上标文字	双
code	一段代码	双
samp	从正常的上下文中，将某些内容提取出来，例如：表示设备输出	双
kbd	键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中	双
abbr	缩写，最好配合上 title 属性	双
bdo	更改文本方向，要配合 dir 属性，可选值：ltr（默认值）、rtl	双
var	标记变量，可以与 code 标签一起使用	双
small	附属细则，例如：包括版权、法律文本	双
b	摘要中的关键字、评论中的产品名称	双
i	本意是：人物的思想活动、所说的话等等。现在多用于：呈现字体图标。	双
u	与正常内容有反差的文本，例如：错的单词、不合适的描述等	双
q	短引用	双
blockquote	长引用	双
address	地址信息	双

备注：
1.这些不常用的文本标签，编码时不用过于纠结。
2.blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。
3.有些语义感不强的标签，很少使用，例如：
small、b、u、q、blockquote
4.HTML的标签太多了！记住那些：重要的、语义感强的标签即可；截至目前，有这些：
h1~h6、p、div、em、strong、span

7.图片标签

(1)基本使用

标签名

标签语义

常用属性

单/双标签

img

图片

src：图片路径

alt：图片描述

width：图片宽度，单位是像素（px）

height：图片高度，单位是像素（px）

单

总结：

1.像素(px)是一种单位。
2.尽量不同时修改图片的宽高，可能会造成比例失调。
3.暂且认为img是行内元素。
4. alt 属性的作用：
搜索引擎通过 alt 属性，得知图片的内容。
当图片无法展示时候，游戏浏览器会呈现 alt 属性的值。
盲人阅读器会朗读 alt 属性的值

(2).路径的分类

(1.相对路径：以当前位置作为参考点，去建立路径。

已有路径	符号	含义	举例
	./	同级	引入【怪兽.jpg】： <img src="./怪兽.jpg">
	/	下一级	引入【喜羊羊.jpg】： <img src="./a/喜羊羊.jpg">
	../	上一级	引入【奥特曼.jpg】： <img src="../奥特曼.jpg">