前端与 HTML | 青训营笔记

戴兜
446 阅读2分钟

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

本堂课重点内容：

  1. 前端的介绍
  2. HTML 标签的简单介绍
  3. HTML 语义化（使用语义化的标签或属性，例如lang属性用于标识语言）

详细知识点介绍：

  1. DOM树/DOM节点的简单介绍
  2. HTML 语法简单介绍

标签和属性不区分大小写

空标签可以不闭合，例如 input meta

属性值推荐使用双引号包裹 一些属性的属性值可以省略，例如 required readonly

  1. 各类常用标签（标题、文本、多媒体元素、表单元素、超链接）
  2. 常见语义化标签（article/main/nav/header/footer/section）
  3. 语义化的优势

实践练习例子：

1. 标题元素

使用 h1~h6 标签将标题文本包裹，标题会根据级别拥有默认的字重、字号和外边距。

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

image.png

2. 图片元素

使用 src 属性来确定图片链接，alt 属性用于表示图片无法显示时的替代文本

<img src="https://api.daidr.me/apis/imgholder/128*128" />
<img src="https://example.com" alt="显示不出来的图片" />

image.png

3. 单选框

radio 类型的 input 元素，相同 name 的单选框会归为同一组（只能选其中一个） 使用 label 标签来标识单选框的内容

<input type="radio" id="el1" name="group1" />
<label for="el1">第一组-选项1</label>
<input type="radio" id="el2" name="group1" />
<label for="el2">第一组-选项1</label>
<br>
<input type="radio" id="el3" name="group2" />
<label for="el3">第二组-选项1</label>
<input type="radio" id="el4" name="group2" />
<label for="el4">第二组-选项2</label>

image.png

4. 超链接

使用 a 标签包裹文本，href 属性是目标链接，默认在当前页面打开，为了在新标签页打开，可以将 target 属性设置为 _blank，

<a href="https://im.daidr.me">在当前页面打开</a>
<a href="https://im.daidr.me" target="_blank">在新页面打开</a>

image.png

5. 有序列表

最外层使用 ol(ordered list) 标签包裹，内部包含多个 li(list item) 标签

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li><strong>第三项（li标签可以包含其他标签）</strong></li>
</ol>

image.png

6. 无序列表

最外层使用 ul(unordered list) 标签包裹，内部包含多个 li(list item) 标签

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li><strong>第三项（li标签可以包含其他标签）</strong></li>
</ul>

image.png

ol/ul 标签的子元素只能是li，不能是其他元素（可能会出问题），但是li标签里边可以有其他类型的元素（见上面的例子）

课后个人总结：

总体上来说这节课是比较简单的，基本上就讲了基础的 HTML 语法、一些常用的 HTML 标签和 HTML 的语义化

语义化有许多好处，例如增加代码的可读性和可维护性，能够利于搜索引擎对网页进行索引，并且语义化能够提升无障碍性，为例如屏幕阅读器等无障碍工具的使用提供便利。

avatar
文章
阅读
粉丝