前端与 HTML | 青训营笔记

dsyislearning
80 阅读4分钟

前端与 HTML | 青训营笔记

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

课前预习

提前阅读

HTML 介绍

课堂笔记

前端

什么是前端

使用Web技术栈解决多终端下的GUI人机交互问题

前端技术栈

HTML

最基础，负责页面的内容和结构

CSS

设置页面的样式，比如位置、大小、颜色

JavaScript

定义页面的行为，比如用户点击按钮后的响应

以上三种代码都运行在浏览器内，浏览器通过HTTP网络协议来和服务器通信

前端关注点

功能、美观、无障碍（accessbility）、安全、性能、体验

前端的边界

Node.js

开发服务器端应用

Electrion 、 React Native

开发客户端的应用

WebRTC

多人p2p视频会议

WebGL

3D效果、游戏

WebAssembly

将其他语言的代码转换成浏览器可以执行的代码

前端开发环境

浏览器、编辑器

HTML

HTML是什么

HTML (HyperText Markup Language) ，超文本标记语言

超文本（Hypertext）：图片、标题、链接、表格 ……

标记语言（Markup Language）：标签（Tag）、属性（Attribute） ……

例子

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

<html> 根标签

<head> 不显示在页面的配置标签

<body> 页面内显示内容的标签

DOM树

查看DOM树：浏览器内右键->检查元素

HTML语法

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

  • 空标签可以不闭合，比如 input 、 meta

  • 属性值推荐用双引号包裹

  • 某些属性值可以省略，比如 requierd 、 readonly

标题

标题有 h1~h6 六个级别

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

<h1> 一级标题

<h2> 二级标题

<h3> 三级标题

<p> 段落块

列表

<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>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

<ol> 有序列表，每一项用 <li> 表示

<ul> 无序列表，每一项用 <li> 表示

<dl> 自定义列表，表示键值（key value）结构，标题用 <dt> 表示，每一项用 <dd> 表示

链接

<a href="https://www.bytedance.com/">
  字节跳动官网
</a>

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

<a> 锚（anchor）

href="" 链接属性

多媒体

<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"
  width="400"
/>

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

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

<img> 图片

<audio> 音频

<video> 视频

controls 控件属性

输入

<input placeholder="请输入用户名">

<input type="range">

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

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

<textarea>Hey</textarea>

<input> 输入

placeholer 输入提示属性

type="range" 滑块方式属性

type="number" 输入数字属性

type="date" 输入日期属性

<textarea> 输入多行文字

选择

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

type="checkbox" 选择框属性

type="radio" 圆选择框属性

<select> 下拉选择

<datalist> 预设选项

文字展示

<blockquote cite="http://t.cn/RfjKO0F">
  <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;
const multiply = (a, b) => a * b;
</code></pre>

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

<blockquote> 块引用

<cite> 内联引用

<q> 一句话引用

<code> 展示代码

<pre> 预格式化

<strong> 含义上强调

<em> 突出重点

内容划分

常见布局：页头（header）、导航（nav）、主题（main）、正文（article）、旁栏（aside）、页脚（footer）

语义化

什么是语义化

  • HTML中的元素、属性及属性都有某些含义
  • 开发者应当遵循语义来编写HTML
    • 有序列表用 ol ；无序列表用 ul
    • lang 属性表示内容所使用的语言

语义化的好处

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

如何做到语义化

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

谁在使用我们写的HTML

  • 开发者 - 修改、维护页面

  • 浏览器 - 展示页面

  • 搜索引擎 - 提取关键词、排序

  • 屏幕阅读器 - 给盲人读页面内容

原则

传达内容，而不是样式

应该去寻找内容所对应的适合的标签，而不是考虑样式是否符合期望的展示。

比如一个标题：

<p style="font-size:32px">前端工程师的自我修养</p>

❌

<h1>前端工程师的自我修养</h1>

✔

课后巩固

课后阅读材料

avatar
文章
阅读
粉丝