HTML笔记整理｜ 青训营笔记

DoKiDoKi
87 阅读1分钟

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

HTML是什么

HTML（HyperText Markup Language）即 超文本标记语言 ，用来构建网页基本结构及其内容的标记语言。

常用标签

  • 标题：h1~h6
  • ol 无序列表
  • ul 有序列表
  • dl 定义性列表
    • <dl>定义列表
    • <dt>定义标题
    • <dd>定义描述
<h4>《如何阅读一本书》</h4>
<dl>
  <dt>作者：</dt>
  <dd>莫提默·J. 艾德勒/查尔斯·范多伦</dd>
  <dt>出版年：</dt>
  <dd>2004-1</dd>
</dl>

  • a 链接：如果没有href属性，仅仅是超链接的一个占位符

  • img 图片

  • input 输入

一些列举：

<input placeholder="请输入用户名">
<input type="radio">
<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
……

image.png

语义化标签

为什么要有语义化呢？语义化的好处是什么？ 我们需要让合理的标签干合适的事情 代码可读性、可维护性、搜索引擎优化、提升无障碍性

前端工程师的自我修养：

开发者应该遵循 语义 来编写HTML

传递内容，而不是样式

  • 音频、视频：audio、video
  • 内容划分：nav、header、footer、aside、section、article
  • 块引用：blockquote
  • 短引用：q
  • 定义作品标题：cite
  • 预格式化文本 pre：元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
  • 代码 code
  • 更强烈的强调 strong：用粗体表示
  • 被强调的文本 em：用斜体表示

HTML结构

所谓html的结构，也就是dom树的概念 如下代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

我们可以得到他的dom树结构为：

image.png

avatar
文章
阅读
粉丝