前端与HTML | 青训营笔记

Arkin
79 阅读3分钟

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

一、HTML

定义

HTML(HyperText Markup Language)，即超文本编辑语言，是一种用来告知浏览器如何组织页面的标记语言。
超文本：图片、链接、标题、表格

剖析一个HTML元素

以段落元素举例：

<p>段落内容</p>

这个元素的主要部分有：
    1、开始标签(Opening tag): 包含元素的名称 'p'，被 '<' 和 '>' 所包围。
    2、结束标签(CLosing tag): 与开始标签类似，只是在其元素名之前添加了斜杠 '/'。
    3、内容(Content): 元素的内容，在本例种就是输入的文本 '段落内容'。
    4、元素(Element): 开始标签、结束标签与内容结合，就是一个完整的元素。

剖析一个HTML文档

image.png

1. <!DOCTYPE HTML>: 声明文档类型。
2. <html></html>: <html>元素，用来包裹整个完整的页面。
3. <head></head>: <head>元素，包含页面标题、CSS样式、字符集声明等。
4. <meta charset="utf-8">: 设置文档使用utf-8字符集编码。
5. <title></title>: 设置页面标题，即浏览器标签标题，收藏页面时也会作为标题来描述页面。
6. <body></body>: <body>元素，包含显示在页面上的内容，文本、图片、视频等。

DOM树

经过上面的剖析可得到以下DOM树：

graph TD
document --> html --> head & body
head --> meta & title
body --> h1 & p

HTML语法

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

二、HTML标签

标题

有六个标题元素标签 ———— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。
每个标签代表文档中不同级别的标题：<h1>表示主标题，<h2>表示二级子标题，等等。<h6>为最小的标题元素。

列表

无序列表(Unordered): <ul>
有序列表(Ordered): <ol>
自定义列表(Definition): <dl>
    自定义列表中每个元素标题使用<dt>(term)定义，后面跟随<dd>(description)用于描述列表中元素的内容。

超链接

通过将文本(或其它内容，如图片等)包裹在<a>元素内，并给它一个href属性(也称超文本引用或目标)来创建一个超链接。
举例：
    <a href="https://www.bytedance.com/" target="_blank">字节跳动官网</a>

表单

<input>标签用于搜集用户信息，根据不同的 type 属性值，输入字段也会有不同的形态。
<select>标签定义下拉列表。
<option>标签定义待选择的选项。
<textarea>标签定义多行输入字段。
<button>标签定义按钮。
<blockquote>标签定义块引用。
<pre>标签定义预格式化文本。
<code>标签定义代码块。

内容划分

image.png

语义化

语义对可访问性、SEO等非常重要，所以也就要求我们在开发时使用意义清楚的语义化标签。

语义化:

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML

举例：

如果使用以下代码来表示一级标题，没有任何语义值，不会对SEO和屏幕阅读器等有任何帮助，就仅仅是让这个元素看起来像一个一级标题。
    <span style="font-size: 32px; margin: 21px 0;">顶级标题</span>
像<b>、<i>、<u>等标签，仅仅影响表象而没有语义，被称为 表象元素。

如何做到语义化：

了解每个标签和属性的含义
思考什么标签最适合描述该内容
不使用可视化工具生成代码
avatar
文章
阅读
粉丝