这是我参与「第五届青训营 」笔记创作活动的第1天。
一、本堂课重点内容:
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML作用解析
- HTML语义化
二、详细知识点介绍:
什么是前端
- 解决GUI人机交互问题
- 跨端
- Web技术栈
前端技术栈
HTML是什么
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
网页是由网页元素组成的 , 这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户了。
基本HTML 网页结构如下,body标签里的内容是浏览器上所视内容。 DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后,转化为DOM树,因此对HTML文档的处理可以通过对DOM树的操作实现。
<!DOCTYPE>,声明文档类型。<html>,HTML元素真正的根元素。<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>
网页内容划分
设计页面时候要按照一定规则,注意内容划分,规范编写页面
三、课后个人总结:
前端开发,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。