前端与 HTML | 青训营笔记

Cshunte
86 阅读2分钟

一、本堂课重点内容

  1. 前端工作的定义
  2. 前端技术栈拆解与分析
  3. HTML作用解析
  4. HTML语义化

二、详细知识点介绍

<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>完整网页结构</title>
    </head>
    <body>
        <h1>一级标题</h1>
    </body>
</html>

<!DOCTYPE html>是文档声明，需要告诉浏览器我们使用的是哪一个版本的HTML。DOCTYPE 来决定用怪异模式处理或标准模式处理。
lang 属性是选择语言类型，zh中文，en英文
<meta> 可提供有关页面的元信息
<title>是网页名字

HTML

  • HyperText Markup Language，超文本标记语言。
  • DOM树，将HTML代码转化为树形结构，每一个节点称为dom节点。
  • HTML的主要任务是展现页面的内容和结构，所以我们应当用它去做好他的本职工作，使用语义化html，而不是用应当表现结构的标签去囊括内容等等。
  • 尽可能的选取合适的标签完成合适的任务。

HTML语法

  1. 标题标签<h1></h1>~<h6></h6>
  2. 段落标签<p></p>
  3. 列表标签
<ol>
    <li></li>
    <li></li>
</ol>
无序列表
<ul>
    <li></li>
    <li></li>
</ul>
自定义列表
<dl>
    <dt></dt>
    <dd></dd>
</dl>
  1. 链接<a href='' target=''></a>
  2. 输入<input> <textarea>
  3. 引用
<blockquote></blockquote>
短引用
<cite></cite>
<q></q>  
<--浏览器会对q标签自动添加双引号-->

HTML作用解析

  • HTML全称为：HyperText Markup Language，HyperText是超文本，即呈现内容除了文本外，还可以是图片、链接、表格等；Markup Language是标记语言，用来表示超文本。
  • 标记语言的标签上可以设置属性。
  • HTML代码会被浏览器解析成DOM树渲染页面，HTML解析后的DOM树如下所示： image.png

HTML语法及语义化

语法

  • 标签和属性不区分大小写，使用原生组件推荐使用小写，使用自定义组件推荐大写。
  • 空标签可以不闭合，如input、meta。
  • 属性值推荐用双引号包裹。
  • 某些属性值可以省略，如required、readonly。

语义化

  • HTML中的元素、属性及属性值都拥有某些含义，即要表现什么样的内容就用对应的标签才能把代码格式写规范。
  • 开发者应该遵循语义来编写HTML。
  • 如：有序列表用ol;无序列表用ul;lang属性表示内容所使用的语言。

个人总结

  1. 掌握了前端一些基本概念，了解了前端的一些技术栈和应用场景，是相当基础的内容。
  2. 心里还是很有底的，意识到自己离真正掌握基础知识还有很长的路要走。
  3. 重点学习实战了HTML语言，用其各个类型标签渲染不同组件形成不同超文本。在实战中理解了HTML语义化的含义及其在代码规范中的重要意义。
avatar
文章
阅读
粉丝