HTML
超文本标记语言 Hyper Text Markup Language
- PS: “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素
语言特点:
- 简单性
- 可扩展性
- 跨平台性
- 通用性
主要作用:
- 负责页面的架构布局
文件后缀:
- .html
- .htm
HTML是一门标记语言,是一门非编程语言,不具备编程语言的程序逻辑。它的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
HTML由标签、指令与转义字符等组成
- 标签:被尖括号(<>)包裹,以字母开头,以字母,数字,减号(-)组成,可以被浏览器解析的标记。(PS:标签分为系统标签和自定义标签)
- 指令:被尖括号(<>)包裹,以感叹号(!)开头的标记。(栗子: < !DOCTYPE html> )
- 转义字符:被&与;包裹的特殊字母组合或者#开头的十六进制数字(栗子:& lt;,<;)点我查看所有转义字符
- PS:所有字符请使用英文字符
HTML发展史:你点我我就告诉你HTML的发展历史
第一个页面
HTML由标签、指令与转义字符等组成(重点强调)
- 标签:被尖括号(<>)包裹,以字母开头,以字母,数字,减号(-)组成,可以被浏览器解析的标记。(PS:标签分为系统标签和自定义标签)
- 指令:被尖括号(<>)包裹,以感叹号(!)开头的标记。(栗子: < !DOCTYPE html> )
- 转义字符:被&与;包裹的特殊字母组合或者#开头的十六进制数字(栗子:& lt;,<;)
笔记代码:
<!-- 注释 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 is <dsb>
</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>