HTML大汇总

Chosen_1
103 阅读4分钟

1，引言

要想学前端，必须先从前端三大件开始，即HTML,CSS和Javascript，三种语言分别代表着网页的名词，形容词和动词。那我们先从最简单的名词-----HTML开始讲起

2，大体框架

整体的HTML框架如下图所示：

<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->  
<html lang="zh-CN"> <!-- 根标签，lang指定语言为中文 -->   
  <head> <!-- 头部元数据 --> 
    <meta charset="UTF-8"> 
    <title>我的网页</title> 
  </head> 
  <body> <!-- 可见内容 --> 
    <h1>欢迎来到我的网页</h1> 
    <p>这是一个段落。</p> 
  </body> 
</html>

3，基本语法

1，标签与元素

标签

标签是 HTML 中用于标记内容类型或功能的语法符号

形式上有"<标签>"和"</标签>"，分别表示开始标签和结束标签，不过这是按照位置来分的，常见的分类方法是按照语义划分，分为语义化标签和非语义化标签

语义化标签：<header>,<body>,<nav>,<main>,<footer>,<p>,<img>,<a>等
非语义化标签：<div>,<span>

使用语义化标签作用：

  1. 提升搜索引擎 SEO（帮助爬虫识别内容结构）
  2. 增强无障碍访问（方便屏幕阅读器解读）
  3. 文章脉络更加清晰

元素

元素是 HTML 中具有独立功能的最小单元，由标签、标签内的属性、标签包裹的内容共同组成（单标签元素无内容，自身即完整单元）。

形式上分为"<标签>内容</标签>"和"<标签 ... />"两种

"<标签>内容</标签>"格式的元素：<p>...</p>,<header>...</header>,<div>...</div>``<a ... >...</a>,等
"<标签 ... />"格式的元素：<img ...>,<link ... />等

2，常见元素用法

1，文档头部：<head>...</head>不直接显示在网页页面上，但对浏览器解析网页、搜索引擎抓取信息等至关重要的元数据（metadata）和资源引用。
2，浏览器内部：<body>...</body>涵盖整体网页的内容
3，文章标题：<h1>...</h1>表示文章的标题，数字1，2，...表示几级标题，注意：一篇文章中只含有一个h1标题
4，文章内容段落：<p>...</p>表示文字部分，内容填写在标签之间
5，图片：<img src="..." width="..." height="..." alt="..." >其中"src"表示图片路径，"alt"表示图片的文字化描述（用于视力有障碍的群体，增强网页的可访问性），"width","height"用于预设图片的宽和高
6，链接：<a href="..." target="...">...</a>其中"href"表示链接的指向（若填写占位符"#"表示回到网页顶部），"target"表示点击链接后的去处，若"target=_blank"表示新开辟点击后新的网站在新的页面打开。"..."表示链接的名称
7，列表：<ul>和<ol>分别表示无序列表和有序列表，其格式为：<ul> <li>第一项</li> <li>第二项</li> ... </ul>或<ol> <li>第一项</li> <li>第二项</li> ... </ol>，无序列表默认每个list前都有圆点"·"，有序列表默认每个list都有"1,2,3,..."进行排序
8，粗体：<strong>...</strong>将要加粗的内容放在中间，且强调语义价值，方便视觉患者听时了解
9，斜体：<em>...</em>将要斜体的内容放在中间，且强调语义价值，方便视觉患者听时了解

4，开发习惯

1，多用如<nav> <header> <main> <article> <aside> <section> <footer> 等语义化标签容器，便于读者和浏览器的理解，也有利于自己理清文章脉络
2，可用<!-- ... -->来对文章的内容进行评论，这样更有利于读者的理解和后续对组件的快速定位
3，<strong>与<b>、<em>与<i>的区别

-   `<strong>`是 “语义强调”（内容重要），`<b>`仅 “视觉加粗”（无语义），推荐用`<strong>`；
-   `<em>`是 “语义斜体”（内容需要强调语气），`<i>`仅 “视觉斜体”（如外来词），推荐用`<em>`。

4，一些常见好用的快捷键分享（后续的CSS，JS中也很有用）-----用于VSCode中：

  1. Ctrl+F：在文档内进行字查询
  2. Ctrl+Shift+L：选择文档内所有与之相同的项，便于整体修改名字
  3. Alt：按住 Alt 键可同时选中多个不连续的区域，便于批量编辑

5，结语

前端开发之路任重而道远，在未来仍有很多知识需要学习，小编也是一个初学者，让我们一起加油！如果这篇文章能帮到你的话，荣幸之至；如果有错误的话并指出来的话，小编将不胜感激。

avatar
文章
阅读
粉丝