这是我参与 ⌈ 第四届青训营 ⌋ 笔记创作活动的第一天

前端

1.什么是前端

目的：解决GUI（图形界面）人机交互问题
面向的设备：PC/移动浏览器/客户端/小程序/VR/AR等
技术栈：HTML、CSS、JavaScript、HTTP协议等

2.前端应该关注什么问题

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

3.前端的边界

Nodejs、ELECTRON、ReactNative、WebRTC、WebGL、WebASSEMBLY

4.开发环境

浏览器 IE/Edge、Chrome、Firefox、Safari
编辑器 VSCode、Vim、WebStorm

HTML

1.什么是HTML

Hyper Text Markup Language 超文本标记语言

Hyper Text 图片、标题、链接、表格

Markup Language <标签属性名="属性值"> 内容 </标签>

<!DOCTYPE html>  //文件渲染模式
<html>           //根标签
    <head>       //页面源数据（不直接呈现给用户）
        <meta charset="UTF-8">
        <title>页面标题</title>     //显示在标签页的标题里
    </head>
    <body>        //需要呈现给用户的
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

2.浏览器如何解析HTML

DOM树

graph LR
A(document)-->B1(<head>)
A-->B2(<body>)
B1-->C1(<meta>)
B1-->C2(<tite>)
B2-->C3(<h1>)
B2-->C4(<p>)
C2-->D1("Page Title")
C3-->D2("Heading")
C4-->D3("Page Content")

3.HTML语法

标签和属性不区分大小写，推荐小写

空标签可不闭合，如input、meta

属性值推荐用双引号包裹

某些属性值可忽略，如required、readonly

标题标签（h1~h6）

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

列表标签

有序列表用<ol></ol>来表示

<ol>
    <li>头晕</li>              //li标签
    <li>脑胀</li>
    <li>腿发酸</li>
</ol>

无序列表用<ul></ul>来表示

<ul>
    <li>枸杞</li>
    <li>山药</li>
    <li>小韭菜</li>
</ul>

定义列表用<dl></dl>来表示

<h2>伸腿瞪眼丸</h2>
<dl>
    <dt>功效</dt>             //定义列表标题
    <dd>起死回生</dd>
    <dt>保质期</dt>
    <dd>∞</dd>
    <dt>获取方法</dt>
    <dd>???</dd>
</dl>

链接标签

链接用<a href=""></a>来表示
属性值href表示超链接引用地址

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

a 标签中的target属性默认为_self，表示此链接将在本窗口内打开，可更改为_blank，表示此链接将在新窗口打开

多媒体标签

<img
    src="blob:https://bytedance.feishu.cn/4cd67469-59ef-4247-aaba-73b434ed154c"
    alt="learning pyramids"
    width="400px"
/>
<audio
    scr="/assets/music.ogg"
    controls
></audio>
<video
    src="/assets/music.ogg"
    controls
></video>

src属性代表图片地址 alt属性代表资源加载不出来时，采用的降级传达信息方式 controls属性代表让浏览器显示播放控件

输入标签

<input placeholder="请输入用户名">           //placeholder：文本框内提示文字
<input type="range">                        //滑块
<input type="number" min="1" max="100">     //输入数字
<input type="date" min="2002-01-01">        //输入日期
<textarea>Hey</textarea>                    //文本域（长文本）
<input type="checkbox">                     //多选按钮
<input type="radio">                        //单选按钮
<select>                                    //下拉框
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<input list="countries">v                   //带提示的文本下拉框
<datalist>
    <option>China</option>
    <option>US</option>
    <option>UK</option>
</datalist>

引用标签

<blockquote cite="">                                //长引用 引用地址
    我最喜欢的书是<cite>C语言程序入门</cite>          //短引用
    书里写道，<q>xxxxxxx</q>                         //原有元素引用
    <code>printf</code>指格式化输出函数，示例代码为   //代码引用
    <pre><code>                                     //保留原格式代码引用
        printf("%d",a);
    </code>
</blockquote>

<strong>开车不喝酒</strong>                          //表示重要、紧急
Cats <em> are </em> cute animals.                   //表示一段话中需要特别注意的词

内容划分

header 页头，可放logo、导航等内容
main 重点的主体内容
aside 与内容相关但不重要
article 放在main中的内容
footer 底部内容，可放帮助信息、参考链接、版权信息等

5.语义化

HTML目标对象

开发者修改、维护页面

浏览器展示页面

搜索引擎搜素关键字、排序

屏幕阅读器给盲人阅读页面内容

什么是语义化

HTML：表述页面内容/结构
根据此条原理，在迭代的过程中，增加/删除某些HTML标签
开发者应该遵循语义来编写HTML
语义化的好处

代码可读性

可维护性

搜索引擎优化

提升无障碍性

如何做到语义化

了解各标签及属性含义

思考最适合描述此需求的标签

不使用可视化工具生成代码，不利于后期维护

总结

HTML传达的是内容，而不是样式，不建议使用内联样式，让HTML、CSS、JavaScript“各司其职”
如何学习HTML 了解各标签、属性、属性值含义
编写HTML时，先分析需求，找到最适合描述它的标签，做到语义化，便于后期维护，增加可读性

前端HTML浅析 | 青训营笔记

前端