前端与HTML ｜ 青训营笔记

woananya
124 阅读2分钟

前端与HTML ｜ 青训营笔记

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

一、什么是前端？

（1）解决GUI人机交互问题（GUI:Graphical User Interface，图形用户界面，又称图形用户接口）
（2）跨终端
 ● PC/移动浏览器
 ● 客户端APP、小程序
 ● VR/AR等
（3）Web技术栈
一句话总结，前端工程师就是用Web技术栈解决多端图形用户界面交互问题的工程师。

二、前端技术栈

2022-07-24 (1).png

三、前端应该关注哪些方面？

前端注重用户体验
 ● 功能（解决什么问题和用户需求）
 ● 美观
 ● 无障碍（是否适合所有人，例如色盲者群体）
 ● 安全（是否存在漏洞）
 ● 性能（运行是否流畅？速度快吗？涉及用户体验）
 ● 兼容性（是否在各种设备上可以使用）

四、HTML是什么?

HTML: HyperText Markup Language，超文本标记语言
HyperText(超文本)：图片、标题、链接、表格等
Markup Language(标记语言)：一些标签

<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>页面标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>

其中，DOM树，是把HTML页面进行解析为树形结构，对应各个节点标签

五、HTML语法

标题

  <!--标题  -->
    <h1>大家好，我是一级标题</h1>
    <h2>我是二级</h2>
    <p>这是一个段落。这是一个段落。这是一个段落。</p>

列表


    <!-- 1、有序列表 -->
    <h2>排行榜</h2>
    <ol>
        <li>第一名</li>
        <li>第二名</li>
        <li>第三名</li>
    </ol>
    <!-- 2、无序列表 -->
    <h2>购物清单</h2>
    <ul>
        <li>苹果</li>
        <li>梨子</li>
        <li>樱桃</li>
    </ul>
    <!-- 3、定义列表 -->
    <h2>霸王别姬</h2>
    <dl>
        <dt>导演</dt>
        <dd>陈凯歌</dd>
        <dt>主演</dt>
        <dd>张国荣</dd>
        <dd>张丰毅</dd>
    </dl>

链接

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

多媒体

    <img src="#" alt="显示失败" width="400">
    <audio src="" controls></audio>
    <video src="" controls></video>

输入

    <input placeholder="">
    <input type="range">
    <input type="number" min="1" max="10">
    <input type="date" min="2018-02-10">
    <textarea>Hey</textarea>

选择

    <p>
        <label><input type="checkbox">🍎</label>
        <label><input type="checkbox">🍒</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>

    <p>
        <input list="countries">
        <datalist id="countries">
            <option>China</option>
            <option>Greece</option>
            <option>United States</option>
        </datalist>
    </p>

文本类

    <blockquote cite="#">
    <p>天才来源于百分之九十九的努力</p>
    </blockquote>

    <p><cite>小王子</cite></p>
    <p><cite>第一章</cite></p>
    <p><code>const</code></p>

    <pre>
        <code>
            const app=(a,b)=>a+b;
        </code>
    </pre>

    <p><strong>紧急、重要的强调</strong></p>
    <p><em>语气上强调</em></p>

六、语义化是什么？

● HTML中的元素、属性及属性值都拥有某些含义
● 开发者应该遵循语义来编写HTML
（例如有序列表就应该用ol,无序列表就应该用ul，lang属性表示内容使用的语言）
●如何做到语义化？
1、了解每个标签和属性的含义
2、思考什么标签适合描述这个内容
3、不使用可视化工具生成代码
推荐各类标签查阅文档：MDN、W3C

七、谁在使用我们写的HTML？

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

avatar
文章
阅读
粉丝