前端~html~HTML零基础（一） ~HTML常见标签/如何开发一个html文件/在网页查看源码

Salute-Y

已于 2022-09-07 18:16:05 修改

阅读量7.5k

点赞数 3

分类专栏： Java API 文章标签： html 前端 css

于 2022-02-28 11:30:51 首次发布

本文链接：https://blog.csdn.net/Merciful_Lion/article/details/123165892

版权

Java API 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

文章目录

引入-什么是HTML
HTML基础
HTML常见标签

引入-什么是HTML

HTML是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML不是编程语言，而是一门标记语言
标记语言是一套标记标签（markup tag）
HTML使用标记标签来描述网页
HTML文档包含了HTML标签及文本内容
HTML文档也叫做web页面。

HTML基础

html标签

HTML代码由"标签"构成。
形如：

<body> hello</body>

<>中写入标签名(body)
大部分标签成对出现.为开始标签，为结束标签
少数的标签是只有开始标签，称为 单标签.
开始标签和结束标签之间，写的是标签的内容（hello）
开始标签中,可以写入一些属性.

在html中，不同的标签可能会支持不同的属性，这是html本身有这样的规定。但是所有的标签，都支持id这样的属性。id属性的含义就表示这个标签的唯一身份标识（在同一个html里面不能有两个id相同的标签）

<body id="myID">hello</body>

html元素

"html标签（tag）"和"html元素(element)"通常情况下指的是一个意思。
但是严格来讲，一个html元素通常包含了开始标签和结束标签。
如以下实例：
HTML元素：

<p>举个栗子</p>

html开发工具

我们可以使用记事本来写html代码，但文件后缀名需要更改成**.html**。
一般情况下，idea也是支持HTML代码的。但CSS和JS语言，只有专业版的idea才支持，而普通的社区版不支持。不支持意味着没有代码高亮、缩进、补全等功能。
一些常见的web浏览器如谷歌、IE、Firefox、Safari、Microsoft Edge等是用来读取html文件，并将其作为网页显示。浏览器并不是之间显示的HTML标签，但可以使用标签来决定展现HTML页面的内容给用户：
在这里插入图片描述
在浏览器中，我们使用浏览器的“开发者工具”就可以看到这个页面的详细内容~开发者工具是程序员在写前端代码时非常重要的东西。打开方式：右键->检查或者F12.

在检查中，切换到元素页面，我们就可以看到每个html标签对应的页面内容~
在这里插入图片描述
在idea或者vs code中，通过！+tab键可以快速生成一个网页的基本标签，避免了每次都需要重复的写很多代码。

html文件基本结构/网页结构

以下是一个完整的HTML结构：

<html> 
     <head>
        <title>第一个页面</title>
       </head>
       <body>
          hello word
       </body> 
</html>

最外层的是html标签。一个HTML文件的顶层标签就应该是这个标签.
在html标签里面，包含一个head标签和body标签. 其中 head标签里面放的是这个html中的一些属性。body标签里面放的是这个html要展示的内容。

这样的结构就类似于一个“树形结构”
html标签就是根节点.
head和body就是html的子节点.head和body是兄弟节点的关系。
title又是head的子节点.所以title又是html的孙子节点.
在这里插入图片描述

通常我们把这个由标签（元素）构成的树称为DOM树（Document Object Model）.这里的D指的是html本身，而O指每个标签其实又可以视为一个对象.
这些对象也包含了一些属性和方法，然后我们就可以在JS（JavaScript）中来访问或者修改这里的属性，或者调用其中的方法了。
下面是一个可视化的HTML网页结构：
在这里插入图片描述
在该页面结构中，只有白色部分，标签内的内容展现在网页上。

HTML常见标签

html中大部分标签是有“语义”的。不同的标签有不同的含义和用途。

注释标签

<!-- 这里是注释标签-->

注释标签要注意和代码上下逻辑一致，尽量用中文，不要传递负能量.
在这里插入图片描述
由于js的源代码在网页上就能被看到，为了放止代码泄露，JS采取了“代码混淆”的方式，在不改变源代码的逻辑基础上，把代码的可读性尽可能的破坏掉，方法包括但不限于：把缩进、空格、换行都去掉，把变量名替换成a,b,c…

标题标签

标题标签有h1到h6，共六个。数字越大，字体越小。此处的标题并非网页的标题title，而是内容的标题。（html最开始是为了实现“报纸”这样类似的功能…在网页上）

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

段落标签

标签

<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>

p 标签之间存在一个空隙
当前的 p 标签描述的段落, 前面还没有缩进. (CSS中涉及 )
自动根据浏览器宽度来决定排版.
html 内容首尾处的换行, 空格均无效.
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格.

换行标签

< br> br是break的缩写，表示换行

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
< br/> 是规范写法. 不建议写成 < br>

格式化标签

加粗：strong标签和b标签
倾斜：em标签和i标签
删除线：del标签和s标签
下划线：ins标签和u标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

这些标签实现的功能CSS也可以实现，一般以CSS为主

图片标签

img=>image. img标签

<img src="" alt="">

img标签非常依赖src属性，通过这个属性来制定一个具体的图片资源。src属性要写一个具体的图片路径，可以是本地路径，也可以是网络路径。
img本身也是一个单标签。

网络路径：就是一个形如http://或者http://这样的url

下面是通过网络路径演示在网页上添加图片：
在这里插入图片描述

这个图片上面的路径就是网络路径，复制该路径，然后，加入到img的src中…

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<img src="https://img02.sogoucdn.com/app/a/200541/size170*140_8cb616d6-15e6-461a-a7db-5117850aa464.jpg" alt="">

</body>
</html>

效果如下：
在这里插入图片描述
img标签中的alt属性的作用是：如果图片无法显示，会显示一些文字或者符号，表示这个图片曾经存在。
如下：
修改src图片的网络路径后，图片无法显示。

<img src="https://img02.sogoucdn.com/apze170*140_8cb616d6-15e6-461a-a7db-5117850aa464.jpg" alt="这是一个符号">

在这里插入图片描述
img还有其他属性，如title属性，当光标放到图片上时，会有一个消息提示框。

<img src="https://img02.sogoucdn.com/apze170*140_8cb616d6-15e6-461a-a7db-5117850aa464.jpg" alt="这是一个符号" title="这是我的壁纸">

还可以修改图片的大小，用width和height属性

<img src="https://img02.sogoucdn.com/app/a/200541/size170*140_8cb616d6-15e6-461a-a7db-5117850aa464.jpg" alt="这是一个符号" title="这是我的壁纸"
width="500px"
height="500px">
<!--px是像素单位-->

超链接标签

a标签就是超链接标签。
点击之后就会跳到另外的网页。

<a href="http://www.baidu.com">这是一个超链接</a>

href属性表示链接地址。

Salute-Y

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端~html~HTML零基础（一） ~HTML常见标签/如何开发一个html文件/在网页查看源码

文章目录引入-什么是HTMLHTML基础html标签html元素html开发工具html文件基本结构/网页结构三级目录引入-什么是HTMLHTML是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML不是编程语言，而是一门标记语言标记语言是一套标记标签（markup tag）HTML使用标记标签来描述网页HTML文档包含了HTML标签及文本内容HTML文档也叫做web页面。HTML基础html标签HTML代码由"标签"
复制链接

扫一扫