前端开发~H5 ·学习笔记 ·001——【HTML介绍、常用HTML标签】

最新推荐文章于 2021-09-30 11:47:36 发布

God-Excious

最新推荐文章于 2021-09-30 11:47:36 发布

阅读量259

点赞数

分类专栏： # 前端开发开发学习文章标签： html html5

本文链接：https://blog.csdn.net/qq_44220418/article/details/105083810

版权

开发学习同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

前端开发

8 篇文章 0 订阅

订阅专栏

一、HTML介绍

1、介绍

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

2、HTML标签

(1).介绍

形如下面这样的就是HTML标签。

<div>XXX</div>

由一个开始标签开始，以对应的结束标签结束。

当然也有些标签只有开始标签，比如<br>、<img>、input等。

(2).嵌套

HTML标签可以进行嵌套，如下面这样：

<div>
	<span>Look!</span>
</div>

(3).属性

标签可以没有属性、或者拥有若干个属性。

这些属性

以键值对的形式呈现出来，形如key="value"
写在开始标签内，以空格分隔

<div class="nav" id="user">

3、HTML文档结构

(1).完整结构

一个完整的HTML文档，一般结构如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	
</body>
</html>

Tips：很多IDE，可以用过输入英文感叹号按下回车，生成上述结构

(2).<!DOCTYPE html>标签

告知浏览器该页面文件的文档类型，指示web浏览器使用哪个HTML版本编写页面。

Tips：必须放在文件第一行。

(3).<html>标签

告知浏览器自身是一个HTML文档，限定文档的开始点和结束点

(4).<head>标签

定义文档的头部，通常在这里引用样式表，其中的<title>标签存放文档的标题。

(5).<body>标签

定义文档的主题内容。

4、HTML注释

用下面这样的标签来进行注释

<!-- 这是注释 -->

<!-- 多行注释
     多行注释
     多行注释 -->

5、HTML标签分类

简单的划分，一般可以分为块状标签和内联标签。

两者的最大区别在于，块级标签会为自己的内容占据新的一行，内联标签不会。

二、常用HTML标签整理

1、总体整理

(1).文本标签

标签	功能	属性	块状/内联	是否有闭合标签
`<h1>`至`<h6>`	标题（`h1`最大，`h6`最小）		块状	有
`<p>`	段落		块状	有
`<span>`	普通文本		内联	有
`<strong>`	加粗强调		内联	有
`<img>`	图片	`src`	内联	无
`<a>`	超链接	`href`、`title`、`target`、	内联	有
`<ul>`	无序列表		块状	有
`<ol>`	有序列表		块状	有
`<li>`	列表元素		块状	有
`<label>`	标签	`for`	内联	有

(2).表单标签

标签	功能	属性	块状/内联	是否有闭合标签
`<form>`	表单	`action`、`method`	块状	有
`<input>`	单行文本输入框	`type`、`placeholder`、`name`、`value`、`readonly`、`disabled`	内联	无
`<textarea>`	多行文本输入框	`placeholder`、`name`、`cols`、`rows`	内联	有
`<select>`	选项菜单	`name`、`multiple`	内联	有
`<option>`	选项	`value`	块状	有
`<button>`	按钮	`type`	内联	有

2、整体示例

(1).文本标签

Html文档

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<h1>一级标题</h1>
	<p>
		一段文字，这段文字描述了ABCDEFGHIJKLMN
		一段文字，这段文字描述了ABCDEFGHIJKLMN
		一段文字，这段文字描述了ABCDEFGHIJKLMN
		一段文字，这段文字描述了ABCDEFGHIJKLMN
		一段文字，这段文字描述了ABCDEFGHIJKLMN
		一段文字，这段文字描述了ABCDEFGHIJKLMN
		一段文字，这段文字描述了ABCDEFGHIJKLMN
		<span>突如其来的span标签内容</span>
		<strong>突如其来的strong标签内容</strong>
	</p>
	<img src="https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1" alt="">
	<a href="https://www.csdn.net/" target="_blank">新窗口打开CSDN首页</a>
	<ul>
		<li>无序列表元素</li>
		<li>无序列表元素</li>
		<li>无序列表元素</li>
		<li>无序列表元素</li>
	</ul>
	<ol>
		<li>有序列表元素</li>
		<li>有序列表元素</li>
		<li>有序列表元素</li>
		<li>有序列表元素</li>
	</ol>
	<labe>label元素一般用在表单里，用for属性给表单元素绑定id哦</labe>
	
</body>
</html>

效果图示
效果-1

(2).表单标签

Html文档

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<form>
		<input type="text" name="nickname1" />
		<br>
		
		<input type="text" placeholder="昵称" name="nickname2" />
		<br>
		
		<input type="text" placeholder="昵称" name="nickname3" value="小明" />
		<br>
		
		<input type="text" placeholder="昵称" name="nickname4" value="小明(不可修改)" readonly />
		<br>
		
		<input type="text" placeholder="昵称" name="nickname4" value="小明(不可修改)" disabled />
		<br>
		
		<input type="password" placeholder="密码" name="psw" />
		<br>
		
		<textarea rows="5" cols="40" placeholder="输入你想输入的一段话"></textarea>
		<br>
		
		<select>
			<option value ="v1">v1</option>
			<option value ="v2">v2</option>
			<option value ="v3">v3</option>
		</select>
		<br>
		
		<select multiple>
			<option value="s1">s1</option>
			<option value="s2">s2</option>
			<option value="s3">s3</option>
		</select>
		<br>
		
		<button type="button">样式按钮</button>
		<button type="submit">提交按钮</button>
	</form>
</body>
</html>

效果图示
效果图-2

God-Excious

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发~H5 ·学习笔记 ·001——【HTML介绍、常用HTML标签】

文章目录一、HTML介绍1、介绍2、HTML标签(1).介绍(2).嵌套(3).属性3、HTML文档结构(1).完整结构(2).<!DOCTYPE html>标签(3).<html>标签(4).<head>标签(5).<body>标签4、HTML注释5、HTML标签分类二、常用HTML标签整理1、总体整理(1).文本标签(2).表单标签一、HTML...
复制链接

扫一扫