0x1 前端

  1. 什么是前端

    • 解决图形用户界面（GUI）人机交互的问题
    • 跨终端
      • PC/移动浏览器
      • 客户端/小程序
      • VR/AR 等
    • Web 技术栈

    一句话总结前端工程师的工作：使用 Web 技术栈解决多端 GUI 人机交互问题

  2. 前端技术栈

    在浏览网页时：

    1. 在浏览器中，通过 HTML 展示结构和内容，通过 CSS 表现样式，通过 JavaScript 控制行为
    2. 在服务器中，渲染 “HCJ” 的代码，使其图形化
    3. 通过各种网络协议（HTTP，TCP/IP）等，完成人机交互

    由此可见，前端的技术栈主要为 三件套 和 网络协议，其中，三件套为前端的范畴

  3. 前端应该关注功能、美观、无障碍、安全、性能、兼容性、用户体验

  4. 前端的科技树

    • 通过node.js开发服务端
    • 通过Electron或ReactNative开发客户端
    • 通过WebRTC开发 P2P 型在线传输，实现多人会议等
    • 通过WebGL开发一些 3D 游戏
    • 通过WebAssembly将 C++ 等代码编译渲染成网页

  5. 开发环境

    1. 浏览器

      IE/Edge Chrome Firefox Safari

    2. 编辑器

      VSCode Vim WebStorm

0x2 HTML

  1. 什么是 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>用于存放需要面向用户展示的内容

  2. 文档对象模型（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 >)

  3. HTML 语法

    • 标签和属性不区分大小写，推荐使用小写
    • 空标签可以不闭合，如<input />
    • 属性值推荐使用双引号包裹
    • 某些属性值可以省略，如required、readonly

  4. 标签

    1. 标题（h1~h6）

    2. 列表

      1. 有序列表

        <ol>
        
    <li>第一项</li>
        
    <li>第二项</li>
        
    <li>第三项</li>
        
</ol>

      2. 无序列表

        <ul>
        
    <li>xyz</li>
        
    <li>abc</li>
        
    <li>!@#</li>
        
</ul>

      3. key-value

        <dl>
        
    <dt>xxx:</dt>
        
    <dd>xxx1</dd>
        
    <dt>yyy:</dt>
        
    <dd>yyy1</dd>
        
    <dd>yyy2</dd>
        
    <dd>yyy3</dd>
        
</dl>

    3. 链接

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

    4. 多媒体

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

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

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

    5. 输入

      输入提示：<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>

    6. 文本

      长引用：

      <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>

  5. 内容划分

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

0x3 HTML 语义化

  1. 什么是语义化

    • HTML 中的元素、属性及属性值都拥有某些含义

    • 开发者应该遵循语义来编写 HTML

  2. 好处

    • 代码可读性
    • 可维护性
    • 搜索引擎优化
    • 提升无障碍性

  3. 传达内容，而非样式

  4. 如何做到

    • 了解每个标签和属性的含义
    • 选择最适合描述内容的标签
    • 不使用可视化工具生成代码

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

End

前端与 HTML的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 总结：Mac前端开发环境的搭建（配置）

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  5. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  6. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  7. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

  8. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  9. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  10. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

随机推荐

  1. C++ //类模板中成员函数创建时机 //类模板中成员函数和普通类中成员函数创建时机是有区别的： //1.普通类中的成员函数一开始就可以创建 //2.类模板中的成员函数在调用时才创建

    1 //类模板中成员函数创建时机 2 //类模板中成员函数和普通类中成员函数创建时机是有区别的: 3 //1.普通类中的成员函数一开始就可以创建 4 //2.类模板中的成员函数在调用时才创建 5 6 ...

  2. Python（上机题） 通俗易懂的基础题目解析

    python 题目 文章目录 python 题目 题目一:幸运数对 题目二:lambda 函数找最大值 题目三:n个数前后互换 (切片) 题目四:字符串相减(删除指定字符) 方法一:可以用空字符来替换 ...

  3. Python面向对象之派生和组合

    [一]什么是派生 派生是指,子类继承父类,派生出自己的属性与方法,并且重用父类的属性与方法 [二]派生的方法 子类可以派生出自己新的属性,在进行属性查找时,子类中的属性名会优先于父类被查找 例如每个老 ...

  4. 并发操作导致的BUG-解决方案

    一.问题由来 上周五项目发布新版本之后,生产环境一直没有出现什么问题,大家也都开开心心,平平安安的开始新需求的开发. 可是刚稳定运行没几天,负责人突然在群里面发了一个截图,从图片中的信息可以看到,有一 ...

  5. C#中的MySqlHelper工具类及使用方法

    工具类 工具类转自C# MysqlHelper C#连接mysql数据库类库全,代码如下: using MySql.Data.MySqlClient; using System; using Syst ...

  6. Educational Codeforces Round 141:B. Matrix of Differences

    一.来源:Problem - B - Codeforces 二.题面 三.思路 我们先从一维思考如何构造尽可能多的数值差.以n=2为例,此时有1,2,3,4数,其中构成差值为3的方案有一个1,4,构成 ...

  7. docker部署文件

  8. 网页上发起qq聊天

    找到以前记录的小笔记,同步过来吧 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"& ...

  9. 【个人笔记】2023年搭建基于webpack5与typescript的react项目

    写在前面 由于我在另外的一些文章所讨论或分析的内容可能基于一个已经初始化好的项目,为了避免每一个文章都重复的描述如何搭建项目,我在本文会统一记录下来,今后相关的文章直接引用文本,方便读者阅读.此文主要 ...

  10. [极客大挑战 2019]web部分题解（sql部分已完结，其他部分正在更新，出去吃个饭先）

    [极客大挑战 2019]BabySQL 打开环境后有登录界面◕‿◕ 一眼注入,后先试试万能密码: username:admin' or '1'='1 password:1 GG,出大问题,我就会这一招 ...