前端与 HTML

0x1 前端

什么是前端
- 解决图形用户界面（GUI）人机交互的问题
- 跨终端
  - PC/移动浏览器
  - 客户端/小程序
  - VR/AR 等
- Web 技术栈
一句话总结前端工程师的工作：使用 Web 技术栈解决多端 GUI 人机交互问题
前端技术栈

在浏览网页时：
1. 在浏览器中，通过 HTML 展示结构和内容，通过 CSS 表现样式，通过 JavaScript 控制行为
2. 在服务器中，渲染 “HCJ” 的代码，使其图形化
3. 通过各种网络协议（HTTP，TCP/IP）等，完成人机交互
由此可见，前端的技术栈主要为 三件套 和 网络协议，其中，三件套为前端的范畴
前端应该关注功能、美观、无障碍、安全、性能、兼容性、用户体验
前端的科技树
- 通过node.js开发服务端
- 通过Electron或ReactNative开发客户端
- 通过WebRTC开发 P2P 型在线传输，实现多人会议等
- 通过WebGL开发一些 3D 游戏
- 通过WebAssembly将 C++ 等代码编译渲染成网页
开发环境
1. 浏览器
  
  IE/Edge Chrome Firefox Safari
2. 编辑器
  
  VSCode Vim WebStorm

0x2 HTML

什么是 HTML

超文本标记语言：HyperText Markup Language
- 超文本（HyperText）：即除文本外，还包含图片、视频等信息表达形式
- 标记语言（Markup Language）：即使用标签化的语言（如<p>段落</p>）
  - 在标签化的语言中，可以在标签中添加属性，如<p color="xxx"></p>中的color就是属性名、xxx就是属性值
  - 当某个标签中不需要嵌套其他标签时，可以省略结束标签，如<br />
```
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>页面标题</title>

    </head>

    <body>

        <h1>一级标题</h1>

        <p>一个段落</p>

    </body>

</html>
```
对于上述的一段简单的 HTML 代码，其中：
1. <!DOCTYPE html>用于说明使用的 HTML 版本
2. <html></html>是页面的根标签
3. <head></head>用于存放页面的源数据
4. <body></body>用于存放需要面向用户展示的内容
文档对象模型（DOM）树

再次以上述代码举例，其对应的 DOM 树如下：

graph LR
A(document)-->B(< html >)
B-->C(< head >)
B-->D(< body >)
C-->E(< meta >)
C-->F(< title >)
D-->G(< h1 >)
D-->H(< p >)
HTML 语法
- 标签和属性不区分大小写，推荐使用小写
- 空标签可以不闭合，如<input />
- 属性值推荐使用双引号包裹
- 某些属性值可以省略，如required、readonly

标签

标题（h1~h6）

列表

有序列表

<ol>

    <li>第一项</li>

    <li>第二项</li>

    <li>第三项</li>

</ol>

无序列表

<ul>

    <li>xyz</li>

    <li>abc</li>

    <li>!@#</li>

</ul>

key-value

<dl>

    <dt>xxx:</dt>

    <dd>xxx1</dd>

    <dt>yyy:</dt>

    <dd>yyy1</dd>

    <dd>yyy2</dd>

    <dd>yyy3</dd>

</dl>

链接

<a href="http://example.com" target="_blank">链接</a>

多媒体

图片：<img src="xxx.jpg" alt="替代性文本" width="200" />

音频：<audio src="xxx.wav" controls />

视频：<video src="xxx.avi" coontrols />

输入

输入提示：<input placeholder="提示文本" />

条状选择：<input type="range" />

范围输入：<input type="number" />

日期输入：<input type="date" min="2000-01-01" />

多行输入：<textarea>多行输入文本</textarea>

单选输入：

<label><input type="radio" name="xxx">a</label>

<label><input type="radio" name="xxx">b</label>

多选输入：

<label><input type="checkbox" name="xxx">a</label>

<label><input type="checkbox" name="xxx">a</label>

下拉选择：

<select>

    <option>a</option>

    <option>b</option>

    <option>c</option>

</select>

辅助输入：

<input list="lists" />

