这是我参与第五届青训营伴学笔记创作活动的第一天！

一、本堂课重点内容

HTML传递的是内容，不是样式！
HTML 的主要工作之一就是给予文本意义（也被叫做语义），以让浏览器知道如何正确的显示文本。
HTML基本语法学习

二、详细知识点介绍

1、什么是前端？

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端小程序
- VR/AR等
Web技术栈

故，前端工程师就是使用web技术栈解决多端图形用户交互问题的工程师

2、前端技术栈

HTML（页面结构内容）
CSS（页面样式）
JavaScript(页面行为）

3、前端应该关注哪些方面？

功能
美观
无障碍
安全
性能
兼容性

4、前端的边界

Node.js：
- 由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境
- 使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台
- 让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言
Electron：
- 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序
- 它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用.
React Native（简称RN）：
- 是Facebook开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。
- RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用
WebRTC (Web Real-Time Communications)：
- 是一项网页视频语音实时通讯技术
- 它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接，实现视频流和（或）音频流或者其他任意数据的传输。
WebGL（全写Web Graphics Library）：
- 是一种3D绘图协议
- 这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起
- Web开发人员可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化
WebAssembly（简称wasm）：
- 面向Web的二进制格式

5、HTML是什么？

HyperText Markup Language
HyperText（超文本）:图片、标题、链接、表格
Markup Language(标记语言)：标签
doctype---标记当前在使用的HTML文件的版本，浏览器根据它决定使用什么样的渲染模式
解析成DOM树

6、HTML语法

- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input,meta
- 属性值推荐使用双引号包裹
- 某些属性值可以省略，比如 required,readonly
元数据：meta元素

<meta charset="utf-8">

标记文本

标题

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>
<h5>...</h5>
<h6>...</h6>

段落

<p>这是一个段落</p>

换行 <br/>
水平线 <hr/>
特殊符号

&nbsp; 空格
&gt; 大于
&lt; 小于
&quot; 引号
&copy; 版权号@

列表

有序列表
无序列表
自定义列表

<h2>有序列表</h2>
<ol>
    <li>苹果</li>
    <li>橙子</li>
    <li>李子</li>
</ol>

<h2>无序列表</h2>
<ul>
    <li>苹果</li>
    <li>橙子</li>
    <li>李子</li>
</ul>

<h2>自定义列表</h2>
<dl>
    <dt>水果</dt>
    <dd>橙子</dd>
    <dd>李子</dd>
</dl>

图像

img(行级标签)

<img src=" " alt=" " title=" "/>

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
  alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
  width="400"
  height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

title当光标放在图片上时显示内容

替换文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示

HTML5 的 <figure>和 <figcaption>元素为图片提供一个语义容器，在标题和图片之间建立清晰的关联

链接

<a href="path" target="目标窗口位置">M</a>

表单元素

<from>

* from表单会采集包含的有效数据，提交到后端，进行交互
* action属性aaaa为后端地址，这里用aaaa代替
* method属性值有post和get
    * post提交数据不可见，安全，提交数据长度没有限制，效率低
    * get提交数据可见，不安全，提交数据长度有限制，效率高
* label标签为input元素定义标注,自动将焦点转移到与该标注相关的表单元素上
* enctype属性规定在发送到服务器之前应如何对表单数据进行编码

 <form action="aaaa" method="post" enctype="multipart/form-data">
        <p><label for="user">用户名：</label>
           <input type="text" name="username" placeholder="请输入6-12位字母和数字组合的用户名" id="user" />
        </p>
 </form>

fieldset

* 可以将表单内相关元素分组，会在相关表单元素周围绘制边框
* legend写组的名字

<fieldset>
            <legend>登录</legend>
            <p><label for="user">用户名：</label>
            <input type="text" name="username" size="10" maxlength="4" value="zhangsan" /></p>

            <p>密&emsp;码：<input type="password" name="pass" size = "10" maxlength="6" id="user" /></p>
        </fieldset>

单选按钮

* 名字name相同表明属于同一组

<p>
性&emsp;别：<input type="radio" name="gen" value="male" /><img src="image/m.jpg" >男
            <input type="radio" name="gen" value="female" /><img src="image/f.jpg" >女
</p>

复选框

<p>
爱&emsp;好：<input type="checkbox" name="hobby" value="study" />学习
           <input type="checkbox" name="hobby" value="sport" />运动
           <input type="checkbox" name="hobby" value="game" checked="" />游戏
</p>

文件域

<p>头&emsp;像：<input type="file" name="file"></p>

列表框

<select name="bmon" size="1">
                         <option value="0">选择月份</option>
                         <option value="1" selected="">1月</option>
                         <option value="2">2月</option>
                         <option value="3">3月</option>
                         <option value="4">4月</option>
                         <option value="5">5月</option>
                         <option value="6">6月</option>
                         <option value="7">7月</option>
                         <option value="8">8月</option>
                         <option value="9">9月</option>
                         <option value="10">10月</option>
                         <option value="11">11月</option>
                         <option value="12">12月</option>
                     </select>月

多行文本框

<textarea name="txt" cols="40" rows="6"> ...  </textarea>

按钮

<input type="submit" name="sub" value="注册" disabled="" />&emsp;
<input type="reset" name="reset" value="重填"/>
<input type="image" src="image/login.gif" name="img" value="登录"/>
<input type="button" name="but" value="普通按钮" onclick="alert(this.value)"/>

隐藏域

<input type="hidden" name="hidden" value="zhangsan" />

其他

        <p>
            邮&emsp;箱：<input type="email" name="email" required="" />
        </p>
        <p>
            url:<input type="url" name="url" autofocus="s"/>
        </p>
        <p>
            数字：<input type="number" name="num" min="0" max="100" step="10" />
        </p>
        <p>
            滑块：<input type="range" name="num" min="0" max="10" step="2" />
        </p>
        <p>
            搜索：<input type="search" name="s"/>
        </p>
        <p>
            时间：<input type="time" name="t" />
        </p>
        <p>
            日期：<input type="date" name="d" />
        </p>
        <p>
            周：<input type="week" name="w" />
        </p>
        <p>
            月：<input type="month" name="m" />
        </p>
        <p>
            电话：<input type="tel" name="tel" pattern="^1[358]/d{9}" />
        </p>
        
        <p><input type="text" name="txt" list="cars"/></p>
        <datalist id="cars">
            <option value="bmw"></option>
            <option value="ford"></option>
            <option value="vovol"></option>
            <option value="byd"></option>
        </datalist>

只读和禁用

* readonly：希望某个框内的内容只允许用户看，不能修改

* disabled：因没达到使用的条件，限制用户使用

表格
- cellpadding 单元格内容与单元格边框之间的距离
- cellspacing 各单元格之间的距离
- 跨列colspan
- 跨行rowspan
- 表格标题 <caption></caption> 表头 <th></th> 页眉 <thead></thead> 数据主题 <tbody></tbody> 页脚 <tfoot></tfoot>
- align="center" 居中对齐

<form action="" method="post" >
        <table border="0">
            <tr>
                <td><img src="images/title.png" alt="title"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td>会员名：</td>
                <td><input type="text" name="name" ></td>
            </tr>
            <tr>
                <td></td>
                <td>密&emsp;码：</td>
                <td><input type="password" name="pass"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td><input type="image" src="images/login.gif" name="login"></td>
            </tr>
        </table>
</from>

视频

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

autoplay 这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。

loop 这个属性可以让音频或者视频文件循环播放。

muted 这个属性会导致媒体播放时，默认关闭声音。

poster 这个属性指向了一个图像的 URL，这个图像会在视频播放前显示。

preload 这个属性被用来缓冲较大的文件，有 3 个值可选：

-   `"none"` ：不缓冲
-   `"auto"` ：页面加载后缓存媒体文件
-   `"metadata"` ：仅缓冲文件的元数据

音频

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

iframe标签

<iframe src="https://developer.mozilla.org/zh-CN/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/zh-CN/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

allowfullscreen 如果设置，iframe则可以通过全屏 API设置为全屏模式（稍微超出本文的范围）。

frameborder 如果设置为 1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为

src 该属性与 video元素，表示文档中的图像img一样包含指向要嵌入文档的 URL 路径。

width和 height 这些属性指定你想要的 iframe 的宽度和高度。

sandbox 该属性需要在已经支持其它 iframe功能（例如 IE 10 及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置

引用
- 短引用 --- q ---（浏览器）包围引号
- 长引用 ---blockquote ---缩进处理
- 缩略词 ---abbr
- 联系信息 ---address ---斜体，添加折行
- 著作标题 ---cite ---斜体
- 双向重写 ---bdo
- 上标和下标 ---<sup> 和<sub>
嵌套元素
- 可以把元素放到其它元素之中——这被称作嵌套
```
<p>My cat is <strong>very</strong> grumpy.</p>
```
块级元素和内联元素
- 块级元素在页面中以块的形式展现
  - 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。
  - 块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。
  - 一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
- 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间，例如超链接元素 <a> 或者强调元素：<em> 和 <strong>
属性
- herf 声明超链接地址
- title 为超链接声明额外信息
- target 指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。
无语义化标签
- <span>是一个内联的（inline）无语义元素
- <div>是一个块级无语义元素

7、内容划分

<main>存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body>中。最好不要把它嵌套进其它元素。
<article> 包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。
<aside>包含一些间接信息（术语条目、作者简介、相关链接，等等）。
<header>是简介形式的内容。如果它是 body 的子元素，那么就是网站的全局页眉。如果它是 article或section 的子元素，那么它是这些部分特有的页眉（此 header非彼标题）。
<nav>包含页面主导航功能。其中不应包含二级链接等内容。
<footer>包含了页面的页脚部分。

8、语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
- 有序列表用ol,无序列表用ul
- lang属性表示内容所使用的的语言

9、谁在使用我们写的HTML？

开发者---修改、维护页面
浏览器---展示页面
搜索引擎---提取关键词、排序
屏幕阅读器---给盲人读页面内容

10、语义化好处

代码可读性
可维护性
搜索引擎化
提升无障碍性

11、如何做到语义化？

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

12、文件路径的一些一般规则：

要链接到与调用 HTML 文件位于同一目录中的目标文件，只需使用文件名，例如 .my-image.jpg
要引用子目录中的文件，请在路径前面写下目录名称，加上正斜杠，例如 .subdirectory/my-image.jpg
要链接到调用 HTML 文件上方目录中的目标文件，请写入两个点。因此，例如，如果位于的子文件夹中并且位于内部，则可以使用引用。index.html``test-site``my-image.jpg``test-site``my-image.jpg``index.html``../my-image.jpg
您可以根据需要组合它们，例如。../subdirectory/another-subdirectory/my-image.jpg

引用参考

HTML 简介 - 学习 Web 开发 | MDN (mozilla.org)

前端与HTML | 青训营笔记