GitLabAbout
编辑

1.2 HTML Common Tags

1. HTML基本概念

1.1 HTML语法

（1）双标签

双标签（标记）也叫常规标记（标签）

<标记的名字 属性名=“属性值” 属性名2=“属性值2”…></标记名称>

例如：

<p class="box-p">这是一个段洛</p>

（2）单标签

单标签（标记）也叫空标记（标签）

 <标记的名字 属性名=“属性值” 属性名2=“属性值2”…/>

<img src="" width="100px" height="100px"/>

例如：

注意：/可以不写，但是为了语法的严谨最好写进去、/是放在结束的位置

1.2 HTML文档

<!doctype html> 
<!--声明文档类型是html超文本标记语言的-->
<html>
<!--html 也叫根元素-->
<head>
<meta charset="utf-8">
<!--设置编码格式国际编码-->
    <link rel="icon" href="https://www.a1l.xyz/img/yjtp.png">
<!--网站标题小图标-->
<title>HTML基础-第一阶段学习</title>
<!--网页标题-->
</head>

<body>
<!--页面主体-->
</body>
</html>

2. HTML常见元素

2.1 标题元素

为了使得网页页面结构更加有语义化，页面内会使得标题元素加以标记，HTML中标题类元素主要有

~

代码格式：

预览图

image-20231020231218237

2.2 段落元素

为了使网页文字的段落排列更加整齐，段落之间使用<p>和</p>标签定义

格式：<p></p>

特点：自带段间距和换行

代码格式:

效果图：

image-20231020231656017

2.3 加粗元素

文字进行强调，但又不是标题

格式：<b></b> bold的首字母

<strong></strong>

代码格式:

**效果图: **

image-20231020232059096

2.4 倾斜元素

倾斜标签,倾斜文字 不会换行

格式：<em></em>建议使用em

<i></i>

代码格式:

**效果图: **

image-20231020232407950

2.5 列表元素

注意：ol、ul的儿子只能是li

  1. 无序列表

自带实心圆的符号 type=“circle空心圆/disc实心圆/square方形 type="none"把无序列表自带的实心圆去掉 格式：

<ul> <li></li> </ul>

代码格式:

效果图

image-20231020232742944

  1. 有序列表

<ol> <li></li> </ol> type类型 start 开始 type=”A” start=”4 如果想从最末位开始排序，用reversed属性即可。 type的类型：

type=”1” 显示形式为1,2,3(默认形式）。 type=”A” 显示形式为A,B,C。 type=”a” 显示形式为a,b,c。 type=”I” 显示形式为大写罗马数字。 type=”i” 显示形式为小写罗马数字。

代码格式

效果图：

image-20231021020441370

  1. 自定义列表

默认情况下, dd会相对于dd有一个Tab键的效果, 如果不需要, 将margin改为0

<dl> <dt></dt> <dd></dd> <dl>

代码格式

效果图 image-20231021020935521

2.6 img元素

不会换行 插入图片不写宽高，默认是图片本身的宽高。如果只写宽不写高，是等比例缩放

格式

<img src=“图片路径” title=“鼠标悬停上去之后的提示信息” alt=“图片不显示之后的提示信息" width=”宽度” height=”高度”/>

效果图

在这里插入图片描述

2.7 路径分类

路径分类：绝对路径、相对路径

(1)、绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如f0f503b8cda8748e0e425f8705a7790.jpg个图片是存放在硬盘的D:\桌面\扎乱\国风图片目录下，那么 f0f503b8cda8748e0e425f8705a7790.jpg这个图片的绝对路径就是D:\桌面\扎乱\国风图片\f0f503b8cda8748e0e425f8705a7790.jpg。 注意：绝对路径在实际的开发过程中很少去使用，如果使用D:\桌面\扎乱\国风图片\f0f503b8cda8748e0e425f8705a7790.jpg来指定背景图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用\或/字符作为目录的分隔字符

注意： 在服务器里面不要使用中文文档，可能会报错

(2)、相对路径

相对路径，就是相对于自己的目标文件位置。

1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名； <imgsrc="pic4.gif" /> 2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下： 文件夹名/目标文件全称+扩展名； <imgsrc="img/pic.png“/> 3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下： ../目标文件文件名+扩展名 <img src="../seespring-logo.png"/>

2.8 链接元素

<a href=“路径” title=“鼠标悬停上去之后的提示信息” target=“规定在何处打开文档">内容</a>

Target属性：规定在何处打开文档。

    • A.target=“_self“ 默认值

    • B.target=“_blank“ 新窗口打开

代码格式

截图：

在这里插入图片描述
在这里插入图片描述

注意： 换行的标签建议作为父元素进行嵌套

3. 不常用标签

  1. 删除标签 不换行 <s></s> <del></del>

代码格式:

截图： 在这里插入图片描述

  1. 水平线

默认水平居中 <hr/>

代码格式:

截图： 在这里插入图片描述

  1. 换行

<br/>

代码格式:

截图： 在这里插入图片描述

  1. 下划线 <u></u>

代码格式:

截图： 在这里插入图片描述

  1. 上标和下标 <sup>上标</sup> <sub>下标</sub>

代码格式:

截图： 在这里插入图片描述

4. div与span元素

<div></div> 可以理解为一个容器（大盒子）换行 div标签里可以嵌套任意标签 所有的标签都可以理解为是一个”盒子“，只不过div标签是一个大盒子

<span></span>不会换行，可以理解为一个没有任何意义的一个小盒 子一般用在选取文章的一小节或者一小段的时候用 没有具体含义,当与CSS一同使用时，元素可用于为部分文本设置样式属性

5. 特殊字符

一些转义字符

html源码
显示结果
描述

&lt;

<

小于号或显示标记

&gt;

>

大于号或显示标记

&amp;

&

可用于显示其它特殊字符

&quot;

"

引号

&reg;

®

已注册

&copy;

©

版权

&trade;

™

商标

&nbsp;

不断行的空白

版权声明：本文为本博主在CSDN账号「Ein hübscher Kerl.」的首发原创文章,本文是修改订正版，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_54026286/article/details/129250702

上一页1.1 HTML基本概念下一页1.3 HTML forms

这有帮助吗？