HTML基础 | 青训营笔记

Nameless
175 阅读2分钟

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

HTML模板格式

在VSCode中新建一个HTML文档，输入!回车，就会自动生成一个HTML模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

以上是一个HTML的一个模板，而这些标签就组成了一个DOM树，形成了HTML的基本结构

DOM树

image.png

基本标签

常用的HTML标签:p标签、h1~h6标签、div标签、ol/ul>li标签等。

p标签:

<p>Hello world</p>

Hello world

h1-h6标签:

<h1>Hello world</h1>
<h2>Hello world</h2>
<h3>Hello world</h3>
<h4>Hello world</h4>
<h5>Hello world</h5>
<h6>Hello world</h6>

Hello world

Hello world

Hello world

Hello world

Hello world
Hello world

ol/ul标签：

ol标签
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
ul标签
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

ol标签

ul标签
## img标签 Hello world 
<img src="https://img2.baidu.com/it/u=1056016956,2004758812&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500" alt="Hello world">

src: 获取图片的地址。

alt: 可以看成是图片地址未能获取成功后的一种备用方案

页面布局结构

在课上老师讲了一个页面的布局结构，如下图 image.png

代码规范化

使用HTML标签需要遵循语义化。

语义化是什么？

  • HTML中的元素、属性及属性值都拥有某些含义；

  • 开发者应该遵循语义来编写HTML，如：

    • 有序列表用 ol；无序列表用 ul
    • lang属性表示页面使用的语言

为什么要使用HTML语义化

  1. 便于开发者修改、维护页面；
  2. 便于浏览器展示页面；
  3. 便于搜索引擎提取关键词、排序；
  4. 便于屏幕阅读器等识别（给盲人读页面内容）。

代码规范

在HTML中只表达内容，不要进行样式设置。（各司其职原则，即：HTML、CSS、JS 三者各司其职。）

如何做到语义化

  1. 了解每个标签及其属性的含义；
  2. 思考什么标签最适合描述这个内容；
  3. 不使用可视化工具生成代码。
avatar
文章
阅读
粉丝