HTML常用标签(文本，图片)

最新推荐文章于 2024-04-13 17:02:31 发布

努力做一只合格的前端攻城狮

最新推荐文章于 2024-04-13 17:02:31 发布

阅读量3k

点赞数 7

分类专栏： HTML学习文章标签： html css javascript

本文链接：https://blog.csdn.net/shao_xuan_/article/details/120476600

版权

HTML学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

了解Web

一、Web网页

1、什么是网页

可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。（如我们平时打开的浏览器页面）

2、构成网页的要素

网页主要由文字、图像和超链接（超链接为单击可以跳转的网页元素）等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。

3、动态网页与静态网页

网页可分为动态网页和静态网页。静态网页的内容或风格保持不变。访问速度快但更新不方便。动态网页的页面内容会随用户的操作发生变化。可以和后台服务器进行实时的数据交换。静态网页和动态网页都有自己的优缺点，在网页制作过程中，我们常常采取动静结合的方式。

4、HTML、CSS、JavaScript简介

1、HTML（超文本标记语言 Hyper Text Markup Language），是用来描述网页的一种语言。
2、CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})
3、JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

HTML定义网页的结构，CSS描述网页的样式，JavaScript定义网页的行为。

二、Web标准

1、结构标准

结构标准用于对网页元素进行整理和分类，主要包括：HTML、XML和XHTML。

2、样式标准

表现标准用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

3、行为标准

行为标准是指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript。

三、HTML：超文本标记语言

1、网页的基本结构

文件的扩展名必须是.html或.htm其基本结构为

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

html5需要 !DOCTYPE html声明当前网页支持H5标准。结构如下：

// An highlighted block

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

2、标签

在HTML中所有用’<>'括起来的元素都称为标签。
标签分为完整标签、单体标签。
完整标签包括起始标签和一个结束标签。

起始标签如<h1>结束标签如</h1>

单体标签如：

  <input />

标签的属性：放在起始标签中,例如：""中’lang’表示的html标签的属性。

3、常用的HTML标签

(1)文本标签

     A、标题标签：<hn>文本</hn> , n的取值在1~6之间，数字越大字体越小,可以自动换行
		  
		   B、段落标签：<p>内容</p>,会自动换行
		  
		   C、显示文本：<span>内容</span>,不会自动换行
		  
		   D、水平线: <hr color='' width='' size=''/>
		  
		   E、居中标签：<center></center>

(2)文本样式标签

<font face='字体' color='文字颜色' size='字号'></font>

(3)文本格式标签

   A、文字加粗:<b></b> 或 <strong></strong>
		   
		   B、斜体：<i></i> 或 <em></em>
		   
		   C、删除线：<s></s> 或 <del></del>
		   
		   D、下划线：<u></u> 或 <ins></ins>

(4)语义标签

  只表示某种特定的含义
		
		    A、mark：高亮显示
			
			B、cite：引用。通常用于指定内容的出处

(5)换行标签

    <br />

(6)特殊字符

	
		   A、空格：&nbsp;
		   
		   B、上标：<sup></sup>
		   
		   C、下标：<sub></sub>
		   
		   D、版权符号: &copy;
		   
		   E、注册商标：&reg;
		   
		   F、摄氏度：&deg;
		   
		   G、正负号：&plusmn;
		   
		   H、除号：&divide;

(7)图像标签

    A、常见的图像格式：
			
			    GIF：支持动画、采用无损压缩、支持透明处理。通常用来做Logo、色彩相对单一的图像
				
				PNG：体积小、支持透明、不支持动画、颜色过渡平滑
				
				JPG(JPEG)：支持的颜色多(超过256种)、体积大、采用有损压缩技术
				
			B、图像标签：
			
			    <img src='图像的URL' alt='图片加载异常时的提示信息' width='宽度' 
				
				     height='高度' border='边框' title='鼠标悬停在图像上的提示信息'
					 
					 vspace='垂直边距' hspace='水平边距' align='对齐方式'/>

(8)路径

   文件的存储位置
		
		    A、绝对路径：从盘符开始的路径或完整的网络路径
			
			   完整的描述文件位置的路径就是绝对路径，以web站点根目录为参考基础的目录路径。绝对路径名的指定是从树型目录结构顶部的根目录开始到某个目录或文件的路径，由一系列连续的目录组成，中间用斜线分隔，直到要指定的目录或文件，路径中的最后一个名称即为要指向的目录或文件。
				 
			B、相对路径：从当前文件夹开始的路径，通过层级关系来描述文件的位置
			
			     ./ ：代表当前文件夹(目录)
				 
				 ../：代表当前文件夹的上一级文件夹(目录)

