HTML基础

最新推荐文章于 2024-09-07 08:27:06 发布

迪卢克的现任

最新推荐文章于 2024-09-07 08:27:06 发布

阅读量194

点赞数 4

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/m0_53644435/article/details/120551176

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、web网页

一、web网页

1、网页：是一个容器，用来承载可视化的内容。
2、网页的组成：文字、图像、超链接、视频、音频、动画等
3、静态网页：内容或风格保持不变。访问速度快、更新不方便
4、动态网页：页面内容会随用户的操作发生变化。可以和后台服务器进行实时的数据交换

二、HTML基本结构

   <!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>

<head></head>可以简单理解为是“头”。网页的“头”的部分都是用这部分的标签代码实现的。它规定了字符集、窗口类型。还有网页标题，包括网页上的一些编辑栏。

<body></body>则可以理解为“身体”，它是一个网页的主题部分。相当于一个空白画布，我们需要将我们的想法“画”在上面。

三、HTML的常用标签

1.文本标签：

标题标签	<hn>文本</hn>	n的取值在1~6之间，数字越大字体越小,可以自动换行
段落标签	<p>内容</p>	会自动换行
显示文本	<span>内容</span>	不会自动换行
水平线	<hr color='' width='' size=''/>	水平线可以添加宽度、颜色等属性
居中标签	<center>文本</center>	文本居中

代码如下：

<!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>

<!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>
    <hr color='pink' width="800" size="5"/>
    <p>
        文本1
    </p>
    <p>
        文本2
    </p>
    <hr color='blue' size="5"/>
    <span>内容</span>
    <span>内容</span>
    <hr color='blue' size="5"/>
    <center>文本</center>
</body>
</html>

2.文本样式标签：

代码如下：

<body>
    <font face='隶书' color='yellow' size='30'>文本</font>
</body>

3.文本格式标签：

文字加粗	<b></b> 或 <strong></strong>
斜体	<i></i> 或 <em></em>
删除线	<s></s> 或 <del></del>
下划线	<u></u> 或 <ins></ins>

代码如下

  <p>
        <b>文字加粗显示</b>
        <strong>文字加粗显示</strong>
    </p>
    <p>
        <i>文字斜体显示</i>
        <em>文字斜体显示</em>
    </p>
    <p>
        <s> 文字加删除线</s>
        <del> 文字加删除线</del>
    </p>
    <p>
        <u>文字加下划线</u>
        <ins>文字加下划线</ins>
    </p>

4、语义标签&换行标签

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

高亮显示	mark
引用。通常用于指定内容的出处	cite
换行标签	<br/>

代码如下：

<p>
        文本中<mark>高亮</mark>效果
    </p>
    <br/><br/>
    <p>
        床前明月光，疑是地上霜<br />
        <cite>--李白《静夜思》</cite>
    </p>

效果如图：

5、特殊字符

特殊字符	字符代码	特殊字符	字符代码
空格		注册商标	®
上标	<sup></sup>	摄氏度	°
下标	<sub></sub>	正负号	±
版权符号	©	除号	÷

代码如下：

  <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>

结果演示：

6、图像标签

A、常见的图像格式：

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

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

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

           B、图像标签：

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

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

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

 <p>
        <img src="../images/1.jpg"alt='正在加载中。。。。。。'width='500'height='300'
        border='5'title='这是魈'vspace='50'hspace='100'align='lift'/>
    </p>

7、补充说明：路径：文件的存储位置

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

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

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

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

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

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