第五届字节跳动青训营 前端进阶学习笔记（一）前端和HTML

1.前言

本次课程主要介绍了：

• 前端要解决的基本问题
• HTML的基本定义和语法
• 为什么要语义化和怎么做的语义化

2.什么是前端

使用Web技术栈解决多端图形GUI交互问题。

3.前端需要关注哪些问题

• 功能
• 美观
• 无障碍
• 安全
• 性能
• 兼容
• 性能

4.HTML语法

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

5.HTML标签

（1）标题和段落

使用h1~h6标签可以定义文章标题，HTML分别给它们指定了默认的样式。而文章中的段落使用p标签定义。

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

这是可能有人就要问了，我用div和span同样可以实现标题和段落效果啊，为什么非得用h1标签和p标签呢？

    <div style="margin:20px 0;font-size:32px;font-weight: 600;">一级标题</div>
    <span>一级标题内容</span>

虽然上述代码同样也可以做到和h1标签+p标签一样的效果，但是这么写的代码语义一点都不明确，页面展示效果上确实做到了h1+p标签一样的效果，但代码却无法让人一眼看出这是标题+段落的组合，换成以下标签组合明显语义更加清晰，且不用写额外的样式代码。

    <h1>一级标题</h1>
    <p>一级标题内容</p>

为什么要使用语义化标签？

• 提高代码的可的可读性和可维护性
  
• 有益于SEO
  
• 提升无障碍性
  

如何实现语义化？

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

（2）列表

• 有序列表
  有序列表使用ol标签定义。列表项会被自动地添加上序号，ol标签本身具有默认的margin和padding属性值。

<ol style="border: 1px solid blue">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

• 无序列表
  无序列表使用ol标签定义。列表项会被自动地添加上列表项符号，ul标签本身具有默认的margin和padding属性值。

<ul style="border: 1px solid blue">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

• 自定义列表
  自定义列表使用dl标签定义，其中dt标签定义列表项标题，dd属性定义列表项属性。dd属性具有默认的margin属性值。

<dl style="border: 1px solid blue">
    <dt>作者：</dt>
    <dd>a</dd>
    <dt>编辑：</dt>
    <dd>b</dd>
    <dd>c</dd>
</dl>

（3）多媒体标签
网页中的多媒体内容通常有：图像、视频和音频，这三种多媒体内容在HTML中分别使用img标签、video标签和audio标签定义。这三个标签都有一个src属性，用来指向需要嵌入的资源路径。在img标签中，还定义了alt属性，这个属性主要用来做内容退化处理，即某一次资源未能按照预期加载时，将会以alt中的内容替代显示。

  <p><img src="1.jpg" width="300px" alt="[图片]1.jpg"></p>
  <p><audio src="1.mp3" controls></p>
  <p><video src="1.mp4" controls></p>

（4）链接

链接使用a标签定义，href指向跳转路径，target属性指定跳转方式，通常有_self当前页面跳转、_parent父级框架跳转、_blank新标签页跳转和_top顶级框架跳转这几种跳转方式。

<a href="https://juejin.cn/">跳转到掘金官网</a>

（5）表单控件

• input
  使用input标签可以定义各种类型的文本输入框，单选、多选按钮以及提交按钮等表单控件。type属性用于指定input的控件类型。

<p><input type="text"></p>
  <p><input type="password"></p>
  <p>
    <input type="radio" name="sex" value="male"> 男
    <input type="radio" name="sex" value="female"> 女
  </p>
  <p>
    <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
    <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
  </p>
  <p><input type="submit"></p>

也可以给input添加候选列表来提供输入建议。

  <input list="browsers" placeholder="请选择浏览器">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

• select
  使用select可以定义下拉选项控件。option定义选项。

选择年份：<select>
    <option>2023</option>
    <option>2022</option>
    <option>2021</option>
    <option>2020</option>
  </select>

（6）文本标签

• 引用
  表示引用的标签主要有三种：blockquote、cite和q。其中，blockquote表示引用了来着其他地方的某段内容，比如下文中我引用了MDN文档中对HTML的定义；cite则表示对某部作品的名称或者专有名词的引用，通常会给内容加上斜体的样式；而q标签则表示的是语义上的引用，即给内容加上双引号，表示该内容具有特殊含义。

  <p>
    <blockquote>
      就其核心而言，HTML 是一种相当简单的、由不同元素组成的标记语言，它可以被应用于文本片段，使文本在文档中具有不同的含义（它是段落吗？它是项目列表吗？它是表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。本模块将介绍前两个用途，并且介绍一些 HTML 的基本概念和语法。
    </blockquote>
  </p>
  <p><cite>《挪威的森林》</cite></p>
  <p><q>HTML</q></p>

• 代码
  使用code标签包含代码内容时，代码内容将会以一种等宽的字体显示。

  <code>
    <pre>
      const a = 1;
      a++;
      console.log(a);
    </pre>
  </code>

• 强调
  通常使用strong和em两个标签来表示对文本的强调，其中，强者表示字面意义上的强调，即使文本加粗，来强调该内容的重要性。而后者则表示语气上的重读，比如“我是小明”这句话中，强调的是自己的身份，因此是字应该重读。

    <p>HTML是一种<strong>超文本</strong>标记语言</p>
    <p>我<em>是</em>小明</p>

6.HTML中的内容划分

一个基本的HTML文件通常会按照以下的结构进行划分。

7.总结

HTML主要的任务是展示内容，向用户传达信息，而不是单纯对样式的引用。因此，学习语义化相关知识，并在实际编码过程中，实践不同的语义化规范，是一个前端工程师的基础必修课。同时，是否具有良好的语义化，也是判断一个页面好坏的标准。