HTML | 青训营笔记

奔跑丶
66 阅读2分钟

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

HTML

简介

html指的是超文本标记语言（Hyper Text Markup Language），是一种标记语言，使用标签来描述网页。

DOM 树

DOM即文档对象模型

  • 元素（element）：页面中的标签
  • 节点（node）：页面中都有的内容都是节点：标签，属性，文本等
  • 文档（document）：一个页面就是一个文档
  • 这三者的关系是：文档包含节点，节点包含元素 111.png

html语法

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

html语义化

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

语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

如何做到语义化

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

html标题标签 h1-h6

  • 标题（Heading）是通过 h1-h6 标签进行定义的。
  • h1 定义最大的标题。 h2 定义最小的标题。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
</body>
</html>

html多媒体标签

  • video 标签：放置视频
  • audio 标签：放置音频

form 表单

HTML 表单用于收集用户的输入信息。

表单元素

  • input标签: 定义输入域
  • textarea标签: 定义文本域 (一个多行的输入控件)
  • label标签: 定义了 input 元素的标签，一般为输入标题
  • fieldset标签: 定义了一组相关的表单元素，并使用外框包含起来
  • legend标签: 定义了 fieldset 元素的标题
  • select标签: 定义了下拉选项列表
  • optgroup标签: 定义选项组
  • option标签: 定义下拉列表中的选项
  • button标签: 定义一个点击按钮
  • datalist标签: 指定一个预先定义的输入控件选项列表
  • keygen标签: 定义了表单的密钥对生成器字段
  • output标签: 定义一个计算结果

span标签

  • span标签的意思：行内标签。
  • span标签的作用：组合文档中的行内元素。
  • 放置在span标签中的行内元素 在一行中会被看成一个区域
avatar
文章
阅读
粉丝