Introduction
HTML 是一种描述网页语言， 指的是超文本标记语言 (Hyper Text Markup Language)。其中，超文本指的是网页上可以包含图片，视频，连接信息。标记也叫做标签，所以标签书写的是<内容>。语言就是一种交流工具，HTML 是用户与浏览器之间交互工具。
简单说，HTML 是由浏览器解析执行的，它不会将 HTML 标签展示出来，而是会解析 HTML 标签，以特定效果展示出来。
Syntax
- HTML 可以直接使用文本编辑器来编写
- HTML 文件它的后缀名是 .htm 或 .html
- 标签它代表当前页面是一个 HTML
- 标签中可以声明 HTML 页面的相关信息
- 标签中它主要是用于显示页面信息
- 标签要有开始，有结束。开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭
。 - 大多数标签它具有属性，属性值要使用引号引起来。
- HTML 本身是不区分大小写的。
HEAD
BODY
Tools
可以使用 JetBrains WebStorm 或者 VS Code 进行开发。
HTML Tags
文件标签
代表当前书写的是一个 HTML 文档
存储的本页面的一些重要的信息，它不会显示标签下有一个子标签
它是用于定义页面的标题的</p><p><body> 书写的内容会显示出来，属性：1. text 用于设置文字颜色；2. bgcolor 用于设置页面的背景色；3. background 用于设置页面的背景图片</p><h3 class="Editable-styled"><strong>排版标签</strong></h3><h3 class="Editable-styled"><strong>HTML 注释</strong></h3><p><!-- 注释不会在浏览器中显示 --></p><h3 class="Editable-styled"><strong><br/> 标签</strong></h3><p>br 标签就是一个换行功能标签</p><h3 class="Editable-styled"><strong><p> 标签</strong></h3><p>在 p 标签中的内容会在开始与结束之间产生一个空白行并且它会自动换行</p><p>常用属性 align 的作用是设置段落中的内容对齐方式，可取值有 left right center</p><h3 class="Editable-styled"><strong><hr> 标签</strong></h3><p>hr 标签会在页面上产生一个水平线</p><p>常用属性：</p><p>align：可取值有 left right center 代表水平线位置</p><p>size：代表水平线高度（厚度）</p><p>width：代表水平线宽度</p><p>color：水平线的颜色</p><h3 class="Editable-styled"><strong>关于 HTML 中标签属性</strong></h3><p>两种方式:</p><ol start="1"><li>直接设置值，默认单位是 px （像素） <HR WIDTH="200"></li><li>可以设置百分比 <HR WIDTH="35%"></li></ol><h3 class="Editable-styled"><strong><div> 标签</strong></h3><p>Div 是一个块标签</p><p>Div 与 CSS 结合，会更好对页面进行排版</p><h3 class="Editable-styled"><strong><span> 标签</strong></h3><p>Span 标签也是一个块标签Div 与 span 区别：Div 会自动换行，我们也叫这样的标签为行级元素Span 标签它不会自动换行，我们也叫它为行内元素</p><h3 class="Editable-styled"><strong>字体标签</strong></h3><h3 class="Editable-styled"><strong><font> 标签</strong></h3><p>Font 标签可以设置字体，字的大小及颜色</p><p>常用属性：</p><p>Face：用于设置字体，例如 宋体 隶书 楷体</p><p>Size：用于设置字的大小</p><p>Color：用于设置字的颜色</p><blockquote class="Editable-styled"><p>我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。每一种颜色的饱和度和透明度都是可以变化的，用 0～255 的数值来表示。如纯红色表示为 (255，0，0)，十六进制表示为 #FF0000。按这种表达方式，理论上我们可以得到 256 * 256 *256=16777216 种颜色。</p></blockquote><ol start="1"><li>使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为 #cc3300 时，也可以使用 #c30 这种简化的方式来表示。</li><li>RGB 颜色表示法：RGB(x,y,z)，x、y、z 是 0 ～ 255 之间的整数。</li><li>在线颜色选择器：http://www.86y.org/code/colorpicker/color.html</li></ol><p class="syl-page-br" style><br></p><h3 class="Editable-styled"><strong>标题标记</strong></h3><p><h1> 最大 <h6> 最小，它们代表的是标题，可以使用 <b> <i> 对文字设置加粗或倾斜</p><p>注意：在 HTML 中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套</p><h3 class="Editable-styled"><strong>清单标记（列表标记）</strong></h3><p>有序清单：</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><!-- 有序列表 I II III-->
<ol type="I" start="3">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<!-- 无序列表 -->
<ul type="square">
<li>Java</li>
<li>Python</li>
<li>C#</li>
</ul></code></pre><h3 class="Editable-styled"><strong>图形标签</strong></h3><p><img> 可以让我们在网页引入一张图片</p><p>常用属性</p><ol start="1"><li>src 代表的图片的路径</li><li>width 图片的宽度</li><li>height 图片的高度</li><li>border 用于设置图片的边框</li><li>alt 如果图片不可以显示时，默认显示的文本信息</li><li>align 图片附件文字的对齐方式，取值有 ：left right middle top bottom</li></ol><h3 class="Editable-styled"><strong>超连接标签</strong></h3><p><a> 标签可以实现跳转到其它页面操作。超链接内容不仅可以是文本，也可以是图片等信息</p><p>常用属性</p><ol start="1"><li>href 代表的要跳转的路径</li><li>name 属性可以在本页面设置一个锚点</li><li>target 这个属性规定在何处打开这个链接文档，可取值：_blank _self _parent _top framename</li></ol><h3 class="Editable-styled"><strong>表格标签</strong></h3><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><!-- 学习表格标签 -->
<table border="2" align="center" width="400px">
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>语文成绩</th>
<th>数学成绩</th>
<td colspan="2" align="center"><b>操作</b></td>
</tr>
<tr align="center">
<td>张三</td>
<td>99</td>
<td>100</td>
<td>修改</td>
<td>删除</td>
</tr>
<tr align="center">
<td>李四</td>
<td>90</td>
<td>66</td>
<td>修改</td>
<td>删除</td>
</tr>
</table></code></pre><h3 class="Editable-styled"><strong>表单标签</strong></h3><p>通过表单可以将要提交的数据提交到指定的位置</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><!-- 表单：用户注册案例 -->
<form name="form1" action="user/login" method="POST">
<table border="1" width="64%" align="center">
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex" >女
</td>
</tr>
<tr>
<td>地址：</td>
<td>
<select name="province">
<option value="0">--请选择省--</option>
<option value="10001">广东</option>
<option value="10002">上海</option>
<option value="10003">山东</option>
</select> 省
<select name="city">
<option>--请选择市--</option>
<option value="1000301">广州市</option>
<option>深圳市</option>
<option>东莞市</option>
</select> 市
</td>
</tr>
<tr>
<td>编程语言：</td>
<td>
<input type="checkbox" name="language" checked="checked">Java
<input type="checkbox" name="language">Python
<input type="checkbox" name="language">Go
</td>
</tr>
<tr>
<td>照片：</td>
<td>
<input type="file" name="image">
</td>
</tr>
<tr>
<td>自我介绍：</td>
<td>
<textarea name="remark" rows="5" cols="100"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
<input type="reset" value="取消">
</td>
</tr>
</table>
</form></code></pre><h3 class="Editable-styled"><strong>框架标签</strong></h3><p>通过框架标签可以定制 HTML 页面布局</p><p>在 HTML 页面上去描述框架信息时，不可以将 <frameset> 写在 <body> 标签中</p><p class="syl-line-pure-english">framesetTest.html</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 框架标签
top.html
top
头部信息
foot.html
footL
底部信息
menu.html
menu
菜单信息
content.html
content
内容显示区
其它标签与特殊字符
标签
标签必须写在
标签之间- 它可以对页面进行描述及热词设置，可以方便搜索引擎查找页面
- 通过 meta 标签设置 http 响应信息
- 通过 meta 标签可以设置页面的编码，
- 通过 meta 标签来设置页面加载后在指定的时间后跳转到指定的页面，
标签
使用 link 标签来导入 CSS
特殊字符
详情查看菜鸟教程：
https://www.runoob.com/charsets/ref-html-ascii.html
?HTML DOM
Introduction
DOM, Document Object Model -- 文档对象模型，是 HTML 和 XML 文档的编程接口，以树结构表达 HTML 文档。
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准。
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
DOM Node
DOM 是被视为节点树的 HTML。
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
HTML DOM 将 HTML 文档视作树结构，这种结构被称为节点树。
节点树中的节点彼此拥有层级关系。常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）。
- 每个节点都有父节点、除了根（它没有父节点）。
- 一个节点可拥有任意数量的子节点。
- 同胞是拥有相同父节点的节点。
DOM 方法 & 属性
HTML DOM 方法是可以在节点（HTML 元素）上执行的动作。
HTML DOM 属性是可以在节点（HTML 元素）设置和修改的值。
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是能够执行的动作（比如添加或修改元素）。属性是能够获取或设置的值（比如节点的名称或内容）。
DOM
DOM 事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。当事件发生时，可以执行 JavaScript，比如发生用户点击一个 HTML 元素的事件。
如需在用户点击某个元素时执行代码，可以把 JavaScript 代码添加到 HTML 事件属性中：onclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
DOM 事件
我是一个标题
想了解更多，欢迎关注我的微信公众号：Renda_Zhang