<datalist id="lists">

    <option>aaa</option>

    <option>bbb</option>

    <option>ccc</option>

</datalist>

文本

长引用：
```
<blockquote cite="引用地址">

    <p>xxxxx</p>

</blockquote>
```
短引用：
- 作品引用
```
<p>

    xxx<cite>yyy</cite>zzz

</p>
```
- 内容引用
```
<p>

    xxx<q>yyy</q>zzz

</p>
```
代码引用：<p><code></code></p>

多行代码：<pre><code></code></pre>

加粗：<strong></strong>

斜体：<em></em>

内容划分

graph TB
A(header 头部内容)-->B(nav 导航)
A-->C(main 主体内容)
A-->D(aside 附加内容)
C-->E(article 文章)
E-->F(footer 足部内容)

0x3 HTML 语义化

什么是语义化
- HTML 中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写 HTML
好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
传达内容，而非样式
如何做到
- 了解每个标签和属性的含义
- 选择最适合描述内容的标签
- 不使用可视化工具生成代码

首发于前端与 HTML | 青训营笔记

End

前端与 HTML的更多相关文章

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的插件生态可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
总结：Mac前端开发环境的搭建（配置）
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性资源定位:获取任何开发中所使用资源的线上路径内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中依赖声明:在一个文本文 ...
Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性资源定位:获取任何开发中所使用资源的线上路径内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中依赖声明:在一个文本文 ...
Fis3的前端模块化之路[基础篇]
Fis3版本:v3.4.22 fis3是一个构建工具解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...
细说前端自动化打包工具--webpack
背景记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
前端框架 EasyUI （0）重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

随机推荐

centos 8远程分发复制jdk到另一个虚拟机
在localzly节点操作成功后可以使用远程复制命令将JDK远程复制到slave1节点之中:(此命令在localzly中操作) scp -r /usr/java root@slave1:/usr/ 配 ...
nginx判断是否手机访问
if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle|MicroMessenger |iPad)" ) ...
vscode 花括号突出连接线 bracket 两个设置点（括号标识符）
vscode 花括号突出连接线 bracket 两个设置点外观设置设置里面搜索 bracket Editor - Guides: Highlight Active Bracket Pair E ...
怎么实现Redis的高可用？(主从、哨兵、集群)
高可用有两个含义:一是数据尽量不丢失,二是保证服务尽可能可用. AOF 和 RDB 数据持久化保证了数据尽量不丢失,那么多节点来保证服务尽可能提供服务. 一般在实际生产中,服务不会部署成单节点,主要是 ...
三维模型3DTile格式轻量化的跨平台兼容性问题分析
三维模型3DTile格式轻量化的跨平台兼容性问题分析三维模型3DTile格式是一种开放的.高效的和互操作的空间信息数据格式.然而,它作为一种新兴的技术,其在轻量化与跨平台兼容性方面存在着一些问题. ...
Cesium渲染模块之Texture
1. 引言 Cesium是一款三维地球和地图可视化开源JavaScript库,使用WebGL来进行硬件加速图形,使用时不需要任何插件支持,基于Apache2.0许可的开源程序,可以免费用于商业和非商业 ...
记录--Vue3 封装 ECharts 通用组件
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助按需导入的配置文件配置文件这里就不再赘述,内容都是一样的,主打一个随用随取,按需导入. import * as echarts from ...
.NET Emit 入门教程：第二部分：构建动态程序集（追加构建静态程序集教程）
前言: 在本部分中,我们将深入探讨如何使用C# Emit 来创建动态程序集. 动态程序集是在运行时生成的,为我们提供了一种灵活.动态地构建和加载程序集的能力. 1. 程序集的概念程序集是.NET中的 ...
objective-c之Class底层结构探索
isa 走位图在讲 OC->Class 底层类结构之前,先看下下面这张图: 通过isa走位图得出的结论是: 1,类,父类,元类都包含了 isa, superclass 2,对象isa指向类对 ...
Mysql中的锁（case篇）
case1(表锁的读-写-读阻塞) 上篇文档中提到过 WRITE locks normally have higher priority than READ locks to ensure that ...