HTML
它不是编程语言，是标记语言（Markup Language）使用标签等标记来描述一些事物的一种语言。
md（markdown）一种文件格式，程序员必会 它支持一些标记语法，甚至支持HTML
一般来讲编程语言都拥有选择和循环结构
1. 了解HTML的概念
HTML的概念
HTML：[超文本标记语言](Hyper Text Markup Language)，[标准通用标记语言]下的一个应用。HTML 不是一种[编程语言]，而是一种标记语言 (markup language)，是网页制作所必备的
**超文本：**超越了文本、不仅仅是文本。除了文本之外还包含了图片、连接，甚至音乐、程序等非文字元素。
XML：（eXtensive Markup Language）可扩展的标记语言。
**XML和HTML的区别：**我们的XML它是可以随意在文件中定义自己的标记，但是HTML它的标记都是官方定制的语法，无法自定义。XML的宗旨是用来传输数据，HTML是用来在网页中描述信息。
扩展名为.htm和.html
HTML的发展史
1993年正式发布！
-
W3C和WHATWG
W3C（万维网联盟） 国际性的中立的技术标准组织，它维护了很多技术的标准，HTML、XML、XHTMTL、CSS、JavaScript…等都是由它维护标准的。
WHATWG（网页超文本应用技术工作小组）主流的浏览器公司：欧朋、Mozilla、苹果、微软…
WHATWG成立的原因是W3C意图放弃HTML，而力图发展XML（可扩展标记记语言下的一个子集）技术。WHATWG邮件列表公布于2004-6-4 , 在Opera宣布加入后的2天 便否决了由[万维网联盟]W3C成员在W3C工作室的Web标准。
2007-7-10 , Mozilla Foundation, Apple, Opera Software 建议 W3C跟随WHATWG’的HTML5，将新的[HTML]（标准通用标记语言下的一个应用）命名为"HTML5".2007-4-7, 新的HTML工作组采纳了他们的建议。
2019年6月的一份新闻稿中，W3C 和 WHATWG 宣布，他们终于把他们的分歧放在一边，并签署了一份新的[谅解备忘录]
根据这份新协议，W3C 正式发布未来的 HTML 和 DOM 标准，并支持 WHATWG，将控制权完全交还给浏览器厂商。
取而代之，W3C 及其数百名成员将起草未来的 Web 标准需要包含什么特性的“建议”。然后，WHATWG 将决定把哪些加入到他们的产品中。当前由 WHATWG 维护的 HTML Living Standard 将成为 HTML 标准的官方版本。DOM Living Standard 也是如此。
2. 掌握HTML的基本结构
HTML是一个弱语法的标记语言。它不像XML和Java等那么严格！
<!-- Document Type 声明 声明格式和HTML标准版本 -->
<!DOCTYPE html>
<!-- 根标签 固定的结构组成 -->
<html>
<!-- 头标签：一般在头标签中编写大量的网页配置信息 -->
<head></head>
<!-- 体标签：一般情况下网页中显示的超文本内容都是在其中定义的 -->
<body>
Hello HTML!
</body>
</html>
Web前端开发常用IDE：Sublime Text3、HBuilder X、HBuilder、WebStorm、VSCode、DreamWeaver…
3. 掌握HTML的常用标签
head中的常用配置标签
<!--
元标签：它的不同属性可以配置网页的信息
charset：字符集/字符编码
SEO使用：
Keywords：关键字列表
Description：网站描述
-->
<meta charset="UTF-8"/>
<meta name="Keywords" content="第一个程序,呵呵,不错的哦"/>
<meta name="Description" content="这是我们开发的第一个HTML程序。"/>
<!-- 可以通过link标签设置网页图标 -->
<link href="//ask.dcloud.net.cn/static/css/classblack/img/favicon.png?v=20141207" rel="shortcut icon" type="image/x-icon">
<!-- 网页标题 -->
<title>首页</title>
常用的超文本标签
- 标题标签
<!-- h1~h6 标题一(最大的)...标题六(最小的) -->
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
段落或换行标签
<!-- 在HTML中 对于空格和换行只会解析为一个空格！ 表示空格 -->
<!-- HBuilder快捷键：移动：Ctrl+上下键 -->
<!-- p：段落 -->
<p>
锄禾日当午，汗滴禾下土。
<!-- br换行标签 -->
<br/>
谁知盘中餐，粒粒皆辛苦。
</p>
<p>
生当作人杰，死亦为鬼雄。<br/>
至今思项羽，不肯过江东。
</p>
水平线和加粗、倾斜
<!--
em/i：倾斜
strong/b：死壮 加粗
-->
<strong>夏日绝句</strong>·<em>李清照</em>
<!--水平线 HTML标签也都有大量的属性 但是仅仅记忆几个即可 因为它们并不是我们常用的 -->
<hr width="200px" align="left"/>
<p>
生当作人杰，死亦为鬼雄。<br/>
至今思项羽，不肯过江东。
</p>
图片标签
<!-- 图片标签
src：图片路径(绝对路径/相对路径)
width：图片宽度 单位：px、em...
height：图片高度
alt：设置当图片加载失败时显示出替代的文字(不常用)
title：每一个标签都有 用来在鼠标悬浮其上 提示
-->
<img src="img/不爱学习，就滚出.png" alt="我是一只食铁兽" width="200px" height="200px" title="这是一个爱学习的熊猫"/>
超链接标签
超链接、超文本连接。
分类
页面间链接：最常用，链接地址为某个网页
<!-- 超链接标签
href：链接到的地址
target(目标)：目标以什么方式打开
_blank 在新的空白窗口打开
_self 默认的 表示将链接文档在当前打开
-->
<a href="index1.html" target="_blank" title="点我跳啊">点我跳转</a>
<!-- 图片超链接 -->
<a href="index1.html">
<img src="../../05-图片标签/img/不爱学习，就滚出去.png"/>
</a>
锚链接：在同一个文档/网页中，进行不同位置的链接跳转。目录就是锚链接，百度百科右侧的侧边栏。
<!--
锚链接：
同一个页面：
1.在要跳转到的位置添加id属性 设置值
2.在超链接href属性中添加#要跳转到的位置id值
不同页面的锚链接：只不过是多加一个要跳转的页面地址而已
-->
<a href="#hehe">购物流程</a>
<h2 id="hehe">购物流程</h2>
---
<a href="help.html#register">新用户注册帮助</a>
功能性链接：通过链接可以打开电子邮箱、QQ、拨号盘等…
<a href="mailto:charles7c@126.com">点我联系管理员</a>
视频和音频标签
<!-- 视频标签
src：视频地址
controls：视频控件 controls="controls" H5中对于属性名和属性值相同 或值为boolean值则可以只写属性名
autoplay 自动播放
loop：循环播放
-->
<video src="【建筑动画】毕业设计--自然之力与建筑语言.mp4" loop autoplay controls></video>
<!-- 音频标签 -->
<audio src="" autoplay controls loop></audio>
语义化标签
网页设计时常用
<！-- 上中下结构 还有例如：121结构 131结构 封面结构... -->
<div>
网页头部区域 - 放导航
<div class="header">
导航
<div class="nav-bar"></div>
个人中心信息
<div></div>
</div>
网页中间内容 - 主体内容
<div class="content-body">
侧边栏
<div></div>
</div>
网页尾部内容 - 版权 相关链接等
<div class="footer"></div>
</div>
其实语义化标签和div作用一致。
头
<header>
<nav></nav>
</header>
<section>
<article></article>
<aside></aside>
</section>
<footer>
</footer>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
