网页的核心HTML结构

最新推荐文章于 2022-08-14 14:52:52 发布

You are

最新推荐文章于 2022-08-14 14:52:52 发布

阅读量1.1k

点赞数

分类专栏： Web技术

本文链接：https://blog.csdn.net/weixin_44832245/article/details/114546927

版权

Web技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Web技术学习1——HTML

一、何为HTML
二、HTML文档
- 2.1 HTML文档结构及分析
- 2.2 HTML文档相关说明
三、相关内容总结
四、总结

一、何为HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

注意：HTML不是一门编程语言,而是一种用于定义内容结构的标记语言

网页的构成：HTML+CSS+JS+Angular+NestJS
HTML:构成网页的核心内容，整体的架构
CSS:用来美化网页，让网页具有更好的观赏性
JS:进行交流的一种语言
Angular:Angular是一个由Google开发维护的开源前端开发框架和平台
NestJS:后台管理

二、HTML文档

2.1 HTML文档结构及分析

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>Livechen的第一个Web页</h1>
  <p>虽然当前还很丑，但是我会通过今后的学习让你变得非常漂亮：)</p>
  <p>Today you do things people do not do;tomorrow you do things people cannot do：)</p>
</body>
</html>

HTML 文档：HTML 由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成
元素：元素=开始标签+内容+结束标签
HTML文档结构分析：所有的东西都要包含在<html></html>这个元素之间，其它元素需要嵌套其中; <title>这里写自己想要的网页标题</title>;

2.2 HTML文档相关说明

注释
VS code里面使用ctrl+/进行快速注释，注释的内容仅仅在代码区对自己可见，以备很久之后再次对代码的处理，注释的内容不会再浏览器中显示。
空元素
只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>, <a>等
元素的属性
属性的内容不会在页面中显示，但是把鼠标移动到标题那里会看到不一样的效果

三、相关内容总结

3.1 标题

<h1>标题</h1>
<p>内容</p>
<hr>  /*水平分割线

上面是标题的常见格式，HTML提供了6中标题大小，从大到小为<h1> ~ <h6>,数字对应为几级标题,比如<h3>表示3级标题

3.2 文本格式

<mark>想要高亮的内容</mark>：此标签用于高亮文本
<del>This is heading 2</del>:简单来说此标签就是在中间的内容上画一条线，表示删除，但是又不直接删掉，可以用来表示一个软件的版本过时了，推荐用另外一个，<s></s>有同样的效果
<ins>下划线内容</ins>:用于下划线，<u></u>有同样效果
<small>缩小内容</small>;<strong>加粗内容<strong>;<em>倾斜内容<em>

3.3 超链接与锚点

超链接语法：
<a href="https://blog.csdn.net/weixin_44832245?spm=1000.2115.3001.5343" target="_blank">我的csdn主页</a>
href：即为要跳转去的地址 URL（Uniform Resorce Locator)
target：属性为_blank，表示在新的页面打开超链接（默认是在当前页面打开即_self）
我的csdn主页：是超链接标签包含的内容，显示在页面上供用户点击
锚点语法：
id="C4"：生成锚点
href="#C4"：使用超链接语法进行跳转
注意：网页中锚点的数值是唯一的，超链接中的地址需要有#
举例：常见的回到首页

<h1 id="c">梦想开始的地方，以梦为马，不负韶华</h1>/*想回到顶部这里肯定要放到网页最顶端
中间自己想写啥，就写啥，就是一些文本内容
<a href="#c">回到顶部</a>

3.4 图片与文件路径

这里我列举了这两种插图片的方式，实际上第一种是不太可取滴，一个万维互联的网页，把图片放在自己的D盘中，显示不可取，实际上还有超链接的方式，这里我还有点不太会，所以就没有总结上来

<img src="./image/image1_fangao.jpg" alt="Image is fangao Logo,but opening is wrong">  
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20191104ac%2F320%2Fw1280h1440%2F20191104%2F51c2-ihuuxuu7364642.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618310682&t=34b9cf6c87410a924f61bf82a71f7dc4">