前端与HTML学习(1) | 青训营笔记

看天的小猪
1,156 阅读6分钟

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

笔记小结： 前端用户可见的界面，网站前端页面就是网页的页面开发，前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并配合后端做网页的数据显示和交互等可视方面的工作内容；后端是指用户看不见的东西，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多的多，后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。

什么是前端？

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

特点： 1.前端设计一般可以理解为网站的视觉设计; 2.前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。

前端主要技术：HTML、CSS、JavaScript

这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。

HTML

超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了HTML5。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。

CSS

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

JavaScript

由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

HTML-DOM树的构建

  • DOM树是一种有限层次的树结构，树顺序由HTML文档决定的
  • 参与树的最小单位是对象（节点），如果该对象的父对象（父节点）为null，那么该对象（节点）就是DOM树的根；对象可以具有子对象（子节点），这是一个有序的对象集。

解析文档以构建DOM树

  1. 解析的过程可以分成两个子进程：词法分析和语法分析
  2. 词法分析是将输入内容分割成大量标记（如：html、body等）的过程。标记是语言中的词汇，构成内容的基本单位。
  3. 语法分析是引用语言的语法规则的过程（如html 超文本标记语言）。
  4. 词法分析器（又称标记生成器），负责将输入的文档内容分解成一个个有效标记，然后解析器负责根据语言（html）语法规则分析文档的结构，从而构建解析树（DOM树）。

HTML语法

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

（1）HTML标签

  • HTML标签是HTML的一个重要组成部分，是由尖括号所包围的关键词
  • HTML标签通常是成对出现的，其中第一个是开始标签，第二个是结束标签。值得注意的是虽然大多数的浏览器在没有使用结束标签的情况下也可以正确的显示HTML，但是不能依赖这种做法，忘记使用标签会产生不可预料的结果或错误。

（2）HTML元素

HTML元素和HTML标签通常是描述同样的意思，但是一个HTML元素包含了开始标签与结束标签。

代码语义化

  1. HTML中的元素、属性及属性值都拥有某些含义
  2. 开发者应该遵循语义来编写HTML
  • 有序列表用ol;无序列表用ul
  • lang属性表示内容所使用的语言

HTML 语义化的好处

  1. 最主要的就是对 '搜索引擎' 友好, 有了良好的 结构和语义 的网页内容, 自然容易被搜索引擎抓取。
  2. 有利于 'SEO': 和搜索引擎建立良好沟通, 有助于爬虫抓取更多的有效信息。
  3. 爬虫依赖于 标签 来确定, 上下文 和各个 关键字 的权重。
  4. 方便其他设备解析 (如屏幕阅读器, 盲人阅读器, 移动设备) 以语义化的方式来渲染网页。
  5. 便于团队开发和维护, 语义化更具可读性, 遵循 W3C 标准的团队都遵循这个标准, 可以减少差异化。
  6. 为了在没有 CSS 的情况下, 页面也能呈现出很好地内容结构; 代码结构:为了裸奔时好看。
  7. 用户体验: 例如 title, alt 用于解释名词或解释图片信息的标签, 尽量填写有含义的词语, label 标签的活用。

HTML 语义化的方法

  1. 尽可能少的使用无语义的标签 div / span 。
  2. 在语义不明显时, 既可以使用 div 或者 p 时, 尽量用 p, 因为 p 在默认情况下有上下间距, 对兼容特殊终端有利 。
  3. 不要使用纯样式标签, 如: b / font / u 等, 改用 css 设置 。
  4. 需要强调的文本, 可以包含在 strong 或者 em 标签中(浏览器预设样式, 能用 CSS 指定就不用他们), strong 默认样式是加粗 (不要用 b), em 是斜体(不用 i) 。
  5. 使用表格时, 标题 要用 caption, 表头用 thead, 主体部分用 tbody 包围, 尾部用 tfoot 包围 。 表头 和一般 单元格 要区分开, 表头用 th, 单元格用 td 。
  6. 表单域要用 fieldset 标签包起来, 并用 legend 标签说明表单的用途 。
  7. 每个 input 标签对应的说明文本都需要使用 label 标签, 并且通过为 input 设置 id 属性, 在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来 。
avatar
文章
阅读
粉丝