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

admin管理员组
文章数量:1794759

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

文章目录

引入-什么是HTML
HTML基础
- html标签
- html元素
- 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属性，通过这个属性来制定一个具体的图片资源。src属性要写一个具体的图片路径，可以是本地路径，也可以是网络路径。 img本身也是一个单标签。

网络路径：就是一个形如或者这样的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="img02.sogoucdn/app/a/200541/size170*140_8cb616d6-15e6-461a-a7db-5117850aa464.jpg" alt=""> </body> </html>

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

img还有其他属性，如title属性，当光标放到图片上时，会有一个消提示框。

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

<img src="img02.sogoucdn/app/a/200541/size170*140_8cb616d6-15e6-461a-a7db-5117850aa464.jpg" alt="这是一个符号" title="这是我的壁纸" width="500px" height="500px">  超链接标签

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

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

href属性表示链接地址。

本文标签：源码常见标签网页文件

版权声明：本文标题：前端~html~HTML零基础（一） ~HTML常见标签如何开发一个html文件在网页查看源码内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686633800a88802.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。