简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML 基础知识
Blogger Information
Blog 27
fans 0
comment 0
visits 18951
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML 基础知识
茂林
Original
749 people have browsed it

html 基础知识

1.html 文档结构

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

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

元素,标签与属性

2.元素

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

<meta charset="utf-8" />
(2).设置兼容模式：多余的
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
(3).视口设置：视口(可视窗口)
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
(4).页面标题设置
<title>html结构</title>
1.2.2:页面主体元素:<body>,用户看的。

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

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

3. 标签

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

4.属性

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

5. 语义化布局标签

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

6. 图文元素

  1. <figure>
  2.   <img src="xxxx" alt="xxxx" />
  3.   <figcaption>title</figcaption>
  4. </figure>

7. 图像,链接,列表

  1. <!-- 图像 -->
  2. <img src="url" alt="title" />
  4. <!-- 链接 -->
  5. <a href="url" target="_blank">link</a>
  7. <!-- 列表 -->
  8. <!-- 无序 -->
  9. <ul>
  10.   <li>item1</li>
  11.   <li>item2</li>
  12.   <li>item3</li>
  13. </ul>
  15. <!-- 有序 -->
  16. <ol>
  17.   <li>item1</li>
  18.   <li>item2</li>
  19.   <li>item3</li>
  20. </ol>
  22. <!-- 自定义 -->
  23. <dl>
  24.   <dt>title</dt>
  25.   <dd>description</dd>
  26. </dl>

2023.1.13

Correcting teacher：PHPzPHPz

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！