前端与HTML

这是我参与「第四届青训营」笔记创作活动的的第1天

一、什么是前端？

前端主要用于解决 GUI 人机交互的问题

面向的设备：PC/移动浏览器、客户端/小程序、VR/AR等不同的方向
前端工程师是：利用web技术栈解决多端界面下图形界面交互的工程师

前端技术栈：前端 + 网络协议 + 服务器端

前端包括：内容（html） -> 样式（css） -> 行为（JavaScript）三者通过网络协议与服务器进行通信
网络协议：http协议、socket协议等

前端需要关注的问题

功能、美观、无障碍（是否对于所有人-包括色盲症人、盲人等都适用）、安全（是否存在可被利用的漏洞、是否能够保证用户的信息数据不被泄露等）、性能（是否流畅、速度是否足够快、用户体验感是否良好）、兼容性（产品是否能在各大设备上正常使用）、体验（关注用户）

前端的边界

node.js——开发服务器端的相关应用
ELECTRON——客户端开发
React Native——客户端开发
Web RTC——P2P在现传输实现多人会议等
WebGL——3D游戏开发
WebASSEMBLY——将C++等其他语言代码编写为能够直接在浏览器中运行的代码

前端的技术发展很快，需要不断的学习进步！

开发工具

编辑器：VSCode Vim WebStorm
浏览器：IE/Edge Chrome Firefox Safari

二、HTML

HyperText（超文本：图片标题链接表格） Markup Language（标记语言由成队标签标记的语言）

<img src = "photo.jpg" />

src = 属性名 “*” = 属性值

<!doctype html>
<!--标识该 html 属于哪一版本，浏览器由此决定使用哪一种渲染格式-->
<html>
<!--html 根标签-->
    <head>
    <!--页面元数据 不直接呈现给用户（用户不可见）-->
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
    <!--呈现给用户的 用户可见内容-->
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

DOM树：

HTML语法

标签和属性不区分大小写， 推荐小写
空标签可以不闭合如 input meta img等
属性值用 双引号 包裹
某些属性值可以省略如required、readonly等（只需要属性不需要写明属性值）

标题

<h1>一级标题</h>

<h2>二级标题</h>

以此类推，标题字号逐级减小

列表

<ol>有序列表</ol>

<ul>无序列表</ul>

<dl>无序列表</dl>

<h2>世界电影排行榜</h2>
<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
</ol>

<h2>今日待办事项</h2> 
<ul>
    <li>买菜</li>
    <li>收拾房间</li>
    <li>回邮件</li>
    <li>看书</li>
</ul>

<h2>霸王别姬</h2>
<dl>
<!--定义列表-->
    <dt>导演：</dt>
    <dd>陈凯歌</dd>
    <dt>主演：</dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>巩俐</dd>
    
    <!--dt 与 dd 是多对多的关系-->
</dl>

链接

<a href = "https://www.bytedance.com/" target = "_blank">字节跳动关方网站</a>

href --> 超链接

target = "_blank" --> 打开一个新网页而不覆盖原网页

图片

<img src = "https://*****" alt = "这里是一张图片" width = "400" />

src -- 表示图片的地址

alt -- 表示当图片无法正常显示时具有替换性的文字描述

width -- 图片展示宽度

多媒体

<audio src = "/assets/music.ogg" controls ></audio>

<video src = "/assets/video.mp4" controls ></video>

src -- 视音频的url

controls -- 表示该音频默认显示浏览器的默认播放控件

输入

<input > <textarea></textarea>

<input placeholder = "请输入用户名">
<!--placeholder --- 占位符-->

<input typr = "range">
<!--range --- 滑动块 滑动以选择一个值-->

<input type = "number" min = "1" max = "10">
<!--number --- 输入值 且指定最大与最小值-->

<input type = "date" min = "2018-01-21">
<!--date --- 日期选择-->

<textarea>Hey!</textarea>
<!--textarea --- 长文本输入框-->

多个选择中

<p>
<!--使用 <input type = "checkbox" /> 多个选择中，用户可选择多个选项-->
    <lable><input type = "checkbox" />🍎</lable>
    <lable><input typy = "checkbox" checked />🍉</lable>
</p>

<p>
<!--使用 <input type = "radio" /> 多个选择中，用户只能选择一个。其中的互斥关系通过 name 属性做到，当 name 相同时，在 name 相同的几个选项中选择一个-->
    <lable><input type = "radio" name = sport" />⚽</lable>
    <lable><input type = "radio" name = "sport" />🏀</lable>
</p>

<p>
<!--使用 <select></select> 做下拉选择-->
    <select>
        <option>🍌</option>
        <option>🥑</option>
        <option>🍑</option>
    </select>
</p>

<p>
<!--由 <input list = "contries" /> 做提示选项 本身并不限制输入 只作为快捷提示-->
    <input list = "contries" />
    <datalist id = "contries" >
        <option>Greece</option>
        <option>United Kingdom</option>
        <option>United States</option>
    </datalist>
</p>

引用

<!--块级引用-->
<!--cite 属性表示 所引用的一段文字的来源-->
<blockquote cite = "https://t.cn/RfjKO0F">
    <p>巴啦啦啦啦啦！</p>
</blockquote>

<!--短引用-->
<!-- <cite></cite> -- 表示作品的名字或者章节-->
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<!--<q></q> -- 表示具体引用的内容-->
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>
<!--<code></code> <pre></pre> -- 表示代码引用-->
<p><code>const</code>声明创建一个只读常量。</p>
<pre><code>
const add = (a,b) => a + b;
const multiply = (a,b) => a * b;
</code></pre>

强调

<strong></strong> 强调的是所选内容的重要性

<em></em> 强调的是音的重读

内容划分

html传达的是内容，而不是样式（样式交给css来完成）！！！

语义化

HTML中的元素、属性及属性值都拥有某种含义
开发者应遵循语义来编写HTML 比如：ul代表无序列表、ol代表有序列表、lang代表内容所使用的语言等等

好处： 代码具有可读性、可维护性、可用于搜索引擎优化、提升无障碍性

如何做到：

了解每个标签和属性的含义

MDN文档

思考什么标签最适合描述这个内容
不使用可视化工具生成代码

HTML的使用者

开发者——修改、维护页面
浏览器——展示页面
搜索引擎——提取关键字、排序
屏幕阅读器——针对特殊人群如盲人给盲人读页面内容