这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
一、本堂课重点内容：
1.什么是前端
2.前端的边界
3.HTML页面结构
4.HTML标签
二、详细知识点介绍：
1.什么是前端
使用Web技术栈（HTML、CSS、JavaScript），解决多端（包括PC/移动浏览器、客户端/小程序、VR/AR等）的图形界面（GUI）下的人机交互问题。
2.前端的边界
- 使用Node.js开发服务器端应用。
- 使用Electron、React Native开发客户端应用。
- 使用Web RTC实现p2p在线传输实现多人会议。
- 使用WebGL开发3d游戏。
- 使用WebASSEMBLY把C++等语言编写的代码，编译成可以直接在浏览器运行的代码。
3.HTML页面结构
1.<!doctype html>
标记html版本，用于让浏览器确定渲染模式。
2.<html>
文档根标签。
3.<head>
页面源数据，不需要呈现给用户。
4.<body>
需呈现给用户的内容。
浏览器拿到html之后，解析为DOM树，每个结点为DOM节点。
4.HTML标签
1.标题
h1~h6表示6种字体大小不同的标题元素
示例代码：
<h6>标题6</h6>
<h5>标题5</h5>
<h4>标题4</h4>
<h3>标题3</h3>
<h2>标题2</h2>
<h1>标题1</h1>
运行结果：
2.列表
ol：order list，表示有序列表，会在生成列表项时自动按序生成每一项的编号。
ul：unorder list，表示无序列表，会在每个列表项前添加一符号，默认为实心圆点。
以上两个列表的子项都是li元素，即list item，表示列表项。
dl：definition list，表示定义列表，常用来表示包含属性名和属性值的内容，其列表项为dt（definition term），是每一项的项目名，而每一项后面会带有一个或以上的项目描述dd（definition description）。
示例代码：
<h1>列表</h1>
<!--无序列表-->
<h2>无序列表</h2>
<p>
用项目符号以突显列表中的每一个项目，ul定义一个无序列表，li定义特定的列表项目。
</p>
<h3>无序列表示例：</h3>
<h4>1.普通列表：计算机科学系的专业</h4>
<ul type="cricle">
<!--type=disc|cricle|square-->
<li>计算机科学与技术</li>
<li>电子商务</li>
<li>计算机网络</li>
<li>计算机游戏</li>
</ul>
<h4>2.嵌套列表：计算机科学与技术专业课程</h4>
<ul>
<li>
2003-2004学年
<ul>
<li>
计算机导论
<ul>
<li>实验1：熟悉Windows XP环境和操作</li>
<li>实验2：Word的应用</li>
</ul>
</li>
<li>高级语言程序设计</li>
<li>汇编语言程序设计</li>
</ul>
</li>
</ul>
<br />
<!--有序列表-->
<h2>有序列表</h2>
<p>
有序列表用数字或字母突出项目出现的顺序及所属类别。标签ol用于声明定义一个有序列表，标签li的作用是定义列表中的项目。
</p>
<h3>有序列表示例：</h3>
<h4>1.普通列表：</h4>
<ol type="A">
<li>计算机科学导论</li>
<li>数据结构</li>
<li>操作系统</li>
</ol>
<h4>2.嵌套列表：</h4>
<ol>
<li>
2003-2004学年
<ol type="Ⅰ">
<li>
计算机科学导论
<ol type="1">
<li>实验1：熟悉WindowsXP环境和操作</li>
<li>实验2：Word的应用</li>
</ol>
</li>
<li>高级语言程序设计</li>
<li>汇编语言程序设计</li>
</ol>
</li>
<li>
2004-2005学年
<ol type="Ⅰ">
<li>数据结构</li>
<li>操作系统</li>
<li>数值分析</li>
</ol>
</li>
</ol>
<br />
<!--定义列表-->
<h2>定义列表</h2>
<p>
定义列表分为列表的描述项和解释项两个部分，其实现是通过标签dl、dt和dd组合产生的。标签dl定义一个描述项，而dd标签定义描述项的解释项。
</p>
<h3>定义列表示例：</h3>
<dl>
<dt>word</dt>
<dd>词，单词</dd>
<dd>谈话，言语</dd>
<dd>消息，音信，谣言，传说</dd>
<dd>承诺，诺言，保证</dd>
<dd>命令</dd>
<dd>口令</dd>
<dd>[pl.]口角，争论</dd>
<dd>格局</dd>
<dt>web</dt>
<dd>
<ol>
<li>蜘蛛网；蛛网状物；丝网；【纺】棉【毛】网</li>
<li>织物；（织物的）一匹</li>
<li>捏造的谣言，圈套</li>
<li>
（水鸟，蛙等的）蹼；
【机】连结板；金属薄片【薄条】；
【建】工字梁腹（部）；圆拱；
【解】膜，网状组织
</li>
</ol>
</dd>
</dl>
运行结果：
3.链接
用a标签表示，href值为超链接地址，在a标签内设置文本内容。运行后在网页上的显示为带有下划线的蓝色文本，点击即可跳转到href中的网址。
还有图片（img）、音频（audio）和视频（video）等形式。
示例代码：
<!--a标签结合href定义一个超链接-->
<h2>a标签结合href定义一个超链接</h2>
<p>
形式：<a href=url地址>链接文字描述</a> ，当用户用鼠标单击“链接文字描述”时网页会跳转到url地址指定的位置。
</p>
<h3>超链接示例：</h3>
<a href="https://www.juejin.cn ">掘金</a>
<img src="crown.jpg" alt="皇冠" width="20%" height="50%" />
<img src="point.gif" alt="点" align="bottom" width="400px" height="280px" />
<audio src="" controls></audio>
<video src="" controls></video>
运行结果：
4.输入
用户可以通过这些标签输入不同类型的值，包括文字、范围、数值、日期等。提交的数据由js处理。
示例代码：
<h2>input标签</h2>
<input placeholder="enter">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2020-02-02">
<textarea>Hey</textarea>
<form>
<p>type="radio";</p>
<input type="radio" name="radio1" value="男" />boy
<input type="radio" name="radio1" value="女" checked="checked" />girl
<select id="idList1" name="list1">
列表1
<option value="计算机应用">1-计算机应用</option>
<option value="网络工程">2-网络工程</option>
<option value="计算机游戏" selected>3-计算机游戏</option>
<option value="无线应用技术">4-无线应用技术</option>
<option value="计算机科学与技术">5-计算机科学与技术</option>
</select>
运行结果：
5.文本
- blockquote：长引用，引用一大段内容，cite属性为引用地址。
- cite：短引用，引用一个词，常表示作品名等。
- q：前面说过的话再次引用。
- code代码引用，多行则在code标签外用pre标签包裹。
- strong突出表示某物重要性，需要注意。
- em表示语气严重，要重读该词。
示例代码：
<h2>文本</h2>
引用：
<blockquote cite="https://juejin.cn/editor/drafts/7188531281083236412">
blockquote：长引用，引用一大段内容，cite属性为引用地址。
</blockquote>
<p>看看<cite>小王子</cite></p>
<p>在前面有<q>cite属性为引用地址</q></p>
<pre><code>
<p>看看<cite>小王子</cite></p>
<p>在前面有<q>cite属性为引用地址</q></p>
</code></pre>
<strong>加粗重视</strong>
<em>加粗重读</em>
运行结果：
6.布局
- header：页头。
- nav：logo、导航。
- main：页面重点内容。
- aside：与页面相关但并非重点的内容。
- article：页面正文。
- footer：页尾，常写页面信息。
三、课后个人总结：
页面的可视化交互是用户体验的关键，前端方向还有着广阔的发展空间。 对于html页面布局方面，由于没有比较直观的案例，无法清晰理解，后续进行研究后明白了布局的方式。
