这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端要解决的问题：
使用web技术栈解决多端图形用户界面交互
前端主要技术栈：
html+css+js
html：
负责页面结构与内容，HyperText Markup Language，超文本标记语言。是用来帮助我们构建网页的
css:
设置页面样式，位置大小，颜色
js:
定义网页行为，响应用户
前端需要关注：
美观，功能，兼容，性能，安全，体验，无障碍
前端的边界：
**nodejs:**开发服务器端的应用
**react,electon:**开发客户端的应用
**WebRTC:**开发3D多人联机游戏
html语法：
1.标签和属性不区分大小写，一般建议小写
2.空标签可以不闭合，比如input,meta
3.属性值推荐用双引号包裹
4.某些属性值可以省略,required
html常用标签：
HTML的标签一般包含以下两种:
(1) 带有标签体的标签< p>标签体< /p >
(2) 不带标签体的标签(自结束标签)< br/>,< hr/>
**!DOCTYPE html **:声明版本来选择渲染的模式
html标签:根标签
Head标签：其中可以对网页进行整体设置
Body标签：是HTML的正文标签,我们在网页上能看到的内容都写在该标签中
图片标签：<img src="" alt="">
src:属性名
“ ”：里面为属性值
alt:当图片失效时显示介绍图片内容
超链接：<a href=""></a>
练习代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片标签学习</title>
</head>
<body>
<!-- alt:文件名
若图片加载不出来则显示文件名
src：图像地址，一般包括相对地址和绝对地址，但我们一般选择相对地址
-->
<img src="resource/image/2.jpg"alt="书桌"title="看啥呢！"width="900px"height=800px>
<a href="lianjie.html#down">跳转</a>
</body>
</html>
标题h1~h6:
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
有序列表：
<ol>
<li>java</li>
<li>c++</li>
<li>c</li>
</ol>
**无序列表 **：
<ul>
<li>java</li>
<li>c++</li>
<li>c</li>
</ul>
等
html语义化：
==开发者应该遵循语义来编写html代码==
HTML语义化就是可以不通过了解HTML的内容，就可以知道这个部分所代表的的意义。
HTML语义化的优点：1.代码可读性。2.可维护性。3.搜索引擎优化。4.提升无障碍性
lang属性：表示内容所使用的语言
常见语义化标签：
<title>：定义文档的标题（注：只能在head标签内出现）。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<ol>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
