HTML的初识

最新推荐文章于 2024-07-21 12:12:15 发布

命中。

最新推荐文章于 2024-07-21 12:12:15 发布

阅读量131

点赞数 1

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/YANGMENGZHENG/article/details/120577188

版权

一.HTML是什么

二.网页的基本结构

三.HTML中的标签

一.HTML是什么

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。是网页制作所必备的。

二.网页的基本结构

1、网页的基本结构：

<html>
 <head></head>
 <body></body>
 </html>

ps:文件的拓展名必须为.html或.htm

2、快捷方式shift+1快速出现网页框架如下：

<!DOCTYPE html> -->表示当前的网页支持html5标准
 <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中的标签

所有用'<>'括起来的元素都称为标签(标记)

标签分为单体标签和双体标签

eg:'<title>'一个结束标签'</title>'双体标签

<input />单体标签

1、文本标签

A、标题标签：<hn>文本</hn> , n的取值在1~6之间，数字越大字体越小,可以自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是一个标题</title>
</head>
<body>
    <h1>文本1</h1>
    <h2>文本2</h2>
    <h3>文本3</h3>
    <h4>文本4</h4>
    <h5>文本5</h5>
    <h6>文本6</h6>
</body>
</html>

B、段落标签：内容,会自动换行

C、显示文本：内容,不会自动换行

D、水平线: <hr color='' width='' size=''/>

E、居中标签：<center></center>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>文本</p>
    <p>文档</p>
    <span>文本</span>
    <span>文档</span>
    <hr color="red"/>
    <center>你好</center>
</body>
</html>

2、文本样式标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <font face="隶书" color="blue" size="8">中华人民共和国</font>
</body>
</html>

3、文本格式标签：

 A、文字加粗: 或 

 B、斜体： 或 

 C、删除线：<s></s> 或 <del></del>

 D、下划线： 或 <ins></ins>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>文本</b>
    <strong>文本</strong>
     <br><br>
    <i>文本</i>
    <em>文本</em>
     <br><br>
    <s>文本</s>
    <del>文本</del>
     <br><br>
    <u>文本</u>
    <ins>文本</ins>
</body>
</html>

4、语义标签：只表示某种特定的含义

       A、mark：高亮显示

           B、cite：引用。通常用于指定内容的出处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        文本<mark>高亮</mark>显示
    </p>
    <p>黑夜给了我黑色的眼睛，我却来用它寻找光明<br>
       <cite>--海子</cite></p>
</body>
</html>

5、特殊字符：

 A、空格： 

 B、上标：

 C、下标：

 D、版权符号: ©

 E、注册商标：®

 F、摄氏度：°

 G、正负号：±

 H、除号：÷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        空          格<br />
        空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br />
        版权：&copy;<br />
        注册商标：&reg;<br />
        摄氏度：100&deg;<br />
        正负号：a&plusmn;b<br />
        除号：a&divide;b<br />
        上标：x<sup>2</sup>+y<sup>2</sup>=z<sup>2</sup><br />
        下标：CO<sub>2</sub>
    </p>
</body>
</html>

6、图像标签

 A、常见的图像格式：

 GIF：支持动画、采用无损压缩、支持透明处理。通常用来做Logo、色彩相对单一的图像

 PNG：体积小、支持透明、不支持动画、颜色过渡平滑

 JPG(JPEG)：支持的颜色多(超过256种)、体积大、采用有损压缩技术

 B、图像标签：

 <img src='图像的URL' alt='图片加载异常时的提示信息' width='宽度'

 height='高度' border='边框' title='鼠标悬停在图像上的提示信息'

 vspace='垂直边距' hspace='水平边距' align='对齐方式'/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <img src="../images/22.webp.jpg"alt='正在加载...'width='400'height='350'
        border='5'title='手机'vspace='50'hspace='100'align='left'/>
    </p>
</body>
</html>

7、路径：文件的存储位置

       A、绝对路径：从盘符开始的路径或完整的网络路径

           E:\deyun前端\9月新班\2021-9-25\code\images\7.png

               http://localhost:8080/code/images/7.png

           B、相对路径：从当前文件夹开始的路径，通过层级关系来描述文件的位置

           ./ ：代表当前文件夹(目录)

               ../：代表当前文件夹的上一级文件夹(目录)

命中。

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的初识

一.HTML是什么HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。是网页制作所必备的。二.网页的基本结构 1、网页的基本结构： <html> <head></head> <body>...
复制链接

扫一扫