前端与 HTML | 青训营笔记

50 阅读2分钟

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

一、本堂课重点内容:

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

二、详细知识点介绍:

什么是前端

  • 解决GUI人机交互问题
  • 跨端
  • Web技术栈

前端技术栈

image.png

HTML是什么

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

网页是由网页元素组成的 , 这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户了。

image.png

基本HTML 网页结构如下,body标签里的内容是浏览器上所视内容。 DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后,转化为DOM树,因此对HTML文档的处理可以通过对DOM树的操作实现。

image.png

  1. <!DOCTYPE>,声明文档类型。
  2. <html>,HTML元素真正的根元素。
  3. <head>,定义html文档的文档头。

HTML语法

  • 标签和属性不区分大小写,推荐小写
  • 空标签可以不闭合,比如 input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略,比如 required、readonly

语义化是什么

  • HTML中的元素、属性以及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用ol,无序列表用ul
    • lang属性表示内容所使用的语言
  • 好处
    • 代码可读性
    • 可维护性
    • 搜索引擎优化
    • 提升无障碍性

常用标签

  • 一级标题标签 <h1></h1> (有一到六级h1-h6,重要程度依次递减,搜索引擎检索完title后会立即检索h1内容)
  • 段落标签 <p></p>
  • 超链接标签<a></a>
  • 换行标签<br />
  • 水平线标签<hr />
  • 图片标签<img />
  • 注释标签<!-- -->
  • 块元素<div></div>
  • 内联元素<span></span>

网页内容划分

设计页面时候要按照一定规则,注意内容划分,规范编写页面 image.png

三、课后个人总结:

前端开发,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。