前端与HTML ｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第1天第一节课是html基础，虽然比较基础，但

这是我参与「第四届青训营」笔记创作活动的的第1天
第一节课是HTML基础，虽然比较基础简单，但也算学有所获，复习了自己HTML的基础，也扩展了自己对前端的认识。下面是课程详细笔记。

什么是前端

一句话概括，前端就是使用Web技术栈解决多端(pc/移动浏览器、客户端/小程序、VR/AR等)图形界面人机交互问题的工程师。

构成前端的基本技术栈

HTML(内容)
CSS(样式)
JavaScript(行为)
网络协议(TCP/UDP等等)

HTML,CSS,JS三种技术都是运行在浏览器里面的，浏览器通过HTTP协议与服务端进行网络通信,拿到HTML,CSS,JS的代码，通过浏览器对代码进行渲染呈现到用户面前，用户也可通过交互和网络协议把数据提交到服务器端。

前端要关注哪些方面

功能前端需要实现的项目功能
美观页面美观度，组件的美观度
无障碍对残障人士进行页面适配
安全页面安全，防数据泄漏和修改等
性能页面的性能，加载速度，数据处理速度等
兼容性对不同浏览器，不同端的适配
体验用户的整体使用体验

前端的边界

NODE 服务器开发
ELECTRON Reaxt Native 开发客户端
Web RTC 数据传输多人会议
WebGL 3D游戏
WebASSEMBLY 代码转化

前端不仅仅局限于页面，边界不断在更新，发展也越来越远。

HTML是什么

HTML 全称

Hyper Text Markup Language

超文本标记语言

HyperText 超文本如：图片、标题、链接、表格

Markup Language 标记语言：使用成对的开始标签和结束标签来表示超文本，标签种使用属性来给标签添加另外的属性。

HTML 结构

先看一段经典的HTML结构，我们下面对它进行逐步解析。

<! doctype html>
<html>
    <head>
        <meta chartset="utf-8" >
        <title>html的基本页面结构</title>
    </head>
    <body>
        <h1>我是标题</h1>
        <P>我是内容</P>
    </body>
</html>

doctype

doctype 告诉浏览器使用何种标准来解析这个文档

html

文档根标签，其他所有标签都写在html里

head

页面需要，但不需要呈现给用户的信息

比如：

meta charset 使用什么编码解析

title 页面标题

body

需要呈现给用户查看的信息

DOM树

dom就是你写的标签，也可以称为节点。

你会发现，html的标签是有分叉的一层嵌一层，，形成了一个类似于树的结构。这就是DOM树。

HTML 语法 <常见的标签>

标签和属性不区分大小写，推荐小写

标题 h1~h6

<h1>字体排印学</h1>
<h2>历史</h2>
<P>字体的雏形或可追溯到公园两千年前后的.....</P>
<h3>印刷体流源</h3>
<P>中国在唐代就已经出现雕版印刷术...</P>
<h2>应用</h2>
<P>...</P>

标题标签，随着数字越大，代表的级别越小，字体越小。

列表 ol ul li dl dt dd

ol 有序列表

ul 无序列表

dl 类似于键值对对应关系的列表

<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>
<dt>男主角：</dt>
    <dd>张国荣</dd>
<dt>女主角</dt>
    <dd>巩俐</dd>
</dl>

链接 a

超链接跳转到其他网页

href 是跳转的链接 target 是跳转方式

<a href="https://juejin.cn/user/4125810022158231"></a>
<a href="https://juejin.cn/user/4125810022158231" target="_blank"></a>

多媒体图片音频视频

img 图片 src表示链接或路径

audio 音频 controls 表示默认显示播放控件

video 视频

<img src="" alt="图片无法显示">
<audio src=""  controls></audio>
<video src="" controls></video>

输入 input

<input placeholder=" 请输入用户名">  提示语
<input type="range"> 滑动条
<input type="number" min="1" max="10">  输入数字 指定最大最小值
<input type="date" min="2018-02- 10"> 日期选择
<textarea>Hey</ textarea> 文本框

选择 label

checkbox 复选框

radio name 相同互斥单选框

select 下拉框

datalist 提示框

<p>
    <label><input type=" checkbox" />🍎</label> 
    <label><input type=" checkbox" checked />🍇 </label>
</p> 
<p>
    <label><input type=" radio" name="sport" />⚽</label>
    <label><input type=" radio" name="sport" />🏀</label>
</p>
<p>
    <select>
        <option>🥩</option>
        <option>🥑</option>
        <option>🍌</option>
    </select>
</p>

<input list="countries">
<datalist id="countries">
    <option>Greece</option>
    <option>United kingdom</option> 
    <option>United States</option>
</datalist>

文本标签

blockquote 长引用 cite 表示引用链接

cite 标签表示短引用

q 短引用

code 表示代码会用等宽字体展示

strong 和 em 都表示强调但em主要表语气上更多

strong 字体加粗 em 展示斜体

<blockquote cite="http://book.zongheng.com/book/672340.html"> 
    <p>遇事不决，可问春风</p>
</blockquote>
<p>我最喜欢的一本书是<cite>小王子</cite></p>
<p>在<cite>第一章</cite>, 我们讲过<q>字符串是
    不可变量</q>。</p>
<p> <code>const</code> 声明创建一个只读的常量</p>
<pre>
	<code>
		const add = (a,b)=>a+b
		onst multiply = (a,b)=>a*b
	</code>
</pre>
<p>
    在投资之前，<strong>一定要做风险评估</strong>
</p>
<p>Cats<em>are</em> cute animals</p>

语义化标签

header 页头

nav 导航栏

main 页面主体

article 主体模块

aside 次要模块侧栏广告推荐

footer 底栏

<header>
    <nav></nav>
</header>
<main>
    <article></article>
</main>
<aside></aside>
<footer></footer>

语义化

语义化是什么

HTML中的元素、属性及属性值都拥有某些含义，开发者应该遵循语义来编写HTML

比如：有序列表用ol;无序列表用ul，lang属性表示内容所使用的语言。

语义化标签的用途

开发者-修改、维护页面语义化更好的代码维护
浏览器-展示页面语义化更利于页面展示
搜索引擎-提汉关键词、排序利于seo
屏幕阅读器-给盲人读页面内容利于无障碍

传达内容，而不是样式

<p style="font-size:32px">前端工程师</p>
<p>前端工程师</p>

html应注重内容，而不是样式，尽量少用行内样式。

前端与HTML ｜ 青训营笔记