【Web】HTML基础——了解HMTL基本结构+常用标签的使用(一)

简介: HTML结构、HTML常见标签

HTML结构

HTML 代码是由 “标签” 构成的.


HTML标签

形如:

<body>hello</body>


标签名 (body) 放到 < > 中

大部分标签成对出现. 为开始标签, 为结束标签.

少数标签只有开始标签, 称为 “单标签”.

开始标签和结束标签之间, 写的是标签的内容. (hello)

开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).<body id="myId">hello</body>

HTML文件基本结构

<html>

   <head>  

     <title>第一个页面</title>

  </head>    

<body>  

    hello world    

</body></html>

  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写 页面的属性.
  • body 标签中写的是 页面上显示的内容
  • title 标签中写的是 页面的标题.

标签层次结构

  • 父子关系
  • 兄弟关系


<html>    

<head>    

   <title>第一个页面</title>    

</head>  

<body>  

    hello world    

</body>

</html>


其中:


head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)

title 是 head 的子标签. head 是 title 的父标签.

head 和 body 之间是兄弟关系.

有点二叉树内味儿哈哈哈,标签之间的结构关系,构成了一个DOM树,DOM 是 Document Object Mode (文档对象模型) 的缩写


aa1.png


👉快速生成代码框架

由于俺电脑上的idea是社区版的,不支持html文件,所以快速生成代码框架的方法是在VS Code上的办法

在html文件输入 !即可生成代码框架,省时省事


aa2.png


效果如下:

aa3.png


细节解释: ( 了解即可, 不必深究)


< !DOCTYPE html > 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.


< html lang=“en” > 其中 lang 属性表示当前页面是一个 “英语页面”. 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).


< meta charset=“UTF-8” > 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.


< meta name=“viewport” content=“width=device-width, initial-scale=1.0” >

1.name=“viewport” 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.

2.content=“width=device-width, initial-scale=1.0” 在设置可视区和设备宽度等宽, 并

设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).


🐟HTML常见标签

注释标签

注释不会显示在界面上. 目的是提高代码的可读性.

<!-- 我是注释 -->

ctrl + / 快捷键可以快速进行注释/取消注释.


注释的原则


要和代码逻辑一致.

尽量使用中文.

不要传递负能量.(容易被老板实锤)

标题标签:h1-h6

有六个, 从 h1 - h6. 数字越大, 则字体越小.


<h1>hello</h1>

<h2>hello</h2>

<h3>hello</h3>

<h4>hello</h4>

<h5>hello</h5>

<h6>hello</h6>

效果:aa4.png


aa5.png


段落标签:p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落.

例如:

aa6.png

此时用p标签即可实现文字分段

  • p 标签表示一个段落.
    <p>这是一个段落</p>

通过 p 标签改进上述代码, 每个段落放到 p 标签中.


注意:


p 标签之间存在一个空隙

当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)

自动根据浏览器宽度来决定排版.

html 内容 首尾处的换行, 空格均无效.

在 html 中文字之间 输入的多个空格只相当于一个空格.

html 中直接输入换行不会真的换行, 而是相当于一个空格.

👉换行标签:br

br 是 break 的缩写. 表示换行(通常和p标签一起使用)


br 是一个单标签(不需要结束标签)

br 标签不像 p 标签那样带有一个很大的空隙.

< br/ > 是规范写法. 不建议写成 < br >

(其实只写br也可以,浏览器会自动补全代码)

👉格式化标签

加粗: strong 标签 和 b 标签

倾斜: em 标签 和 i 标签

删除线: del 标签 和 s 标签

下划线: ins 标签 和 u 标签


aa8.png


效果:  

aa9.png


👉图片标签:img

img 标签必须带有 src 属性. 表示图片的路径.


<img src="rose.jpg">


此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中.


img 标签的其他属性


alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.

title: 提示文本. 鼠标放到图片上, 就会有提示.

width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.

border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

aa8.png


aa9.png


aa10.png


aa11.png


注意:


属性可以有多个, 不能写到标签之前

属性之间用空格分割, 可以是多个空格, 也可以是换行.

属性之间 不分先后顺序

属性使用 “键值对” 的格式来表示.

属性=“xxxx”

关于目录结构:

对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.


相对路径: 以 html 所在位置为基准, 找到图片的位置.

同级路径: 直接写文件名即可 (或者 ./)

下一级路径: image/1.jpg

上一级路径: …/image/1.jpg


绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如

磁盘路径 D:\rose.jpg

网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png


代码示例


使用相对路径: 创建一个 image 目录和 html 同级, 并放入一个 rose2.jpg

<img src="image/rose2.jpg" alt="">

使用相对路径2: 在 image 目录中创建一个 html, 并访问上级目录的 rose.jpg

<img src="../rose.jpg" alt="">

使用绝对路径1: 最好使用 / , 不要使用 \

<img src="D:/rose.jpg" alt="">

使用绝对路径2: 使用网络路径

<img src="图片链接"alt="">




相关文章
|
1月前
|
移动开发 HTML5
HTML5的基本结构
HTML5的基本结构。
33 5
|
1月前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
1月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
48 5
|
1月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
5天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
5天前
|
存储 移动开发 前端开发
|
1月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
37 2
|
1月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
31 1
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
18 2