HTML基础1：[常见标签]

最新推荐文章于 2023-08-20 11:26:25 发布

dhdhdhdhg

最新推荐文章于 2023-08-20 11:26:25 发布

阅读量1.1k

点赞数 2

分类专栏： web 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_51405559/article/details/122403417

版权

web 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

文章目录

前言
一、HTML结构
二、HTML常见标签

前言

要开发一个网站，需要学习的技术：

(1)前端——网页相关的
前端三剑客：
html(页面的元素，如按钮、下拉菜单等等)
css(页面的样式)
javascript(用户交互的动态的动作)
更形象的方式形容这三个：html是骨，css是皮，javascript是魂。
(2)后端
Java web程序+web服务器

对于浏览器：
对于前端开发和后端开发比较专业、常用一点的有：chrome(谷歌)、firefox(火狐)、safari(苹果)
写前端代码：vscode(文本编辑器)、idea
前端三剑客：HTML、CSS、JavaScript都是编程语言。

一、HTML结构

1.认识HTML标签

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

在这里插入图片描述
对于标签名：html规范定义了标签名，如果写的不是html标准的标签名，不会报错，但没有任何效果。

1.标签名(body)放到<>中
2.大部分标签成对出现，< body >为开始标签，< /body >为结束标签
3.少数标签只有开始标签，称为“单标签”

半闭合标签：只有开始标签。例： 

4.开始标签和结束标签之间，写的是标签的内容(hello)
5.开始标签中可能会带有“属性”，id属性相当于给这个标签设置了一个唯一的标识符(身份证号码)

针对于不同的标签，html也定义了有哪些属性。
如果写的属性名不是该标签html标准规范中的，也不会报错，但不会生效

6.有部分标签，可以是以下写法< input/ >

2.HTML文件基本结构

<html>
    <head>
        <title>hello world</title>
    </head>
    <body>
        这是网页的正文，会显示在网页上
    </body>
</html>

html标签是整个html文件的根标签(最顶层标签)
head标签中写页面的属性，设置。是头信息
body标签中写的是页面上显示的内容。是网页正文
title标签中写的是页面的标题

在这里插入图片描述
直接写网页内容，也可以显示出来，但是这种方式不推荐
（1）要遵守书写规范
（2）页面一般会设置一些属性

3.标签层次结构

1.父子关系
2.兄弟关系

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

完整的html结构，对应起来，是一个多子树（一个结点下有多个子结点）（称为dom树，dom：文档对象模型的缩写）
其中：

1.< html >作为最顶级的标签
2.< head >和< body >是同一层/同一级，是具有兄弟关系的标签
3.< html >和< head >是父标签/子标签，属于父子关系
4.< html >和< body >是父标签/子标签，数于父子关系

4.开发者工具

开发者工具就是前端开发调试前端代码的工具
可以使用chrome的开发者工具查看页面的结构
打开的方式：
（1）f12
（2）页面元素右键–>检查
（3）右边…选择[更多工具]–>开发者工具
在这里插入图片描述
工具显示：

可以调整为中文

调整完成。

5.快速生成代码框架

在vscode中创建文件xxx.html，直接输入！，按tab键，此时能自动生成代码的主体框架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

二、HTML常见标签

1.注释标签

<!-- 注释的内容 -->

ctrl+/快捷键可以快速进行注释/取消注释
注释的原则：

1.要与代码逻辑一致
2.尽量使用中文
3.不要传递负能量

2.标题标签：h1-h6

有六个，从h1-h6，数字越大，则字体越小。

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

显示结果：
在这里插入图片描述

3.段落标签：p

把一段比较长的文本粘贴到html中，会发现并没有分成段落，例如如下文本：
在这里插入图片描述

<html>
    <head>
        <title>段落标签</title>
    </head>
    <body>
        内容
    </body>
</html>

采用这段代码显示为：
在这里插入图片描述
发现并没有显示成段落。
p标签表示一个段落

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

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

<html>
    <head>
        <title>段落标签</title>
    </head>
    <body>
        <p>1996年1月，Sun公司发布了Java的第一个开发工具包（JDK 1.0），这是Java发展历程中的重要里程碑，标志着Java成为一种独立的开发工具。9月，约8.3万个网页应用了Java技术来制作。10月，Sun公司发布了Java平台的第一个即时（JIT）编译器。</p>
        <p>1997年2月，JDK 1.1面世，在随后的3周时间里，达到了22万次的下载量。4月2日，Java One会议召开，参会者逾一万人，创当时全球同类会议规模之纪录。9月，Java Developer Connection社区成员超过10万。</p>   
        <p>1998年12月8日，第二代Java平台的企业版J2EE发布。1999年6月，Sun公司发布了第二代Java平台（简称为Java2）的3个版本：J2ME（Java2 Micro Edition，Java2平台的微型版），应用于移动、无线及有限资源的环境；J2SE（Java 2 Standard Edition，Java 2平台的标准版），应用于桌面环境；J2EE（Java 2Enterprise Edition，Java 2平台的企业版），应用于基于Java的应用服务器。Java 2平台的发布，是Java发展过程中最重要的一个里程碑，标志着Java的应用开始普及。</p>    
        <p>1999年4月27日，HotSpot虚拟机发布。HotSpot虚拟机发布时是作为JDK 1.2的附加程序提供的，后来它成为了JDK 1.3及之后所有版本的Sun JDK的默认虚拟机 [11]  。</p>    
    </body>
</html>

显示结果为：
在这里插入图片描述
总结：
占据单独的一行，如果不使用标签，内容换行（使用br标签）及空格（使用空格的转移符），在html是没有用的。
注意：

