前端与HTML | 青训营笔记

汪away
97 阅读6分钟

前端与HTML | 青训营笔记

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

一. 前端

image.png

1. 什么是前端？

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

2. 前端技术栈

image.png

  • HTML：负责页面、结构和内容；
  • CSS：设置页面的样式，如位置，颜色，大小等信息；
  • JavaScript：定义网页的行为；
  • 网络协议：浏览器通过http协议和服务器通信，将前端代码渲染成我们所看到的页面，也可以将用户的行为通过http协议提交到服务器端。

3. 前端应该关注的方面

image.png

因此，如果想做出一个质量上乘的产品，需要考虑很多方面。

4. 前端的边界

image.png

  • Node.js：开发服务器端的应用；
  • Electron，React Native：开发客户端的应用；
  • WebRTC：进行p2p的在线传输(实现多人会议)；
  • WebGL：开发流畅的3D游戏；
  • WebASSEMBLY：将C++，Rust等语言编写的代码编译成直接在浏览器可以运行的代码。 前端在互联网行业里面是一个发展非常快的领域，技术在不断更新，我们也需要持续地学习才能跟上技术的发展。

5. 开发环境

image.png

前端入门门槛比较低，易上手，只需要使用一款趁手的编辑器编写html，css文件，在浏览器中打开就可以看到效果。

二. HTML

image.png

1. HTML是什么？

image.png

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明图片、标题、链接和表格等。

2. 显示图片

image.png

img标签不要嵌套其他内容，所以可以省略</img>，在最后添加/即可。

3. 基本结构标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>
  • <! doctype html>：告诉浏览器使用HTML5版本来显示网页；
  • html：页面中最大的标签，称为根标签；
  • head: 存放页面的源数据，在head标签中我们必须要设置的标签是title；
  • title：让页面拥有一个属于自己的网页标题；
  • body：存放真正呈现给用户的内容，例如一段文字，一张图片。

image.png

4. DOM树

image.png

三. HTML语法

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

1. 标题 h1~h6

为了使页面具有语义化，我们需要在页面中使用标题标签，HTML为我们提供了6个等级的网页标题。

  • 标签语义：作为标题使用，并且依据重要性递减；
  • 特点：
    1. 加了标题的文字会变得更粗，字号也会变大；
    2. 一个标题独占一行。
<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

image.png

2. 列表

列表：用来布局的，使布局变得整齐、整洁和有序，同时更加自由和方便。

  • ol：有序列表，只能嵌套<li></li>，<li>与</li>之间相当于一个容器，可以容纳所以元素；
  • ul：无序列表，和有序列表相同。
  • dl：自定义列表，<dt>表示列表的标题，<dd>表示对标题的描述，<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。
<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>

image.png

3. 链接

<a>标签可以定义链接，作用是从一个页面链接到另一个页面。

  • href：用于指定链接目标的url地址，(必须属性)当标签应用href属性时，它就具有了链接的功能。
  • target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。
<a href="https://www.bytedance.com/">
  字节跳动官网
</a>

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

image.png

4. 多媒体

  • <img>：图片，src表示图片的url地址，alt表示一个替代性的文本，当图片加载失败时，就会显示文本信息，width表示图片的宽度；
  • <audio>：音频，src表示音频的url地址，controls表示播放控件；
  • <video>：视频，和音频类似。
<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>

image.png

5. 输入

  • <input>: 单行输入；
    • placeholder：占位符，没有输入时，默认显示；
    • type：range(范围)，number(数字),date(日期)，checkbox(选择多个值)，radio(选择一个name相同的值);
    • list：自由输入值和选择值；
  • <textara>：多行输入；
  • <select>：下拉选择。 可以通过JS来处理输入信息。
<input placeholder="请输入用户名">

<input type="range">

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

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

<textarea>Hey</textarea>

image.png

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

image.png

6. 文本

  • <blockquote>：块级引用，也称长引用；
  • <cite>：短引用，一般表示作品名字或章节；
  • <q>：和<cite>不同，一般表示具体引用内容；
  • <code>: 代码标签，在外面包裹<pre>标签，可以引用多行代码；
  • <strong>：强调标签，表示含义上的紧急；
  • <em>：强调标签，表示一段话中需要重读的部分。
<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>

image.png

四. 内容划分

image.png

五. 语义化

1. 语义化是什么？

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

2. 谁在使用我们写的HTML

  • 开发者——修改、维护页面；
  • 浏览器——展示页面；
  • 搜索引擎——提取关键词、排序；
  • 屏幕阅读器——给盲人读页面内容。

3. 语义化的好处

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

4. 如何做到语义化

image.png

  • 传达内容，而不是样式
  • 了解每个标签和属性
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码
avatar
文章
阅读
粉丝