HTML5

最新推荐文章于 2025-05-01 23:03:21 发布

susie0815

最新推荐文章于 2025-05-01 23:03:21 发布

阅读量147

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.youkuaiyun.com/susie0815/article/details/118639420

版权

前端专栏收录该内容

2 篇文章

订阅专栏

HTML

零、配置工作
一、最基础的html文档
二、html常用标签

零、配置工作

所用工具：HbuilderX
创建一个新项目：

即可创建一个新的基本html项目。

一、最基础的html文档

新建项目成功后，会生成如下基本框架：
其中，左侧的文件夹依次为存放样式文件、存放图片文件、存放js文件的文件夹；
右侧代码中：

<!DOCTYPE html>  //文件类型为html
<html>
	<head>  //用于说明页面的一些信息，不直接显示在页面上,包含meta charset和title
		<meta charset="utf-8">  //告知浏览器现在使用的编码类型为utf-8
		<title>是谁的小宝贝</title>  //页面标题
	</head>
	<body>  //直接显示在页面上的内容
	</body>
</html>

页面标题就是浏览器上标签页显示的东西（笑）：
在这里插入图片描述

二、html常用标签

1. 标题标签

	<h1>Seeing you carry plants in</h1>

左右两边的尖括号内容即为标题标签，用来展示标题。一共有六个字号可选择，分别从h1到h6字号从大到小依次排列。
在这里插入图片描述

2. 段落标签

	<p>夜晚潮湿</p>
   	<p>地面潮湿</p>
   	<p>空气寂静</p>
   	<p>树林沉默</p>

用来给内容分段。如果没有段落标签，那么打再多的空格或者回车，页面上也不会将文字分隔开。
在这里插入图片描述

3. 图片标签

顾名思义是用来在页面上插入图片的。

	<img src="img/我.jpg" >

此处src属性是用来告知图片的网络地址（引号里的内容）的。网络地址可以是绝对地址，也就是网络上的图片地址；也可以是相对地址，也就是本地图片所在的位置。这里我用的是相对地址，是存放在本项目img文件夹中的图片。
在这里插入图片描述

4. 列表标签

分为无序列表和有序列表。无序列表就是圆点标号，有序列表则有数字标号。

无序列表：

   <ul>
   		<li></li>
   		<li></li>
   		<li></li>
   		<li></li>
   		<li></li>
   		<li>如果我说</li>
   		<li>别点这里</li>
   		<li>
   			<a href="#content1">click</a>
   		</li>
   	</ul>

在这里插入图片描述
有序列表：

	<ol id="content1">
			<li>好吧</li>
			<li>那再</li>
			<li>点这个</li>
			<li>
				<a href="#content2">click</a>
			</li>
	</ol>

在这里插入图片描述

5. 链接标签

就是在页面上建立可以点击的标签，点击之后可以跳转到页面内的某个地方或者跳转到别的页面。4中的click就是这样一个标签。
在这里插入图片描述

看到双标签的开始标签里有个id="#content1"和id="#content2"了吗？那就是页面内跳转的标记。无序列表里那个链接标签指示的content1，对应的就是下面被标记为content1的有序列表。点击第一个click，就会跳转到这个有序列表处。同样的，点击第二个click，也会跳转到被标记为content2的地方。

6. 容器标签

顾名思义就是建立一个容器，可以把所有的文字也好图片也好都圈进一片区域里。
（目前在这个小页面上没什么体现）

	<div>
		<p>夜晚潮湿</p>
		<p>地面潮湿</p>
		<p>空气寂静</p>
		<p>树林沉默</p>	
	</div>

7. 自定义标签

通过css格式设置效果，可以把随便一个标签设置成任意一个效果。
这里就是把h1标签的格式复制了进来，赋给自定义的susie标签，就可以达到和h1标签一样的效果。

<head>
   	<meta charset="utf-8">
   	<title></title>
   	<style type="text/css">
   		susie{
   			display: block;
   			font-size: 2em;
   			margin-block-start: 0.67em;
   			margin-block-end: 0.67em;
   			margin-inline-start: 0px;
   			margin-inline-end: 0px;
   			font-weight: bold;
   		}
   	</style>
</head>
   <body>
   	<h1>helloworld</h1>
   	<susie>helloworld</susie>
   </body>

8.表单标签

建立表单，也就是输入框或提交按钮。用于将输入的信息提交到设置的地址。
这里将输入词条提交到必应搜索。首先看搜索网页：
https://cn.bing.com/search?q=Seeing+you+carry+plants+in
其中，问号前的地址就是搜索时词条要提交到的地址，而问号后等号前的“q”则表示提交值的名称。不同的搜索引擎设置的提交值的名称不尽相同。

我们将要提交到的地址贴进action里，method设置为get。
每个input对应一个框；
type="text"表示输入值类型为文本，name="q"对应的就是上面提到的提交值的名称（用什么搜索引擎，就要和它的提交值名称对应），placeholder=""表示预置文字，也就是输入提示。
type="submit"表示提交，value=""表示操作。

<form id="content2" action="https://cn.bing.com/search" method="get">
	<input type="text" name="q" placeholder="把最顶上那行英文敲进来" id="" value="" />
	<input type="submit" value="芜湖"/>
</form>

在这里插入图片描述

注：

附上做到这里的源代码~


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>是谁的小宝贝</title>
	</head>
	<body>
		<style type="text/css">
			
		</style>
		
		<h1>Seeing you carry plants in</h1>
		
		<div>
		<p>夜晚潮湿</p>
		<p>地面潮湿</p>
		<p>空气寂静</p>
		<p>树林沉默</p>	
		</div>
	
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li>如果我说</li>
			<li>别点这里</li>
			<li>
				<a href="#content1">click</a>
			</li>
		</ul>
	
		<img src="img/我.jpg" >
		
		<ol id="content1">
			<li>好吧</li>
			<li>那再</li>
			<li>点这个</li>
			<li>
				<a href="#content2">click</a>
			</li>
		</ol>
		
		<img src="img/猪.jpg" >
		<ul>
			<li></li>
		</ul>
		
		<form id="content2" action="https://cn.bing.com/search" method="get">
			<input type="text" name="q" placeholder="把最顶上那行英文敲进来" id="" value="" />
			<input type="submit" value="芜湖"/>
		</form>
		
		<ul>
			<li></li>
		</ul>
		
		<img src="img/玫瑰.jpg" >
		
		
	</body>
</html>