四、常用标签示例

1、文本常用标签代码示例

// HTML文本常用标签及注释
<!DOCTYPE html>
<!-- 表示当前的网页支持html5标准 -->
<html lang="en">
<!-- 语言为英文 -->
<head>
    <meta charset="UTF-8">
    <!-- 指定页面的编码格式(字符集) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 自适应终端的窗口 -->
    <title>H5常用标签</title>
    <!-- 网页标题
			</head> -->
</head>
<body>
    <p>
    <!-- 段落标签：<p>内容</p>,会自动换行 -->
        <h1>标题标签</h1>
        <h2>标题标签</h2>
        <h3>标题标签</h3>
        <h4>标题标签</h4>
        <h5>标题标签</h5>
        <h6>标题标签</h6>
        <!-- 标题标签：<hn>文本</hn> , n的取值在1~6之间，数字越大字体越小,可以自动换行 -->
    </p>
    <p>
        <span>显示文本</span>
        <span>显示文本</span>
        <!-- 显示文本：<span>内容</span>,不会自动换行 -->
        <center>文本居中</center>
        <!-- 居中标签，H5已经将<center></center>淘汰，H4中依旧可以使用 -->
        <hr color="red" size="5">
        <!-- 水平线标签，其中color代表水平线颜色 size代表竖直宽度-->
        <font face='隶书' color='red' size='20'>文本样式</font>
        <!--  <font face='字体' color='文字颜色' size='字号'></font> -->
    </p>
    <p>
        <!-- 常用文本格式标签如下 -->
        <b>加粗</b><br />
        <strong>文本加粗</strong><br />
        <!-- 文字加粗:<b></b> 或 <strong></strong>H5提倡使用strong标签 -->
        <i>斜体</i><br />
        <em>斜体</em><br />
        <!-- 斜体：<i></i> 或 <em></em>H5使用em标签 -->
        <s>删除线</s><br />
        <del>删除线</del><br />
        <!-- 删除线：<s></s> 或 <del></del>\H5使用del标签 -->
        <u>下划线</u><br />
        <ins>下划线</ins><br />
        <!-- 下划线：<u></u> 或 <ins></ins> H5使用ins标签-->
    </p>
    <p>
        <!-- 常用语义标签如下 -->
        <span><mark>高亮</mark>显示mark</span><br />
        <span>用于指定内容出处<cite>引用cite</cite></span><br />
        <!-- 换行标签：<br /> -->
    </p>
    <p>
        <!-- 特殊字符 -->
        <span>空格使用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'nbsp标签前加&'</span><br />
        <span>上标：sup如：O<sup>2</sup></span><br />
        <span>下标：sub如：CO<sub>2</sub></span><br />
        <span>版权符号:copy:如 &copy;</span><br />
        <span>注册商标：reg如：&reg;</span><br />
        <span>摄氏度：deg如：30&deg;</span><br />
        <span>正负号：plusmn如：a&plusmn;b</span><br />
        <span>除号：divide如：a&divide;b</span><br />
    </p>
</body>
</html>

2、效果展示

在这里插入图片描述

3、常用图片标签代码示例

// 常用图片标签示例
<!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>
    <img src="../Sci.png" alt="图片加载中" width="500" height="400" border="5" 
    title="未来城市" vspace="200" hspace="200" align="left">
    <!-- <img src='图像的URL' alt='图片加载异常时的提示信息' width='宽度' 
				
	 height='高度' border='边框' title='鼠标悬停在图像上的提示信息'
					 
	 vspace='垂直边距' hspace='水平边距' align='对齐方式'/> -->
</body>
</html>

4、效果展示

在这里插入图片描述

努力做一只合格的前端攻城狮

关注

7
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML常用标签(文本，图片)

HTML5学习小结了解web一、web网页1、什么是网页2、构成网页的要素3、网页的分类二、Web标准1、结构标准2、样式标准3、行为标准二、HTML：超文本标记语言1、网页的基本结构2、标签3、常用的HTML标签了解web一、web网页1、什么是网页网页是一个用来承载可视化内容的容器。（如我们平时打开的浏览器页面）2、构成网页的要素文字、图像、超链接、视频、音频、动画等构成。3、网页的分类网页可分为动态网页和静态网页。静态网页的内容或风格保持不变。访问速度快但更新不方便。动态网页的页面
复制链接

扫一扫