预计用时两天
教程：菜鸟教程
工具：vscode（配上自动补齐，live-server等插件体验舒适！）
正在学习中……-
笔记：
(仅涉及15/1/2020学习的关于html前期内容，关于css的只有学css后才会)
<!DOCTYPE html>（一个html文件的开头，强调文件类别属性）
<html>（html的开始标签，属于双标签，必须闭合）
<head>（head标签头文件，里面集中放置该文件的显示属性）
<meta charset="utf-8">（meta元素功能很丰富，见meta常见用法
此时charset规定显示内容为utf-8格式，即可识别中文等，）
（此行尖括号里面内容为!--哈哈--，该<!>标签用于注释，markdown写法也有这个,所以显示不出来）
<title>html学习</title>(title标签，双标签，显示打开的网页在标签页上显示的内容，据可靠消息，在head里里面加上link标签配置可以加上标签页logo)
<base href="www.baidu.com" target="_blank">（base标签，单标签，设定整个html文件的基本属性，此时后面的文件可直接链接该href指定的地址，target确定整个html文件打开链接的方式）
</head>（html闭合，属性规划完毕）
<body>（body标签，双标签，显示网页上的内容，注释除外）
<header><big>HTML学习</big></header>（header标签，与head标签区别，前者是显示网页首行题目，相当于word的页眉；big标签，双标签，放大包含内容）
<a id="page">（设置id属性，与我在文末写的“<a href="#page">返回首段</a>”相对应，即在这里插个眼，点击文末写的对应链接可以传送到此处）
<a href="baidu.com">ghs</a></a>>（a标签可用于设置链接，格式：<a href="网址">链接代替显示文本</a>）
<h1>我的第</h1>(h标签，即head，双标签，标题，共有6级目录，不建议用来加粗和放大字体)
（呃，没想到markdown也可以识别，hr/标签属于单标签，即生成水平线）
<h1>这是1号标题</h1>
<p> 我的第一落。
<font size="7"> 这是7号字体文本</font></p>（p标签即段落，双标签，front标签，双标签，用于调整字体大小，共7级【有人说六级，但亲测七级】，从1到7逐渐变大，大于7时默认为7，小于1时默认为1负数也满足）
<front size="6">hicsdjio</front><p><b>你好</b>（b标签，用于加粗，即bold）
（br单标签，换行）
<i>菜鸟</i>（斜体）
<strong>晚上好</strong>（加粗，类似b，旨在强调文字突出性）
<em>不是吗</em>（斜体，类似i，旨在强调文字突出性）
<small>普天之下，</small>（缩小字体固定比例）
<big>莫非王土。</big>（放大字体固定比例）
C60（sub双标签，将包含内容视为下标，即显示碳六十的化学符号。文本显示不出来，因为markdown也适用……）
伊利TM（sup双标签，将包含内容是为商标，即显示伊利商标，同上，markdown也适用……）
<del>emmm</del>（del双标签，即划删除线，用markdown写法即为emmm）
<ins>奥里给</ins>
（ins添加下滑线）
<abbr title="Tecent TiMi Mahua">TTM</abbr>（显示包含内容，将鼠标移到TTM处，显示缩写的原单词，即title里面的内容）
<blockquote cite="www.xiaoming.com/index.html">（块引用，下面杨绛先生为围城题的话会单独成段）
城外的人想进去，城里的人想出来。——杨绛
</blockquote>
<cite>《三体》</cite>是大刘写的杰作（词引用，类似斜体字显示包含内容）
揭开小明的真面目：<img src="xiaoming.gif" alt="xiaoming" width="21" height="15">（img单标签，设置图片显示，src设置图片位置路径url，alt作备胎，万一加载错误或其它无法显示图片的情况下，显示规定的文字，width显示宽，height显示高，以上四个元素为常见可选元素，若width和height只选其一，则按等比例变化显示图片）
后续追加（1/18/2020 10.00）：
- img还有align属性，但以废除。
- img可以用css的float属性。
- img还支持area属性，形成一图多个链接。
<a href="www.xiaoming.com">点击小明的图片：<img src="xiaoming.gif" alt="xiaoming" width="15" height="21"></a>（以图片作链接替代物，没错，万恶的网页诱惑图不小心点到就进入不可描述的网站就是因为这个【猜的】）
<q>星星也会做梦。</q>（段引用，常用于话的引用，会自动加引号）
<address>（双标签包含内容斜体显示，注明作者信息）
Written by <a href="xiaomin@qq.com">小明</a>
Hello,
world!
</address>
<bdo dir="rtl">你是年少的欢喜</bdo>
（bdo改变字体显示的顺序，dir制订规则，rtl即right to left ，即从右到左显示，故显示为 喜欢的是少年的你）
<bdo dir="ltr">林深时见鹿， 海蓝时见鲸，梦醒时见你.</bdo>（bdo常规显示）
<a href="www.xiaoming.com">小明</a>
<a href="www.xiaoming.com"target="_blank">小明</a>（target元素用来设置打开链接网页的方式，有四种属性，见target的四种属性
）
<a href="www.baidu.com"target="_self">点击这里！</a>（实验即知）
<a href="www.baidu.com"target="_blank">点击这里！</a>
<a href="www.baidu.com"targrt="_parent">点击这里！</a>
<a href="www.baidu.com"target="_top">点击这里！</a>
"小明"（语句符合markdown，被吃了，故用中文字符代替，；必须要。即& quot；内容& quot，对内容加引号）
<a href="mailto:xiaoming@qq.com">给小明发邮件</a>（便捷发邮件，会直接打开邮箱客户端，并自动填写规定内容，写法即将href的链接内容改为带有mailto的内容，此为基本用法）
<a href="mailto:xiaoming@qq.com？cc=xiaohong@qq.com;xiaobai@qq.com&bcc=xiaoli@qq.com;xiaoduo@qq.com&subject=Hello%20my%20dear%20friend&body=我欠别人1000元，可以微信/支付宝转给我吗？">发邮件</a>（进阶用法，群发，用法：mailto：收件人1邮箱;收件人2邮箱;收件人3邮箱(类推)+？+第一个参数(参数类型有cc【抄送，收件人知道所有非密送对象】bcc【密钞，收件人不知其他收件人】subject【邮件标题】body【邮件具体内容】)+&第二个参数(类型仍为那四个)，总之，第一个参数用？引出，后面用&引出，对subject和body的内容，空格必须用%20表现，即空格编码为%20）
（该行注释又被吃了，内容为计算机输入废弃标签。可以用，但没用，除了pre标签之外其它都是变一下字体罢了，当然可以避免浏览器乱解析）
<dfn>木大木大</dfn>（显示代码内容）
<pre>小明中了500万
天啊！
真的吗？
骗鬼！ <a href="baidu.com">ghs</a>
</pre>（显示预览内容，即包含内容不会作处理，比如空格无论多少个都会只显示一个，但链接等依然有效，最好用来显示文本，若不用pre，则显示：天啊！ 真的吗？ 骗鬼！ghs 【不会分段】）
<h1>bnjklk</h1>
<code>计算机代码</code>
<kbd>使用键盘输入</kbd>
<tt>打字机文本</tt>
<var>计算机变量</var>
<a href="#page">返回首段</a>（对应文本首页 <a id="page">，点击返回首段即立刻返回）
</body>
</html>
终于写完了今天下午加晚上差不多4个多小时的学习内容总结，背着编写的源网页反思进步还算可以，毕竟html很简单，明天会跳过html css学后面，把css学完了再来学这节，归纳一下：
- html的部分语法适合markdown
- 对元素与标签区分不够清晰
- 语法很多，易混
- 很多语法的进阶应用都还不会，比如meta
- 用英文单词记忆语法是个不错的idea！
- 站着写代码好像还感觉不错？
- 边学边写很重要
- 不懂要搜
- 对于语法，了解一下即可，不用深究，用多了就记住了。
-
效果预览：
1
2
OK，今天圆满收工，刚好16/1/2020零点。
