前言
如今html的属性大部分不在使用，主要通过css样式来改变，使用Html仅做语义使用。
标签公共属性：id 、class、style、title。
本文未加属性值，如不理解，请点击Html官方文档
如有不足，欢迎指出。
按单双标签分类：
单标签：
<!DOCTYPE>
<br>、<hr>
<img>、<input>
<param>为object，applet标签提供参数
<area>定义图像映射区域，父标签为map
<meta charset="" content="" http-equiv="" name="" scheme="">元信息
<base href="" target="_blank/_parent/_self/_top/framename">规定页面所有链接，父标签为head
<link type="" rel="" href="">链接
除此之外就是双标签了。
按显示模式分类：
- 行内块
图片：<img src="" alt="" width="" height="" hspace="" vspace="" ismap="" usemap="">
<map name="" id="">上面定义usemap时使用，定义客户端图像映射
<area shape="" coords="" href="" alt="">定义图像映射区域
</map>
浮动框架：<iframe name="" src="" width="" height="" scrolling="" marginwidth="" marginheight="" frameborder=""></iframe>
输入框：<input name="" type="text" maxlength="" size="" value="" readonly>
<input name="" type="password" maxlength="" size="">
<input name="" type="checkbox" value="" checked>
<input name="" type="radio" value="" checked>
<input name="" type="image" src="" width="" height="">
<input name="" type="submit" value="" 后面非必写：formmethod="" formnovalidate="" formaction="" formenctype="">
<input name="" type="reset" value="">
<input name="" type="button" value="" onclick="">
<input name="" type="file">
<input name="" type="hidden" value="">
以下为h5新增
<input name="" type="range" value="" min="" max="" step="">
<input name="" type="email" autofocus>
<input name="" type="url" required placeholder="">
<input name="" type="tel" pattern="">
<input name="" type="color" >
<input name="" type="date">
<input name="" type="datetime-local">
<input name="" type="number">
<label for="">点击文本会聚焦到框</label>父为form标签
(与<input type="text" list="">，一起使用，id与list互相对应)
<datalist id="">输入框绑定待选项
<option value=""></option>
</datalist>
<progress value="" max=""> 进度条（是<form>的子元素）
- 行内
<abbr>缩写</abbr>
<acronym>首字母</acronym>
<b>加粗</b><strong></strong>
<i>倾斜</i><em></em>
<bdo>覆盖默认文本方向</bdo>
<big>变大字号</big><small>变小字号</small>
<br>
<cite>引用</cite>、<q>短引用</q>
<code>计算机代码</code>、<samp>定义范例计算机代码</samp>
<dfn>定义字段</dfn>
<kbd>定义键盘文本</kbd>
<lable>表格</lable>
<span></span>
<sub>下标</sub>、<sup>上标</sup>、<del>删除线</del>、<u>下划线</u>
<tt>定义打字机代码</tt>
<var>定义变量</var>
<a href="" target="">超链接</a>
<textarea name="" rows="" cols="" wrap="">多行文本框</textarea>
<select name="" size="" multiple>下拉框列表
<optgroup lable="" disabled>分组
<option value="" selected>内容</option>
</optgroup>
</select>
- 块级和其他
表单： <form action="" name="" method="">
(子标签有 input输入框、lable文字与框绑定聚焦 select下拉列表 textarea多行文本框 fieldset分组)
<fieldset>在一个form中对多个标签进行分组
<legend>组标题</legend>
</fieldset>
</form>
菜单列表<menu></menu>
目录列表<dir></dir>
无序列表<ul type=""><li></li></ul>
有序列表<ol type=""><li></li></ol>
定义列表<dl>
<dt></dt>
<dd></dd>
</dl>
表格：<table border="" width="" height="" align="" bgcolor="" background="" rules="" cellspacing="" cellpadding="" frame="" >
<caption align="">表格标题</caption>
<tr align="" vlign="" bgcolor="">
<th align="" vlign="" bgcolor="" colspan="" rowspan="" width="" height=""></th>
<td align="" vlign="" bgcolor="" colspan="" rowspan="" width="" height=""></td>
</tr>
</table>
<html></html>
<div>块</div>
<h1>标题</h1>~<h6></h6>
<section>文档中的章节</section>
<pre>预格式化</pre>
<blockquote>段落缩进</blockquote>
<font face="" size="" color="">字体</font>
<p align="">段落</p>
<hr width="" size="" color="" align="">
<style type="">样式</style>
<script type="" src="">脚本</script>
<video src="" width="" height="" autoplay loop controls muted poster="" preload="">视频</video>
<audio src="" width="" height="" autoplay loop controls muted preload="">音频</audio>
<marquee behavior="" direction="" width="" height="" bgcolor="" hspace="" vspace="" scrollamount="" scrolldelay="" loop="" onMouseOver="this.stop()" onMouseOut="this.start()">滚动字幕</marquee>
h5新增：
<header>头部</header>、<footer>底部</footer>
<nav>导航</nav>
<article>文档</article>、<section>文档中的章节</section>
<aside>定义旁边内容</aside>
<address>作者信息</address>
<figure>独立内容</figure>
<figcaption>figure的标题</figcaption>
<details open>折叠</details>、<summary>折叠内容的标题</summary>
块级元素和行内元素
- 块级元素: div p body(默认样式) html h1-h6 section
- 行内元素：span a em b i strong u sub sup cite strike
块级元素特点：
1.独占一行
2.宽度默认是100%
3.高度默认由内容撑起
4.可以通过css属性设置宽高行内元素特点:
1.与其他行内元素共享一行
2.高度默认由内容撑起
3.通过css属性设置宽高不生效
4.设置上下外边距不生效 左右外边距生效
Html简介
- 前端发展史
- web1.0时代
1990 第一个web浏览器诞生 html诞生
1991年 www诞生 标志前端技术开始
1994年 网景公司推出了JavaScript js ES5
1995年 IE浏览器发布
1997年 EMCScript标准诞生 包括核心js BOM DOM
- web2.0时代
1999年 第四代html标准发布
2006年 jquery框架 js–>dom进行封装 提升开发效率 操作更加简便 2009年 angularJS nodejs出现 npm包管理工具诞生
cnpm pnpm yarn
2011年 React框架诞生 Facebook公司发布
2014年 Vue框架诞生 尤雨溪
- web3.0时代
2016-至今 三大前端主流框架成为三足鼎立 基本都是库 插件得发布 版本迭代 公司主流框架版本Vue2.x Vue3.x
2021年后 数据可视化 3d建模 虚拟世界
- HTML的历史版本发展
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0：1995年11月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
③HTML 3.2：1997年1月14日，W3C推荐标准。
④HTML 4.0：1997年12月18日，W3C推荐标准。
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
⑥HTML 5：2014年10月，HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet
Explorer 8及以前的版本不支持。
- HTML特点
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网 （WWW）盛行的原因之一，其主要特点如下：
1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类 元素的方式，为系统扩展带来保证。
3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用 在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文 本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏 览器。
HTML是HyperText Markup Language(超文本标记语言)
它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名（扩展名）
CSS (Cascading Style Sheets) 层叠样式表
是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户
主体结构
打开VSCode，新建后缀名为.html的文件，输入"!"或"html:5"生成基本的html5结构
<!-- 文档头信息 -->
<!-- html5标准网页声明 -->
<!-- 不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。 -->
<!-- h5的文档声明，声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边。
如果不写文档声明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写文档声明
-->
<!DOCTYPE html>
<!-- 属性lang是单词language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文 -->
<!--
html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中
-->
<!-- 只有两个子标签 head:浏览器设置 body：可视区展示 -->
<html lang="en">
<!-- head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的 -->
<head>
<!--
meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/
-->
<!--
字符编码，浏览器会根据字符编码进行解析
常见的字符编码有：gb2312、gbk、unicode、utf-8。
-->
<meta charset="UTF-8">
<!--
viewport 设备的屏幕
width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览， 那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器选项卡上的名字 -->
<title>Hello HTML</title>
</head>
<!--
body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写
-->
<body>
<!-- 在body里的内容都是显示在浏览器的视图区的 -->
<!--
在这个结构中，可以来编写HTML的注释注释中的内容，不会在页面中显示，但是可以在源码中查看我们可以通 过编写注释来对代码进行描述，从而帮助其他的开发人员工作,一定要养成良好的编写注释的习惯，但是注释一 定要简单明了
-->
</body>
</html>
HTML文档（ HTML document）
DOCTYPE
在Html非常年轻的时候（1991、2年左右），doctype是用来作为一组规则的链接，HTML页面必须遵循这些规则才能被认为是好的HTML，这些规则会用来检测网页是不是存在问题。然而，这些年没有人真正的关心doctype，他们只是一个历史产物必须包含在页面中。
严格的文档类型:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
宽松的文档类型:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
H5文档类型（ HTML document）说明该文档为Html5文档:
<!DOCTYPE html>
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 |   |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | &euro | € |
| § | 小节 | § | § |
| ’ | 撇号 | &apos (IE不支持) | ' |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | &trade | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
5408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
