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

本节课知识点

前端工作的定义
前端技术栈拆解与分析
HTML 作用解析
HTML 语义化

本节课详细知识点

语义化标签

一、什么是HTML语义化标签语义化的标签，旨在让标签有自己的含义。

<p>一行文字</p>
<span>一行文字</span>

如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签责没有独特的含义。所以这就是语意化标签的优势二、语义化标签的优势代码结构清晰，方便阅读，有利于团队合作开发。方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。有利于搜索引擎优化（SEO）。三、常见的语义化标签因此我们在写页面结构时，应尽量使用有语义的HTML 标签

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。
<aside>：定义其所处内容之外的内容
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<cite>：表示所包含的文本对某个参考文献的引用.
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<code>：标记代码。。

<img>

title和 alt

title 属性 是当鼠标悬停的时候显示图片的描述
alt 属性 是当网络加载不出图片的时候显示的图片描述

b strong

<b>不是语义化标签

<strong> 是语义化标签

<i>和<em>

倾斜

<pre>

带格式的代码块

code

代码块

<input>

range 滑动条
number 可以限制大小

href src

1.href 开启通道
2.src 把资源下载到本地

a标签

邮箱

<a href=mailto:11111@qq.com target="_blank">  11111@qq.com</a> 打开邮箱

html的结构

<document>
- <html>
  - <head>
    - <meta> (不需要关闭的标签）
    - <title>
  - <body>
    - 各种标签

课后个人总结（自我提问的问题）

要区分那些标签需要关闭那些标签？
那些标签有哪些属性？input video image
什么是语义化标签？有哪些？
html5的新特性？
有序无序列表，表单的书写？

引用参考

【青训营】- HTMl&CSS 基础 & UI 设...-青训营社区 (juejin.cn)

html重温｜ 青训营笔记