【HTML5学习小结(1)】

꒰ঌsnail໒꒱

已于 2022-04-24 17:57:54 修改

阅读量1k

点赞数 1

分类专栏： html5 文章标签： html5

于 2022-04-09 23:43:41 首次发布

本文链接：https://blog.csdn.net/m0_46839072/article/details/124069193

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5学习小结

了解Web
一、web网页
二、web标准
二、HTML5(H5)超文本标记语言：
三、常用标签示例

了解Web

一、web网页

1、网页究竟是什么？

网页可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。

2、认识网页

静态网页：用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。特点：静态网页更新不方便，但是访问速度快。

动态网页:显示的内容则会随着用户操作和时间的不同而变化。动态网页可以和服务器数据库进行实时的数据交换。

在网页制作过程中，我们常常采取动静结合的方式.

3、构成网页的要素有哪些？

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

4、web页面的组成。

(1)HTML：超文本标签语言，用于显示内容，搭建网页的结构

(2)CSS：层叠样式表，用于美化页面

(3)JavaScript：js,脚步语言。用于页面的行为(主要用于表单验证、用户的交互)

二、web标准

1、结构标准

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

2、样式标准

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

3、行为标准

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

二、HTML5(H5)超文本标记语言：

它是HTML版本号，是HTML前期版本的升级

1、web页面的开发环境

(1)普通的文本编辑器
(2)vscode软件

2、网页的基本结构

文件的扩展名必须是.html或.htm。

①其基本结构如下：

