HTML学习笔记 | 青训营
这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
题外话| 前端部分
前端应该关注：
- 功能: 满足用户需求
- 美观: 漂亮的UI以及交互过程
- 无障碍: 对所有人都可用,或者是当正常人处于较差环境下可用
- 安全: 用户数据安全，不存在可利用漏洞
- 性能: 响应速度快，用户体验好
- 兼容性: 能够在各种设备上正常使用
前端触及的领域
- 服务器端：node.js
使用node.js能够开发服务器端的应用，也就是说，能够使用node.js搭建后端的应用，不依赖于spring等的技术框架。
- 客户端: ELECTRON 或者 React Nactive
- 多人会议: WebRTC
- 3D游戏: WebGL
- 编译其他语言: WebASSEMBLY
开发环境
一般使用Chrome或者Edge为浏览器。编辑器可以自由选择。
推荐使用VSCode，VSCode有大量的插件市场能够利用。是前端开发的利器。当然，若相信差生工具多，那么也可以不使用VSCode，使用WebStorm或者其他编辑器。
回归正题| HTML部分
Web页面一般由3部分组成
HTML(结构和内容),CSS(样式),JS(行为)，这一部分主要记录HTML的一些内容。
杂记
在HTML代码中，<!doctype html>表示当前HTML版本。不使用会使用旧的HTML版本，可能会导致页面UI与期望不符合。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
其中<head>中的<title></title>显示的内容在浏览器的标签页上，不在页面中。
<body>中的内容显示在页面中。最终效果如图:
dom 树
以标签为节点的树
HTML语法
- 标签和属性不区分大小写，推荐使用小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required
HTML标签
标题h系列标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<p>你好，练习时常两年半的……</p>
h1-h6 只有字体大小发生了变化
一般将h系列标签和<p>标签等其他标签一起用。
列表标签
- 有序列表
<ol>order list,<li>list item
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
- 无序列表
<ul>unorder list,<li>list item
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
-
键值
-
<dl>definition list -
<dt>definition title -
<dd>definition description
<dl>
<dt>111</dt>
<dd>122</dd>
<dt>222</dt>
<dd>233</dd>
<dd>234</dd>
<dd>235</dd>
</dl>
列表还能够自由嵌套，如无序列表中的有序列表，有序列表中的无序列表，
当然，有序列表中的有序列表，无序列表中的有序列表也能够完成。
链接
使用<a>标签，其中参数href中指定跳转链接。
可以使用target="_blank"指定为跳转到新标签页
图片、音频、视频
<img src="https://ts1.cn.mm.bing.net/xxxxx" alt="蓝玫瑰" width="300px"/>
<audio src="C:\Users\xxxx\xxx.mp3" controls></audio>
<video src="明日香 One Last Kiss.mp4" controls width="400px"></video>
src存储url或者路径名称。
alt表示图片显示失败时候的名称。一般用图片的名称作为alt存储的名称，
这样当图片失效的时候就能很方便的进行定位。
controls表示默认显示浏览器的播放控件
<img>标签，最好采用WebP网络图片格式。这种格式能减小图片一定大小。
<audio>标签,其中有autoplay属性能够使得播放器自动播放，
loop属性适配为true能够进行循环播放音频，
muted属性为布尔值，当为false时，表示有声音。用于是否静音。
输入
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="1998-01-16">
<textarea>你好，掘金</textarea>
多选框，单选框，下拉选择，提示输入
type="radio"表示为单选框,checkout为多选框
使用<p>就能够纵向显示
<p>
<label><input type="checkbox" />芝麻</label>
<label><input type="checkbox" checked />西瓜</label>
</p>
<p>
<label><input type="radio" name="fruit" />西瓜</label>
<label><input type="radio" name="fruit" />香蕉</label>
</p>
<p>
<select>
<option>芝麻</option>
<option>西瓜</option>
<option>豆腐</option>
</select>
</p>
<input list="fruit" />
<datalist id="fruit">
<option>苹果</option>
<option>香蕉</option>
<option>水蜜桃</option>
</datalist>
快捷引用,引用
<blockquote> blockquote中的cite标注来源于什么地方，是快捷引用。
<cite>引用，标注引用的词或者句子。
<q>标注前面引用过的词或者句子。
<blockquote cite="xxxxxx">
<p>
我是好人，我是好人，我是好人，我是好人，我是好人，我是好人
</p>
</blockquote>
<p>
好好学习，天天向上.--<cite>周树人</cite>
</p>
<p>
好好休息，天天学习! -- <q>鲁迅</q>
</p>
代码
<code>标签将多行代码或者句子，又或是词语标记起来
注意:多行代码要配合<pre>标签使用
被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>
<code>
const { data:res } = await this.$http.get('xxxx')
if(res.meta.status !== 200){
return xxxxx
}
</code>
</pre>
<p>
<code>const { data:res } = await this.$http.get('xxxx')</code>
</p>
<p>
<code>const</code>
</p>
强调标签
<strong>突出重要性或者紧急性
<em>更多是语气词，表示更重要
<p>
我是<strong>好人</strong>
</p>
<p>
我<em>是</em>好人
</p>
内容划分
<header>与head不一样，header表示页头，需要给用户呈现内容
<nav>表示导航栏部分
<main>页面主体部分，一个页面只有一个main
<article>正文部分，如文章
<aside>与内容有一定相关性的信息部分
<footer>页面尾部的标签，版权，备案等信息
HTML语义化
遵循语义编写HTML
- 规范便于维护
- 便于浏览器展示
- 便于SEO优化
- 便于无障碍阅读
怎么做？
- 了解每个标签和属性含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
结尾
本文主要记录一些青训营HTML部分的学习内容。作为后续回顾的时候使用。
HTML还有很多的标签，这些标签中可能还有很多属性，一次性是不可能全部都记下来的。用的多了，熟能生巧，自然就记住了。另外，需要用到的时候还能去查文档，如MDN。
通过查阅文档，有时候能够加快学习或者工作效率。
引用参考：
