前端与HTML | 青训营笔记

DAVEN
448 阅读2分钟

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

一、前端

前端工程师 就是使用web技术栈解决多端图形用户界面交互问题的工程师

前端的主要的技术分为三层：

  1. HTML（基础）负责页面结构、内容。
  2. css设置页面的样式（位置大小，颜色）
  3. JavaScript定义网页的行为，(用户点了一个按钮后，页面如何响应。)

  • HTML，css和JavaScript，都运行在浏览器里，浏览器可以通过HTTP协议和服务器进行通信。浏览器通过HTTP协议从服务器上拿到前端的代码之后把它们渲染成我们可以看到的页面，浏览器也可以把用户填写的内容或者用户的行为通过HTTP协议提交到服务端。

  • HTML CSS JavaScript以及各类通信协议构成一个最基本的前端技术栈

二、前端应该关注哪些方面

功能，美观，无障碍（是否适合所有人使用），安全 ，性能（流畅度），兼容，用户体验

三、前端边界

  • nodejs——开发服务器端的应用
  • electron 或 react native——开发客户端的应用
  • web RTC——在线传输，实现多人会议
  • web GL——开发3D游戏
  • web ASSEMBLY——把其他编译器中的代码编译为可以在浏览器中运行的代码

四、HTML是什么

Hyper Text Markup Language ( 超文本标记语言 )

  • 超文本（图片 标题 链接 表格）
  • 标记语言（成对出现的标签表示）
<!-- 渲染模式 -->
<!DOCTYPE html>
<!-- 根标签 -->
<html lang="en">
<!-- 页面元数据，不呈现给用户 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 呈现给用户的真正内容 -->

<body>
    hello world
    <b>hello world</b>
    <i>倾斜</i>
    <u>下划线</u>
    <s>删除线</s>

    <!-- 六级标题 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- 有序列表-->
    <ol>
        <li>1.</li>
        <li>2.</li>
        <li>3.</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>.</li>
        <li>.</li>
        <li>.</li>
    </ul>
    <!-- 定义列表 -->
    <dl>
        <!-- 标题 -->
        <dt></dt>
        <!-- 具体描述 -->
        <dd></dd>
        <dd></dd>
    </dl>

    <!-- 超链接 target="_blank"表示新窗口打开-->
    <a href="http://www.baidu.com" target="_blank">百度</a>

    <!-- 多媒体元素 -->
    <!-- 图片 alt=""表示图片加载失败时会显示此替代性的文字-->
    <img src="https://f7.baidu.com/it/u=1704833107,450884218&fm=222&app=108&size=f360,240&n=0&f=JPEG?sec=1650387600&t=b098d3765014b5da00cdfab1ac9f7230"
        alt="" width="">
    <!-- 视频 -->
    <audio src="" controls></audio>
    <video src="" controls></video>

    <!-- 输入 -->
    <input placeholder="请输入密码">
    <input type="range">
    <input type="number" min="1" max="9">
    <input type="date" min="2023-1-15">
    <!-- 多选 -->
    <p>
        <label for="">
            <input type="checkbox">A
        </label>
        <label for="">
            <input type="checkbox">B
        </label>
    </p>
    <!-- 单选 通过name确定互斥关系，从name相同的选项中进行单选-->
    <p>
        <label for="">
            <input type="radio" name="sport">足球
        </label>
        <label for="">
            <input type="radio" name="sport">篮球
        </label>
    </p>
    <!-- 下拉选择 -->
    <p>
        <select>
            <option>o</option>
            <option>p</option>
            <option>q</option>
        </select>
    </p>

    <!-- 用户输入时自动提示 -->
    <input list="coun">
    <datalist id="coun">
        <option>china</option>
        <option>us</option>
        <option>uk</option>
    </datalist>

    <!-- 多行文字 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>

    <!-- 长引用 -->
    <blockquote cite="">
        <p></p>
    </blockquote>
    <!-- 短引用标题等 -->
    <cite></cite>
    <!-- 具体引用内容 -->
    <q></q>
    <!-- 代码引用 -->
    <code>const</code>
    <!-- 强调 -->
    <!-- 强调一件事 -->
    <strong></strong>
    <!-- 强调语气词 -->
    <em></em>

    <!-- 内容划分 -->
    <header>页头</header>
    <main>主要内容</main>
    <article></article>
    <article></article>
    <aside>广告等文章推荐</aside>
    <footer>页尾版权等</footer>

    <div>hello world 没有任何效果</div>
</body>

</html>

基本框架可用DOM树表示，如下：

image.png

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

五、谁在使用我们写的 HTML

  1. 开发者﹣修改、维护页面
  2. 浏览器﹣展示页面
  3. 搜索引擎﹣提取关键词、排序
  4. 屏幕阅读器﹣给盲人读页面内容
  • HTML传达内容，不传达样式

六、如何做到语义化？

  1. 了解每个标签和属性的含义
  2. 思考什么标签最适合描述这个内容
  3. 不使用可视化工具生成代码
avatar
文章
阅读
粉丝