<!DOCTYPE html>  ---> 支持html5的html文件
<html lang="en"> --><html>是页面的起始根标签
	<head> --> <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>  -->页面结束的根标签`

②简要说明结构：

标签名	定义	说明
$< h t m l > < / h t m l >$	HTML标签	页面中最大的标签，称为根标签
$< h e a d > < / h e a d >$	文档的头部	是所有头部元素的容器
$< t i t l e > < / t i t l e >$	文档的标题	定义文档的标题
$< b o d y > < / b o d y >$	文档的主体	元素包含文档的全内容，页面内容都是放在body里面的

3、标签

(1)双标签：<起始标签> 内容 </结束标签>

(2)单标签：<标签名/>

4、常用标签

（1）单标签

标签	说明
$< h r / >$	水平分隔线
$< b r / >$	换行

（2）常用双标签

标签	说明
$< h n > < / h n >$	标题标签(n的取值为1~6,数字越大字体越小)
$< p > < / p >$	段落标签，会自动换行
$< s p a n > < / s p a n >$	块级标签，不会自动换行
$< f o n t > < / f o n t >$	字体标签，设置字体的字型、颜色、字号

（3）文本格式化标签：

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

（4）特殊字符：

 A、空格：&nbsp;
	   
 B、版权符号：&copy;
	   
 C、注册商标：&reg;
	   
 D、摄氏温度：&deg;
	   
 E、正负号：&plusmn;
	   
 F、乘号：&times;

 G、除号：&divide;

（5）图像标签：

A、图像格式：

		   .jpg：体积大,不利于网络传输(256种真彩色)
		   
		   .png：体积小,支持透明。利于网络传输
		   
		   .gif：小动画,支持透明、体积小。利于网络传输

B、标签

		  <img src="" alt="" width=" " height=" "/>
		  
		  src：表示图像的全路径
		  
		  alt：当图像加载异常时,给出的提示信息
		  
		  width： 图像的宽度
		  
		  height: 图像的高度

C、路径

		  绝对路径：从根目录开始的路径(f盘:\前端\code\images\2.png)
		  
		  相对路径：从当前目录开始的路径(../images/2.png)
		  
		       . ：代表当前目录
			   
			   .. : 代表当前目录的上一级目录

（6）列表标签：

A、无序列表

		   <ul type="项目符号的类型">  -->disc、circle、square
		     <li>列表项</li>
			 <li>列表项</li>
			 <li>列表项</li> 
		   </ul>

注：这里的项目符号类型有三种，默认是disc为实心圆，circle为空心圆，square为实心方块。

B、有序列表

		   <ol type="项目符号的类型" start="项目符号的起始值">
		     <li>列表项</li>
			 <li>列表项</li>
			 <li>列表项</li>
		   </ol>

注：start详细解释：如start="2"就是说，有序列表，他的第一个列表项是从序号2开始的。

C、项目列表

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

（7）超链接

	 <a href="URL">文本/图像/多媒体</a>

5、标签的属性

放在起始标签中，以键=“值"方式出现，如下所示：

  <font color="red" size="35">西安邮电大学</font>

6、颜色的使用

(1)使用颜色名：red、green、blue等

(2)十六进制颜色: #rrggbb(#rgb)，每位上的取值最大是F

(3)颜色函数：rgb(r,g,b)、rgba(r,g,b,a) 注：这里的a指的是透明度，数值范围是0-1，不可以为负值，参数越小，透明度越高。

7、设置页面的背景色或背景图像

(1)背景图像：

 <body background="图像的全路径名">

(2)背景色

 <body bgcolor="颜色值">

三、常用标签示例

1、文本标签示例

①代码块如下：

<!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>标签</title>
</head>
<body>
   <!--双标签-->
   <h1>红楼梦</h1>
   <h2>西游记</h2>
   <h3>三国演义</h3>
   <h4>水浒传</h4>
   <!--单标签--> 
   <hr/>
   <p> <font color="red">大雁塔</font></p>
   西安邮电大学<br/>
   <p>乾陵</p>
   <p>茂陵</p>
   <hr size="15" color="red" width="1200"/>
   <input type="text" placeholder="请输入用户名"><span>用户名可用</span>
   <br/><br/>
   <font size="20" color="#ccc" face="宋体">西安邮电大学</font>
   <!--斜体标签-->
   <p> <i>咸阳</i></p>
   <!--字体加粗-->
   <p>
     <b>西安</b>
     <strong>西安</strong>
   </p>
   <!--字体下划线-->
   <p>
      <u>VVVVV</u>
   </p>
   <!--字体删除线-->
   <p>
       <s>DDDD</s>
   </p>   
</body>
</html>

②效果展示：

在这里插入图片描述

2、特殊字符标签

①代码块如下：

<!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>特殊字符</title>
</head>

<body>
    AAA&nbsp;&nbsp;&nbsp;ccc
    <p>
        &lt;
    </p>
    <p>5000&yen;

    </p>
    <p>
        版权符号：&copy;
    </p>
    <p>注册商标：&reg;</p>
    <p>今天最高温度：21&deg;</p>
    <p>正负号：&plusmn;</p>
    <p>5&times;6</p>
    <p>12&divide;</p>
    <!--上标有特殊字符表示，共有两种表现形式；下表表示只有一种表现形式-->
    <p>上标：a&sup2;+b&sup2;=c&sup2;</p>
    <p>
        上标：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
    </p>
    <p>下标：CO<sub>2</sub></p>
    <image src="../images/1.jpg" alt="图像加载中" border="5" width="50" height="50" vspace="10" hspace="10" />
</body>
</html>

②效果展示：

在这里插入图片描述

3、列表标签

①代码块如下：

<!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>列表标签</title>
</head>
<body>
     <!--无序标签-->
     <p>四大传说</p>
     <ul type="circle">
         <li>梁山伯与祝英台</li>
         <li>白蛇传</li>
         <li>孟姜女哭长城</li>
         <li>牛郎织女</li>
     </ul>
     <p>四大名楼：</p>
     <ul type="square">
         <li>岳阳楼</li>
         <li>鹳雀楼</li>
         <li>黄鹤楼</li>
         <li>滕王阁</li>
     </ul>
     <!--有序标签-->
     <p>四大美女：</p>
     <ol type="a" start="2">
         <li>杨玉环</li>
         <li>西施</li>
         <li>王昭君</li>
         <li>貂蝉</li>
     </ol> 
<hr/>
     <ul>
         <li>北京市</li>
         <ol>
             <li>海淀区</li>
             <li>朝阳区</li>
             <li>大兴区</li>
         </ol>
         <li>陕西省</li>
         <ul>
             <li>西安市</li>
             <li>咸阳市</li>
             <li>榆林市</li>
         </ul>
     </ul>
 <hr/>
 <!--项目标签-->
 <dl>
     <dt>公司管理</dt>
     <dd>财务管理</dd>
     <dd>采购管理</dd>
     <dd>考勤管理</dd>
 </dl>    
</body>
</html>