前端与HTML学习内容总结 | 青训营

Vansama
104 阅读6分钟

前端与HTML：

一、前端基本概念

1. 前端的作用

  • 解决GUI人机交互问题
  • 跨终端：PC/移动浏览器、客户端/小程序、VR/AR等
  • Web技术栈

2. 前端技术栈

  • HTML（页面、结构、内容）
  • CSS（页面样式）
  • JavaScript（网页行为）
    注：
    （1）上述三种语言均使用在浏览器中
    （2）浏览器通过http协议将前端代码上传到服务器端，服务器进行渲染返回前端

3. 前端应该关注方面：功能、美观、无障碍（给特殊人群使用：色盲症）、安全、性能、兼容性

4. 前端的边界

  • nodeJS：开发服务器端
  • electron、React Native：开发客户端
  • WebRTC：在线传输多人会议
  • webGL：开发3D游戏
  • WebASSEMBLY：把C++、Rust等语言编写的代码编译成直接在浏览器中可运行的代码

5. 开发环境：浏览器 + 编辑器

二、HTML

1. HTML是什么：HyperText Markup Language（超文本语言）

  • HyperText：图片、标题、链接、表格
  • Markup Language：<h1>一级标题</h1>

2. 标签概述：
示例：<img src="photo.jpg" />
（1）标签：<img>
（2）属性名：src（用来表示图片的URL）
（3）属性值："photo.jpg"
注：
（1）<img>是空标签，只包含属性没有闭合标签
（2）标签内部可以设置属性

3. 代码示例

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

注释：

  1. doctype: 标记当前html版本，确定浏览器对页面的渲染
  2. <html> …… </html>: 根标签（其他标签均在其里面）
  3. <head> …… </head>: 页面的标题、页面的编码等（页面上需要的信息但不用呈现给用户）
  4. <body> …… </body>: 需要呈现给用户的内容

DOM树：将html代码转变为树形结构

DOM树.PNG

4. HTML语法：

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

2.1 各类标签用法

1. 标题标签：<h1>~<h6>（一级标题~六级标题）

2. 列表标签：

  • 有序列表（order list）：<ol> …… </ol>
  • 无序列表（unorder list）：<ul> …… </ul>
  • 描述列表（definition list）：
<dl> 
    <dt> 描述列表的标题1 <dt>
    <dd> 具体描述1 </dd>
    <dt> 描述列表的标题2 <dt>
    <dd> 具体描述2 </dd>
    <dd> 具体描述3 </dd>
</dl>

注释：

  • 描述列表类似于键值对
  • dl表示一个定义列表，dt（definition term）表示一个定义的名称，dd（definition description）表示对一个定义的解释
  • dl、dt、dd这三个标签必须同时出现，而且dt，dd必须嵌套在dl内。dt和dd是同级关系，并不是嵌套关系。dd必须紧跟在dt之后，dd前可以有多个dt，但dd前面必须至少有一个dt。dt后面至少需要有一个dd。dt和dd是多对多的关系。

3. 链接标签：

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

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

注释：

  • 链接标签：<a>（a起源于anchor）
  • 链接标签的属性：
    • herf（hypereference）：超链接引用地址，点了之后会页面跳转
    • target="_blank"：用新窗口打开该链接，而不是用原有页面替换打开该链接

4. 多媒体标签：

4.1 图片标签：

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

注释：

  • 图片标签：<img …… />
  • 图片标签的属性：
    • src：表示图片地址URL
    • alt（alternative text）：当html元素本身的物件无法被渲染时，用纯文字对其进行描述
    • width：表示图片展示的宽度

4.2 音频标签：

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

音频标签.PNG

注释：

  • 音频标签：<audio> </aduio>
  • 音频标签属性：
    • controls 表示这个音频默认显示浏览器的播放工具件（浏览器上的播放按钮和进度显示条等）

4.3 视频标签：

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

image.png

注释：

  • 视频标签：<video> …… </video>
  • 视频标签属性：
    • controls 表示这个视频默认显示浏览器的播放工具件（浏览器上的播放按钮和进度显示条等）

5. 输入（表单类控件）

  1. <input placeholder="请输入用户名"> placeholder属性:当用户没有输入的时候默认显示的内容，用户输入后，内容将被替换

image.png

  1. <input type="range"> 输入范围（会有滑动条）

image.png

  1. <input type="nuber" min="1" max="10"> 输入数字（最小为1，最大为10）

image.png

  1. <input type="date" min="2018-02-10"> 输入日期（最小日期为2018-02-10）

image.png

  1. <textarea>Hey</textarea> 输入多行文字（文本框可拖动）

image.png

注：用户提交数据将会由JS进行处理

6. 在已有的选项里进行选择

6.1 多项选择：

<p>
    <label><input type="checkbox" />☆</label>
    <label><input type="checkbox" checked />△</label>
</p>

image.png

注释：type="checkbox"可以进行多项选择

6.2 单项选择：

<p>
    <label><input type="radio" name="figure" />☆</label>
    <label><input type="radio" name="figure" />△</label>
</p>

image.png

注释：

  • type="radio" name="figure"可以进行单项选择；
  • 互斥关系由name属性来确定： 多个radio之间name相同则存在互斥关系，即只能选择一个选项

6.3 下拉选择：

<p>
    <select>
        <option> □ </option>
        <option> ☆ </option>
        <option> △ </option>
    </select>
</p>

image.png

注释：下拉选择标签为<select>……</select>，选项放在<option>……</option>里

6.4 给予用户提示（在用户输入时，可以给用户提示或快捷输入但不限制用户输入内容）

<input list="countries" />   
<datalist id="countries">
    <option> Greece </option>
    <option> UK </option>
    <option> US </option>
</datalist>

image.png

注释：定义一个list属性，通过list提供选项

7. 文本类标签

7.1 文本引用标签：

  1. 块引用：即长引用，引用的是一段文字，标签为<blockquote>，其cite属性确定引用的文字来源
<blockquote cite=URL>
    <P>………………………………</p>
</blockquote>
  1. 短引用：<cite>标签一般表示引用作品的名字或者章节，<q>标签表示引用的具体内容
<p>我最喜欢的一本书是<cite>小王子</cite>.</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>.</p>

7.2 代码引用标签
页面中需要引用代码可用<code>标签进行引用，引用的代码可长可短

<p><code>const</code>声明创建一个只读的常量</p> <!--短代码引用-->

<pre><code>
const add = (a,b) => a + b;
const multiply = (a,b) => a * b
</code></pre>
<!--多行代码引用（文字展示使用的是编程字体-等宽字体）-->

7.3 文本强调标签

  • <strong>:强调含义上的重要紧急和严重
  • <em>:语气上非常重要，需要强调某个字或者重读某个字
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

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

8. 网页内容划分标签

  • <header>：页头标签，与<head>不一样,header里的内容会呈现在页面上，里面可以放logo、导航栏等
  • <nav>：放置导航栏
  • <main>：放置页面主体内容
  • <article>：放置文章内容
  • <aside>：放置页面次要内容（与标题相关的内容）
  • <footer>：页尾标签,可以放一些参考链接，版权内容等

网页内容划分标签.PNG

2.2 HTML原则

1. 什么是HTML的语义化

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应遵循语义来编写HTML
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言（标记页面的内容是什么语言）

2. HTML代码的适用对象

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

3. 语义化的好处

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

4. 如何做到语义化

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

5. HTML本质是传达内容而不是样式

avatar
文章
阅读
粉丝