html 基础知识

1.html 文档结构

结构化：层级，树形结构（根/枝/叶）
DOM:文档对象模型
文档：html 文档
对象：文档及内部成员
模型：文档结构抽象表示

html 不区分大小写，推荐全小写

元素,标签与属性

2.元素

元素：页面成员，元素是网页的一部分。在 XML 和 HTML 中，一个元素可能包含一个数据项或一段文本或图像，或者可能什么都不包含。一个典型的元素包括一个带有一些属性的开始标签、封闭的文本内容和一个结束标签。
1.1 文档类型元素：<!DOCTYPE html> 表示为 html 类型文档
1.2 根元素：只有两个根元素<head>,<body>,表示浏览器渲染 html 的起点,入口.
1.2.1:头元素:<head>,给浏览器看的，用户无法看到。搜索引擎 SEO。
包含以下标签：
(1).页面编码

标签：描述元素<h1>,<meta>,<title>,<p>,<div>…
属性：标签特征,id,class,style (通用属性/预定义)

预置标签：w3c 制定，各家浏览器实现

3. 标签

双标签：起始标签和结束标签,内容写到他们之间,属性写到起始标签中
单标签: 空标签,它的内容由某个属性来设置,本质上”资源占位符”
预定义标签: <h1>,<input>,<div>,<ul>…
预定义属性: id,class,style, src,type,value,name…
自定义标签: <girl-friend>
自定义属性: height,weight,bwh(bust,waist,hips)
标准化的自定义属性: “data-“自定义属性固定前缀

4.属性

使用键值对描述,class="title"
预定义属性: id,class,style,src,type,name,...
通用属性: id,class,style
自定义属性: data-前缀,如data-email

5. 语义化布局标签

优点直观,SEO,缺点数量有限,且层级会过深
有限的回退到tag + class,如<div class="xxxx">

6. 图文元素

<figure>
  <img src="xxxx" alt="xxxx" />
  <figcaption>title</figcaption>
</figure>

7. 图像,链接,列表

<!-- 图像 -->
<img src="url" alt="title" />
<!-- 链接 -->
<a href="url" target="_blank">link</a>
<!-- 列表 -->
<!-- 无序 -->
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<!-- 有序 -->
<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ol>
<!-- 自定义 -->
<dl>
  <dt>title</dt>
  <dd>description</dd>
</dl>

2023.1.13

HTML 基础知识