Jul. 24th 笔记 - 前端与HTML ｜ 青训营笔记

我在十点差三分的时候开始想你
138 阅读3分钟

Jul. 24th 笔记 - 前端与HTML

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

什么是前端

  1. 解决 GUI 人机交互问题
  2. 跨终端
  • PC/移动浏览器
  • 客户端/小程序
  • AR/VR
  1. Web技术栈 简单来说，前端工程师是用Web技术栈（HTML, CSS, JS 等技术），解决跨终端人机交互问题的工程师。

前端技术栈

{服务器端} <-> {HTTP, socket 等网络协议} <-> {(JavaScript 行为) (CSS 样式) (HTML 内容)}

前端应该关注什么

  • 功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容性
  • 体验

前端的边界

随着新的技术发展，前端已经远远超出了页面的范畴，我们需要持续的学习

  • Node.js 可以用来开发服务器端的应用
  • Electron, React Native 等可以用来开发客户端应用
  • WebRTC 可开发p2p应用
  • WebGL 可开发3D应用
  • WA 可用于编译其他语言

HTML -> HyperText Markup Language

一个例子

<!doctype html> <!--告诉浏览器所使用的HTML的版本-->
<html> <!--文档根标签-->
    <head>
        <meta charset="UTF-8">
        <title> 页面标题 </title>
    </head>
    <body> <!--呈现给用户的-->
        <h1>一级标题</h1>
        <p>段落内容<p>
    </body>
</html>

DOM树 —> 把HTML代码转换为树形结构

image.png

HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合
  • 属性值推荐使用双引号包裹: required等

标题

共六个级别，h1-h6

列表

  1. 有序列表
<ol> <!--Ordered List-->
    <li>one<li> <!--List Item-->
    <li>two<li>
    <li>two<li>
<ol>
  1. 无序列表
<ul> <!--Un-Ordered List-->
    <li>one<li>
    <li>two<li>
    <li>two<li>
<ul>
  1. 描述列表 描述列表使用与其他列表类型不同的闭合标签<dl>; 此外，每一项都用 <dt> (description term) 元素闭合。每个描述都用 <dd> (description definition) 元素闭合。
<dl>
  <dt>One</dt>
    <dd>1</dd>
  <dt>Two</dt>
    <dd>2</dd>
  <dt>Three</dt>
    <dd>3</dd>
</dl>

链接

<a href="www.abc.com">
    abc
</a>

<a href="www.abc.com"
target="_blank">
    abc <!--Open New Page-->
</a>

多媒体

alt：表示图片内容的一些降级方式，对于img，当图片不显示时，文字替代显示

<img
    src="some location"
    alt="Metal movable type" 
    width="400"
/>

<audio
    src="some location"
    controls
></audio>

<video
    src="some location"
    controls
></vidio>

输入

<input placeholder="something">

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>

或者，让用户有一些选项

<label><input type="checkbox"/> something </label>

<label><input type="radio"/> something </label>

<input list="countries" />
<datalist id="countries">
  <option>something</option>
  <option>something</option>
  <option>something</option>
</datalist>

高阶文字排版

<blockquote cite="some location">
  <p>something</p>
</blockquote>

<p>something<cite>something</cite>

<p><code>const</code>something</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

<p>something，<strong>something</strong>。</p>

<p>something <em>something</em> something</p>

内容划分

image.png

语义化

  • HTML的元素、属性、属性值都拥有某些含义
  • 遵循语义来编写

语义化的意义

  1. ”什么是语义化？其实简单说来就是让机器可以读懂内容。... 但是随着 Web 规模的不断扩大，信息量之大已经不在人肉处理的范围之内了。这个时候人们开始用机器来处理 Web 上发布的各种内容，搜索引擎就诞生了。再后来，人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘。所以让机器能够更好地读懂 Web 上发布的各种内容就变得越来越重要。"
    作者：顾轶灵
    链接：www.zhihu.com/question/20…
    来源：知乎
  2. 让合作者更好维护

如何做到语义化

  • 了解标签的意义
  • 思考最合适的标签
  • 不适用可视化工具生成代码 （我们不能控制相关工具所生成的代码，故不可能做到语义化）
avatar
文章
阅读
粉丝