这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端应该关注哪些方面
前端的边界
开发环境
什么是 html
HTML 是用来描述网页的一种语言。
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
-
HTML 不是一种编程语言，而是一种标记语言 (markup language)
-
标记语言是一套标记标签 (markup tag)
-
HTML 使用标记标签来描述网页
html标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
-
HTML 标签是由尖括号包围的关键词，比如
-
HTML 标签通常是成对出现的，比如 和
-
标签对中的第一个标签是开始标签，第二个标签是结束标签
-
开始和结束标签也被称为开放标签和闭合标签
常用的标签
<!doctype html> //告诉浏览器使用的是html的哪个版本 浏览器根据其版本进行渲染
<head></head>
<p></p>
<h1><h1> ~<h6></h6>
<div></div>
<img src=''/>
<ul>//无序列表
<li></li>
<li></li>
</ul>
<ol>//有序列表
<li></li>
<li></li>
</ol>
<dl>//定义列表
<dt></dt>
<dd></dd>
</dl>
浏览器会把 html 文件 渲染成一颗 DOM树
链接
### 链接
<a href='https://www.juejin.com/' target="_blank">掘金 </a>
<!-- target："_blank" 表示会在新窗口打开文档 -->
多媒体标签
<img src='' alt='myphoto'>
<!-- alt 表示如果用户开启了省流量模式 ，这时图片就加载不出来 以文字模式（降级）传达图片所表达-->
<audio src='' controls></audio>
<!-- 音频-->
<video src='' control></video>
表单标签
<input type='text'>
<input type='password'>
<input type='range'>
<input type='data' min="2018-02-10">
<input type='number' min=1 max=10>
<label><input type='radio' name='ball'>🏀</label>
<label><input type='radio' name='ball'>⚽</label>
<label><input type='checkbox' ></label>
//下拉选择
<select>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
html语义化
< article > 元素
article 元素定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。
section元素定义文档中的节。
元素
header元素为文档或节规定页眉。 通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。 一个文档中可以有多个 < header> 元素。 ###
元素< footer > 元素为文档或节规定页脚。
< footer > 元素应该提供有关其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 < footer > 元素。 ###
元素< aside > 元素页面主内容之外的某些内容（比如侧栏）。
aside 内容应该与周围内容相关
语义化的好处:
- 代码的可读性
- 可维护性
- 搜索引擎优化’
- 提升·无障碍性
