/本文末尾有用于展示标签效果的html代码，可以自行复制到vscode里（不知道的自行百度查教程安装下载），建议一遍对照代码一遍对照网页效果来看/
用土话土讲来描述html：
标签：
你看到的html里用<>包裹的东西就是标签。标签定义了你如何组织你的内容，比如p标签，则你写在里面的内容会在浏览器以段落形式呈现，比如title标签，你写的就会变成标题（一般的标签都要闭合
<title>BIAOTI</title>
但是有的标签不用，比如用于换行的br标签 br）
<p> 这是你写的段落 </p>
属性：
标签拥有各种属性，这些属性有许多用处，比如用class、id、name等等属性来有效组织你的文档，方便你用css来美化页面，在你用js写脚本时候也离不开这些属性，具体用法看看w3c 教程就能明白。
比如 这里就定义了一个type为radio的input输入框标签，type属性=radio决定了这个input输入框是一个单选框；如果type=“password” 那么你的输入框就会把输入的密码隐藏，等等。
DOM：
DOM 文档对象模型，html的各个标签就是由DOM 树来组织的，当你在浏览器中按F12 ，点击element，可以看到一个html文档是以树形结构组织的:
这种组织方式为REACT 、Vue等框架提供了接口，当你用React 写了一个组件，可以直接在指定位置接入到这个DOM树上。这里可稍微提一下虚拟DOM树，一般来讲，每次DOM树如果有变化的话，浏览器都要重新渲染页面（渲染就是把html文档呈现成你看到的网页的样子），但是有了虚拟DOM树之后，只需要用算法对比DOM树的前后变化，只用在变化的地方重新渲染即可，而不用整个页面重新渲染。这部分内容目前稍作了解即可，也可跳过。
HTML常用标签（尾部有示例代码可以查看效果）
/以下是我个人的学习笔记，比较凌乱，最好移步w3cschool。/
a 标签常放链接 <>
br 换行
h1 - h6表示标题
p表示段落
button
hr水平线
div 、 span 是html区块 。html分块级元素（div）和内联元素（span），内联元素不会换行。
li表示列表
img 放图片，可加尺寸属性，width height，alt属性用于显示图片无法加载时显示的文字
属性总是以键值对的形式： name = shenkuo
属性常有class 、 id、 style、 title
注释
可以用#id 来指定链接
head里可以加base标签，来指定链接的默认地址
head里可以加link来链接外部资源，一般连接到css
head里可以加style 指定css样式
meta里除了指定编码还可以指定搜索引擎关键字： meta name = “keywords” content = “我的关键字”
script 用于加载js文件 noscript 在无法加载script时候显示此标签内容
script 可以用document.write(‘
this is what u add
’) 来添加新标签
script function … document.getElementbyid(‘ROOT’).InnoHTML(’'changed content")
表格 table标签包裹 tr （行） td（列）th（表头）caption 设置标题
跨行或者跨列要在属性里使用rowspan或者 colspan
表格间距在table属性里设置cellpadding =10
有序列表用ol 包裹li ，无序列表用ul包裹li
表单使用form标签，里面放置input标签；属性有action、method
form可以action =“mailto : [email protected]” method = “post” enctype=“text/plain” 发送邮件
input 标签可以设置type = password 、 radio （单选框）、 checkbox（复选框）、submit 提交
提交的value属性设置label显示的字
select 包裹option 来选框
iframe 标签规定了内联框架，可以嵌入另一个文档，通过使用框架可以在同一个浏览器窗口中显示不止一个页面。
src="demo_iframe.htm" width="100" height="10">
html字符实体用于替换预留的字符,要使用& 或者&# ，用分号;结尾
html总是会截断空格，如果想保留就要使用空白字符实体 #nbsp;
&#target_number
< (less than) >（greater than） × ÷  
html5 使用音频建议mp3 ，视频建议mp4格式
html 可以使用插件<object width\ height data = “index.html\ gif\png”>
也可以用embed ，embed没有闭合标签，不能使用替代文本
多媒体标签：embed、object、audio、video、source
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8" ><!--这里定义了编码，使得网页可以显示中文，编码相关请自行百度-->
<!--style标签，定义了 h1 标签的背景色，div标签的颜色，li标签的背景色， 具体css语法请自行百度或查看后续文章-->
<style type="text/css">
h1 {background-color:yellow}
div {color:rgb(161, 235, 194)}
li {background-color:rgb(71, 118, 248);
color:rgb(48, 43, 41)}
</style>
</head><!---head标签内容完毕-->
<body>
<h1>我的第一个标题</h1>
<h2>副标题</h2>
<p>我的段落：段落写了10<20</p><!--有些字符比如小于号会和标签冲突，因此要用<来表示，这个叫字符实体，具体看w3c-->
<script>
function myFunction(){alert('fuck!!!')
document.getElementById('root').innerHTML="changed content"}
</script>
<!---以上是script标签，会执行当中的JavaScript代码，学习JavaScript之后可以看懂其中内容-->>
<p id="root"> 这是个id为root的段落，下面有个按钮，点击按钮可以使这里内容变化</p>
<button type="button" onclick="myFunction()">点击这个会有弹窗，并使id为root的标签内容改变，具体学习JavaScript后会了解</button>
<br>
<a href="www.baidu.com" target="_blank" rel="external nofollow" >这个a标签里的链接指向百度</a>
<br><!----换行符-->>
<img src="127.0.0.1" width="120" height="80"><!---这里链接一张图片-->
<br>
<table cellpadding="10"><!---border定义表格边距，cellpadding定义内边距-->
<caption>my table</caption><!--caption表示标题-->
<tr><!--tr定义行-->
<th>name</th><!--th定义首行-->>
<th>age</th>
<th>sex</th>
<th colspan="2">big colo</th><!--colspan 或者rowspan合并表格-->
</tr>
<tr>
<td>shenkuo</td><!--td表示列-->
<td>21</td>
<td>male</td>
</tr>
</table>
<ul><!--ul包裹li ，定义无序列表-->
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol><!--ol包裹li，定义有序列表-->
<li>有序列表</li>
<li>有序列表</li>
</ol>
<form action="xxx.php" method="GET"><!--form标签定义表单，input 表示用户填写的内容，下面submit 可以提交表单内容给服务器-->
name <input type="text"><br>
password <input type="password"><br>
<input type="radio" value="1">BOY
<input type="radio" value = "0">GIRl
<br>
<input type="submit" method = "GET" value="点击提交表单">
</form>
<!--select标签提供选框-->>
<select name="time " id="TIME"><option value="a">a</option>
<option value="b">b</option></select>
<script>document.write("<p>This is a paragraph</p>")
</script>
</body>
</html>
效果图
