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

【前端&HTML相关语法】

什么是前端

解决GUI人机交互问题
跨终端（PC/移动浏览器；客户端、小程序）
Web技术栈

技术栈

HTML主要负责网页的内容
CSS主要负责网页的样式
JS主要负责网页的行为

前端需要关注哪些方面

功能
美观
无障碍
安全
性能
兼容性
用户体验

前端的领域在不断的进步，前端的边界也在不断地延伸。

开发环境

浏览器
编辑器

HTML

什么是HTML

HyperText Markup Language（超文本标记语言）

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

浏览器解析html代码的方式是采用dom树的方式

HTML语法

标签和属性不区分大小写
空标签可以不闭合
属性值用双引号包裹
某些属性值可以省略

页面划分

header中存放页面的页头部分

main中存放页面的主要内容，一般一个页面中只有一个main部分

aside为页面中与主要内容相关的次要内容

footer中存放页面的页尾部分

语义化

语义化是什么？

HTML中的元素、属性以及属性值都拥有某些含义

开发者应该遵守这些语义来编写HTML

HTML会被谁使用

对于开发者来说，需要修改维护页面

对于浏览器来说，会根据标签来渲染画面

对于搜索引擎，会根据标签来抓取关键词

对于无障碍者来说，可以通过标签来帮助无障碍用户正常的体验网页内容

如何做到语义化

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

总结

首先贴一段关于运用本节课学到的基础html写的简单页面代码：

<!DOCTYPE html>
<html lang="zh">
<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>
    <h1> hh</h1>
    <h2>hhh</h2>
    <h3>hhhh</h3>
    <h4>hhhhh</h4>
    <p>今天必须要<strong>完成作业</strong></p>
    <blockquote>
        长引用
    </blockquote>
    <q>短引用</q>

    <h1>111</h1>
    <h1><em>aaa</em></h1>
    <em><h1>bbb</h1></em>

    <!-- 结构化语义标签 -->
    <header></header>
    <main>主体部分 一个页面中只有一个</main>
    <footer>网页的底部</footer>
    <nav>网页中的导航</nav>

    <section></section>
    <div></div>
        <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>
    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构，用来规定哪里是标题</dd>
        <ul>
            <li>
                aa
                <ul>
                    <li>
                        aa1
                    </li>
                </ul>
            </li>
        </ul>
    </dl>
    <a href="http://www.baidu.com">baidu.com</a>
    <br>
</body>
</html>

关于网页语义化标签

学习了许多语义化标签之后，我通过查看了许多网站的源代码，发现目前在实际的开发中，语义化标签的使用率不是很高，这是一个奇怪的问题。

关于无障碍设计

我认为在开发中着重注意无障碍的设计，在需要关注的残障人士中，盲人需要通过屏幕阅读器来阅读网页，如果能在开发中添加文字说明的话，可能会对盲人降低阅读难度提供帮助

[HTML基础语法 | 青训营笔记]

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