文章目录

1. 定义2. 发展史及优势2.1 发展史2.2 优势3. W3C标准4. HTML的基本结构5. 网站的基本标签5.1 标题标签5.2 段落标签5.3 水平线标签5.4 换行标签5.5 字体样式标签5.6 特殊符号标签6. 图片标签7. 超链接8. 锚链接9. 块元素和行内元素

1. 定义

HTML 是用来描述网页的一种语言。指的是超文本标记语言(Hyper Text Markup Language)文本：文字、有格式的文本超文本：文字，图片，音频，视频，动画、定位…标记语言 ： <>HTML 标签是由尖括号<>包围的关键词HTML 标签通常是成对出现的标签对中的第一个标签是开始标签，第二个标签是结束标签

2. 发展史及优势

2.1 发展史

HTML 1993年HTML2.0 1995年HTML3.2 1996年 （W3C推荐标椎）HTML4.0HTML4.01 （微小改进）XHTML1.0 2000年XHTML2.0 由于改动过大，学习成本高了，胎死腹中！HTML5 （最新版） 正式纳入新成立的HTML工作团队！ HTML 5.1 草案~

2.2 优势

所有知名浏览器厂商都支持 ：微软、谷歌、苹果、Opera、Mozilla firefox。很多杂的浏览器，并不支持 HTML5市场的需求跨平台(浏览器)

3. W3C标准

W3C： 万维网联盟

– 万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。

– /

.com 国际的 .cn 中国 .org开源的W3C标准

– 结构化标准 （XHTML、HTML）

– 表现标准 （CSS）

– 行为标准 （Dom、ECMAScript标准==> JavaScript）

–很多浏览器还停留在ES5规范上，但是开发人都使用的是ES6规范案例：在网页上打印一首诗

– 案例代码

– 运行结果常见的前端开发工具

– 记事本

– Notepad++

– Sublime

– VScode（前端专业）

– WebStorm（前端专业）IDEA

– HBuilder （专业）

……

4. HTML的基本结构

所有的HTML 标签 都以 <> 开始 </> 结尾正常网页的所有内容都需要放在 < body> 标签中DOCTYPE文档类型，默认声明：表示告诉浏览器这个网页使用什么规范，我们默认使用的是HTMLTitle 标签，就是网站的小标题名称meta 描述信息SEO：网站搜索建议规范编码，统一使用UTF-8（全世界）gb2312：包含了所有的中文字符

5. 网站的基本标签

5.1 标题标签

h1~h6+tab键

5.2 段落标签

p+tab键

5.3 水平线标签

hr+tab键

5.4 换行标签

br+tab键

5.5 字体样式标签

斜体：em+tab键、粗体：strong+tab键

5.6 特殊符号标签

空格： 大于：> 小于：< 版权符号：©

6. 图片标签

常见的图片格式： .png .jpg .jpeg .bmp .gif …png 会有浏览器兼容问题，一般使用 .jpg .gif多一点图片：静态资源 单独放 statics\images相对路径，绝对路径相对路径 …/…/

绝对路径 https://150.109.117.44:443/usr/themes/PureLoveForTypecho/images/banner2.jpgsrc： 资源图片 ：图片的路径

alt： 图片加载失败，表示图片的问题，也即图片描述

title： 鼠标放在图片上的悬浮提示

width： 宽

height：高

– 案例代码

– 运行结果

7. 超链接

超链接：表示从一个地方跳转到另外一个地方href：要跳转地址

target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开

_self : 在自己的窗口打开

_blank： 在新窗口中打开和图片嵌套使用

– 案例代码

– 运行结果

8. 锚链接

用于页面间指定位置跳转 ： 快速定位目录可以在同一页页面中跳转也可以在不同页面中跳转

– 案例一：在同一页页面中跳转

– 运行结果

– 案例二：在不同页页面中跳转

– 运行结果

9. 块元素和行内元素

块元素：无论内容多少，都独占一行（p，h1~h6）行内元素：只根据内容的长度来扩展（a，strong，em….）案例代码

运行结果