前端与HTML | 青训营

惊弓232
67 阅读2分钟

这是我参与「第六届青训营」笔记创作活动的第2天。活动详情：# 第六届青训营笔记伴读 ｜ 升级学习体验，高效掌握知识

本节课程围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开，层层解析前端技术栈的构成，以及作为前端最为基础的技术 HTML 基础语法和基本功能，在实际研发过程中如何做到 HTML 语义化。

本节课程的四个要点：

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

什么是前端

使用web技术栈，解决多端图形用户界面交互问题的工程师。

  1. 解决GUI人机交互问题
  2. 跨终端：PC/移动浏览器、客户端/小程序、VR/AR
  3. Web技术栈

HTML （HyperText Markup Language超文本标记语言）

  1. !DOCTYPE HTML ： 标记了当前在使用的html文件是一种什么样的版本，浏览器会根据此标签决定当前文件的渲染模式。

  2. W3C标准及规范（万维网联盟） 工作：对Web进行标准化。网页主要由三部分组成：结构，行为，表现。对应的标准分为三个方面：结构化标准XHTML和XML；行为标准文档对象模型W3CDOM、标准脚本语言ECMAScript；表现标准css。

  3. html标签规范：

  • 一个页面中只能有一个title（有多个title时只显示最后一个）
  • 行内元素中不能包含块级元素
  • 双标签在任何情况下都要写结束标签。
  • mark 定义带有记号的文本
  • strong 定义重要文本
  • blink （JS中的方法，用于显示闪动闪动的字符串）
  • 表单控件：readonly属性规定输入字段为只读，用户可使用tab标签获取焦点；
  • button可嵌套没有control属性的video元素；
  • step的值为负数时取默认值1；
  • form中的属性：method属性提交表单时使用的http方法，默认为GET；target：设置目标地址的打开方式；action:将数据提交到后台或服务器。
  1. HTML5与HTML4的区别：
  • 语法简化
  • 废除了一些关于网页美化的老旧标签
  • 新增语义化标签：hearder,footer,section.article,nav,hgroup,aside,figure。使网站更加便于修改和维护，与css更和谐；更易于理解页面结构，增加程序可读性；有利于SEO搜索引擎优化。
  • 统一内嵌多媒体的语法，不再依靠flash：video,audio
  • 全新的表单设计
  • 新增canvas标签可用于绘制图形，新增svg标签支持svg绘图
  • 新增地理定位navigator geolocation
  • 新增多线程技术
  • 新增即时通讯
avatar
文章
阅读
粉丝