1.p标签之间存在一个空隙
2.当前的p标签描述的段落，前面还没有缩进（CSS会涉及）
3.自动根据浏览器来决定排版
4.html内容首位处的换行、空格均无效
5.在html中文字之间输入的多个空格只相当于一个空格
6.html中直接输入换行不会真的换行，而是相当于一个空格

4.换行标签：br

br是break的缩写，表示换行

1.br是一个单标签（不需要结束标签）
2.br标签不像p标签那样带有一个很大的空隙
3. 是规范写法，不建议写成

代码：

<html>
    <head>
        <title>换行标签</title>
    </head>
    <body>
        <p>
            1996年1月，Sun公司发布了Java的第一个开发工具包（JDK 1.0），这是Java发展历程中的重要里程碑。<br/>
            1997年2月，JDK 1.1面世，在随后的3周时间里，达到了22万次的下载量。<br/>
            1998年12月8日，第二代Java平台的企业版J2EE发布。<br/>
            1999年4月27日，HotSpot虚拟机发布。 <br/>
        </p>
    </body>
</html>

显示结果为：在这里插入图片描述

5.格式化标签

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

<html>
    <head>
        <title>格式化标签</title>
    </head>
    <body>
        <strong>strong  加粗</strong>
        <b>b  加粗</b>

        <em>em  倾斜</em>
        <i>i  倾斜</i>

        <del>del  删除线</del>
        <s>s  删除线</s>
        
        <ins>ins  下划线</ins>
        <u>u  下划线</u>
    </body>
</html>

展示结果：
在这里插入图片描述
这部分不重要，了解就行，如果文本有样式，其实使用css来设置样式更为常见

6.图片标签：img

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

< img src="cui.jpg" >

此时要把rose.jpg这个图片文件放到和html中的同级目录中。
在这里插入图片描述
img标签的其他属性：

1.alt：替换文本，当文本不能正确显示的时候，会显示一个替换的文字
2.title：提示文本，鼠标放在图片上，就会有提示
3.width/height：控制宽度高度，高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡
3.border：边框，参数是宽度的像素，但是一般使用CSS来设定

<img src="cui.jpg" alt="崔宇植" title="那年我们" width="500px" height="250px" border="5px">

展示结果：
在这里插入图片描述
注意:

1.属性可以有多个, 不能写到标签之前
2.属性之间用空格分割, 可以是多个空格, 也可以是换行.
3.属性之间不分先后顺序
4.属性使用 “键值对” 的格式来表示.

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

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

同级路径: 直接写文件名即可 (或者 ./)
下一级路径：image/1.jpg
上一级路径：. ./image/1.jpg

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

磁盘路径： D:\cui.jpg
网络路径： https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

7.链接标签

href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

<a href="http://www.baidu.com">百度</a>

链接的几种形式:
1.外部链接: href 引用其他网站的地址

<a href="http://www.baidu.com">百度</a>

2.内部链接: 网站内部页面之间的链接. 写相对路径即可.
在一个目录中, 先创建一个 1.html, 再创建一个 2.html

<!-- 第一个页面 -->
<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        <a href="第二个页面.html">点我跳转到第二个页面.html</a>
    </body>
</html>

<!-- 第二个页面 -->
<html>
    <head>
        <title>第二个页面</title>
    </head>
    <body>
        <a href="第一个页面.html">点我跳转到第一个页面.html</a>
    </body>
</html>

展示结果：
在这里插入图片描述
3.空链接: 使用 # 在 href 中占位.

<a href="#">空链接</a>

4.下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

<a href="AutoCAD 2007 - Simplified Chinese.zip">下载文件</a>

5.网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

<a href="http://www.baidu.com"><img src="cui.jpg" alt=""></a>

点击图片即跳转到a标签定义的跳转路径
6.锚点链接: 可以快速定位到页面中的某个位置.
用于url中，表示网页上一个部分
比如在一个test.html中，里边有一个…
如果访问test.html#p1，就是跳转到test.html页面中id为p1的元素位置上
网络资源url：[协议名]: //[ip或域名][端口号]/[资源的路径]#[锚点值]?[参数名1=参数值1&参数名2=参数值2…]
这里的参数是url中的参数，也成为queryString
例：http://localhost/test.html#h6?username=abc&password

<html>
    <head>
        <title>锚点链接</title>
    </head>
    <body>
        <a href="#6">第一页</a>
        <a href="#11">第二页</a>
        <a href="#16">第三页</a>
        <h3 >1</h3>
        <h3>2</h3>
        <h3>3</h3>
        <h3>4</h3>
        <h3>5</h3>
        <h3 id="6">6</h3>
        <h3>7</h3>
        <h3>8</h3>
        <h3>9</h3>
        <h3>10</h3>
        <h3 id="11">11</h3>
        <h3>12</h3>
        <h3>13</h3>
        <h3>14</h3>
        <h3>15</h3>
        <h3 id="16">16</h3>
        <h3>17</h3>
        <h3>18</h3>
        <h3>19</h3>
        <h3>20</h3>
    </body>
</html>

前边我们选择的数字是几，该数字就会在页面的最上方，除非到了最后进度条拉不下来就会出现最后的元素。

禁止标签跳转：< a href=“javascript:void(0);” >或者< a href=“javascript:;” >

dhdhdhdhg

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML基础1：[常见标签]

文章目录前言一、HTML结构1.认识HTML标签2.HTML文件基本结构3.标签层次结构4.开发者工具二、使用步骤1.引入库2.读入数据总结前言要开发一个网站，需要学习的技术：(1)前端——网页相关的前端三剑客：html(页面的元素，如按钮、下拉菜单等等)css(页面的样式)javascript(用户交互的动态的动作)更形象的方式形容这三个：html是骨，css是皮，javascript是魂。(2)后端Java w
复制链接

扫一扫