文章目录
一、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).表单标签2、整体示例(1).文本标签(2).表单标签一、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).文本标签
(2).表单标签
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="/cdn/content-toolbar/csdn-logo_.png?v=0924.1" alt=""><a href="/" 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>
效果图示
(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>
效果图示