[ 前端 与 HTML | 青训营笔记]

国服最菜的前端
52 阅读2分钟

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

初始HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标签</title>
    </head>
    <body>
        <h1>一级标签</h1>
        <p>段落标签</p>
    </body>
</html>

<!DOCTYPE html> 它标记了我们在使用的HTML文件使用的是什么版本，决定了我们代码使用什么版本去解析，否则会使用比较老旧的怪异版本去解析。

<html> 他是我们代码的根标签

<head> head标签里会放一下源数据，不需要直接呈现给用户的数据（比如页面的标签、页面用什么什么样的格式编码）

<body> body里面就放的是我们需要给用户呈现的内容

我们上述的代码就会转为成为下列的DOM树

image.png

常见的一些标签

h1~h6

HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

ol 有序列表
ul 无序列表
dl 是一个包含术语定义以及描述的列表

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

image.png

a标签

HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

img : 图片
audio : 音频
video : 视频

input : 输入

select : 选项菜单
datalist : 数据列表元素

  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
  
<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

内容划分

image.png

一个好的内容划分 可以让代码清晰明了 有助于维护

语义化

语义化标签就是让标签有自己的含义，可以很直观的让程序员，浏览器以及搜索引擎直观的认识标签的属性和用途。

过去我们往往采用的都是div来布局，但是div本身就是一个盒子结构，没有什么独特的含义，这样做就会使得文档结构不清晰，无法直观的看出这部分代码是哪一部分的，所以HTML5新增了很多语义化标签。

语义化的好处

  1. 代码结构清晰，可读性高，减少差异化，便于团队开发和维护。
  2. 在页面没有加载CSS的情况下，也能呈现良好的内容结构，提升用户体验。
  3. 对搜索引擎友好，良好的结构和语义，有助于爬虫抓取更多的有效信息。
  4. 提升无障碍性

记住我们写html传达的是内容，而不是样式：所以一个好的语义化标签的使用会大大的帮助我们。

avatar
文章
阅读
粉丝