你学会HTML了吗？

HTML

超文本标记语言 Hyper Text Markup Language

PS: “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素

语言特点：

简单性

可扩展性

跨平台性

通用性

主要作用：

负责页面的架构布局

文件后缀：

.html

.htm

HTML是一门标记语言，是一门非编程语言，不具备编程语言的程序逻辑。它的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

HTML由标签、指令与转义字符等组成

标签：被尖括号（<>）包裹，以字母开头，以字母，数字，减号（-）组成，可以被浏览器解析的标记。（PS：标签分为系统标签和自定义标签）
指令：被尖括号（<>）包裹，以感叹号（!）开头的标记。（栗子： < !DOCTYPE html> ）
转义字符：被&与;包裹的特殊字母组合或者#开头的十六进制数字（栗子：& lt；，&#60；）点我查看所有转义字符
PS：所有字符请使用英文字符

HTML发展史：你点我我就告诉你HTML的发展历史

第一个页面

HTML由标签、指令与转义字符等组成（重点强调）

标签：被尖括号（<>）包裹，以字母开头，以字母，数字，减号（-）组成，可以被浏览器解析的标记。（PS：标签分为系统标签和自定义标签）

指令：被尖括号（<>）包裹，以感叹号（!）开头的标记。（栗子： < !DOCTYPE html> ）

转义字符：被&与;包裹的特殊字母组合或者#开头的十六进制数字（栗子：& lt；，&#60；）

笔记代码：

<!-- 注释  command + / -->
<!-- 标签: 由<>包裹, 由字母开头, 可以结合合法字符, 能被浏览器解析的标记 -->
<!-- 为什么使用标签: 标签具有作用域(名称空间, 控制范围), 可以赋予功能 -->
<!-- 一个页面文件就是一个html, 有且仅有一个html根标签, 只有一儿(body)一女(head) -->
<!-- 规定文档类型: html代表该文件采用的是h5语法标准 -->
<!-- 指令: <>内以!开头的 -->
<!DOCTYPE html>
<html style='color: red;'>
	<head>
		<!-- 页面文件头 | 样式表 | 脚本 | 页面描述... | (后勤工作) -->

		<!-- 设置文件编码格式 -->
		<meta charset="utf-8">
		<!-- 页面标签标题(网页标题) -->
		<title>first page</title>
	</head>
	<body style='color: orange'>
		<!-- 页面显示内容都属于body标签 -->
		<!-- 也可以出现样式 | 脚本 -->
		<!-- nbsp代表空白字符   lt(#60)代表小于号   gt(#62)代表大于号 -->
		egon&nbsp;is &lt;dsb&gt; 
	</body>
</html>
<!-- 了解知识点：一个空白字符大约4字符 -->

标准模板：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面标签标题</title>
	</head>
	<body>
	
	</body>
</html>

常用标签及标签的分类

无语义标签

<!-- div(搭建页面架构): 最常用的标签, 没有之一 -->
<div></div>：用来构建页面结构

<!-- span(搭建文本架构: 可以直接包裹文本, 也可以包裹其他文本类(内联类型的)标签): 文本最常用标签 -->
<span></span>： 用来构建文本结构

常用语义标签

<!-- 标题标签 -->
<!-- n取值范围：1~6 -->
<!-- 一般一个页面会出现一次, 作为该页面的总标题出现 -->
<!-- 六级标签比普通文本小 -->
<hn></hn>

<!-- 链接标签 -->
<!-- herf: 标签的全局属性, 超链接, 规定协议 -->
<!-- https比http协议更安全 -->
<a href="https:\\www.baidu.com" target="_blank">前往百度</a>

<!-- 图片标签 -->
<!-- src: 数据源, 可以加载网络| 本地| 动态图片 -->
<!-- alt: 图片加载失败时的文本提示 -->
<!-- title: 鼠标悬浮产生的文本提示(任意标签都具有该全局属性) -->
<img src="" alt="" title="">

<!-- 段落标签 -->		
<p></p>

<!-- 原文本标签（基本不用） -->	
<per></per>

<!-- 换行标签 -->	
<br />

<!-- 分割线标签 -->	
<hr />

文本标签

<i></i> 斜体字
<em></em> 斜体字，表示强调
<b></b> 粗体字
<strong></strong> 粗体字，表示强调(语气更强) 
<del></del> 删除的文本
<ins></ins> 插入的文本
<sub></sub> 下标字
<sup></sup> 上标字
<ruby>
	拼音<rt>pinyin</rt>
</ruby> 中文注音，h5新增

组合标签

<!-- 表单 -->
<!-- 被form包裹的input内容可以提交给后台, 单独使用的input内容只能在前台(js)使用 -->
<form action="">
	<input type="text">
</form>
<input type="text">

<!-- 表格 -->	
<table>
	<tr>
		<th>标题</th>
		<th>标题</th>
	</tr>
	<tr>
		<td>单元格</td>
		<td>单元格</td>
	</tr>
</table>

<!-- span作为文本架构, 删除样式的文本再由具体的文本类标签del嵌套 -->
<span>$1000<del>$2300</del></span>
<span>文本<sup>上角标</sup></span>

其他标签

<section></section> 块
<small></small> 小号字体

PS：段落标签中放的也是文本内容，为什么要把它和文本标签区分开呢？思考一下

标签分类：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>标签的分类</title>
</head>
<body>
	<!-- 系统标签 | 自定义标签: 系统没有的满足标签语法的所有标记 -->
	<cata title='XXX' style='color: red'>cata</cata>

	<!-- 行块标签(display) -->
	<!-- 块: 换行显示 -->
	<p>test</p>
	<p>test2</p>
	<!-- 行: 同行显示 -->
	<span>sss</span>	
	<span>sss</span>	
		
	<!-- 单结构 | 组合结构 -->
	<div>单结构</div>
	<!-- 被form包裹的input内容可以提交给后台, 单独使用的input内容只能在前台(js)使用 -->
	<form action="">
		<input type="text">
	</form>
	<input type="text">

	<!-- 单双标签 -->
	<!-- 双: 收尾分离 -->
	<!-- 主内容: 可以包含文本, 也可以包含子标签(具有作用域) -->
	<div></div>
	<span></span>
	<!-- 单: 首尾连体 -->
	<!-- 主功能: 无须子内容, 标签就可以代表所有的功能语义 -->
	<hr />
	<br />
	<!-- input标签的内容 -->
	<!-- 既不属于行标签也不属于块标签 -->
	<!-- value用来接收用户输入的值 -->
	<input type="text" value="" placeholder="">
</body>
</html>

HTML

第一个页面

常用标签及标签的分类

猜你喜欢