前端学习总结之——HTML

近期在找工作参加面试,想总结一下学过的东西,也会持续更新遇到的新问题、盲点。

  • 什么是HTML?
    • 超文本标记语言(英语:HyperText Markup Language,简称:HTML),由尖括号包围特定的标签名组成的标签,标签指定了文字、图片、链接、表格等,构建网站网页逻辑结构。
  • 什么是元素,什么是属性,常见的块级元素、内联块级元素和内联元素都有哪些?
    • 元素:两个角括号中间的部分,从开始标签到结束标签之间的所有代码
    • 属性:给元素定义一些它本身带有的属性,可以是样式、资源链接、名称等
    • 块级元素block element:可以定义宽高,在浏览器中默认自动换行。包括:div、p、h1-h6、ul、ol、li、address、dl、dt、dd、table、form、fieldset 等;
    • 内联块级元素inline-block element:可以定义宽高,但是默认不换行。包括:img、input、select、textarea、iframe 等;
    • 内联元素inline element:也叫行间元素,行内元素,没有宽高,默认不换行。包括:span、a、strong、em、ins、del、sub、sup 等。
  • 如何理解HTML语义化?
    • 主要有两方面:文本内容的语义化:例如用<header></header>定义头部、<main></main>定义文档主要内容、<footer></footer>定义文档底部,文档内容的结构十分清晰;标签代码的语义化:诸如用<strong></strong>来定义加粗的内容,而尽量不使用容易混淆的<b></b>尽管效果都是给内容加粗显示。
    • 使用语义化标签的好处是:
      • 可访问性:当文档样式不起作用时,结构清晰,用户阅读理解更容易;
      • 可检索性:SEO搜索引擎根据标签来确定上下文各个关键字的权重;
      • 可维护性:网页结构更清晰,开发人员更容易理解,提升代码的可读性,提高代码可维护性;
      • 盲人阅读器根据语义渲染网页,方便设备解析
  • meta标签:<meta>元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息。元数据(Metadata)含有页面的相关信息,包括样式、脚本及数据,能帮助一些软件(例如 搜索引擎、浏览器 等等)更好地运用和渲染页面。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>XX购物-综合网购首选-正品低价、品质保障、配送及时、轻松购物!</title>
    <mate name="description" content="XX购物-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
    <mate name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相继,数码,配件,手表,存储卡,XX购物" />
</head>

 

    • charset属性: 设置编码字符集,避免乱码,常用“utf-8”,Unicode标准,俗称 “万国码” ,涵盖了世界上的所有字符、标点和符号。
    • 属性:name=“viewpoint”,viewpoint通常指视窗、视口。浏览器用来显示网页的那部分区域,移动端视口概念相对复杂,又分为布局视口、视觉视口、理想视口。
    • 属性:name=“keywords” content=“……”,网页关键字,100字符左右,提供网站名称、分类信息等,搜索引擎也会按照keywords的信息优先展示。
    • 属性:name=“description” content=“……”,描述信息, 80-120 汉字, 综合title + keywords的信息描述。搜索引擎认知的优先级:title > description > keywords(<head>标签里面的三大件)。
    • content=”width=device-width, height=device-height, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”,分别是: 设备宽度、设备高度、应用程序启动时缩放的尺度(会给一个浮点值)、用户可以缩放的最小值、用户可以缩放的最大值、用户是否可以用手势来缩放整个应用程序使尺寸改变。
  • HTML5有哪些改变?
    • 简化HTML声明的方式,<!DOCTYPE html>
    • 增加了JavaScript的API:地理定位、离线存储、应用缓存、拖放
    • 增加了结构化标签header、footer、section、nav、aside
    • 增加了音视频标签(进度条、控制条),video、audio(目前网站在去flash化)
      • autoplay布尔属性,控制视频马上自动播放,不会停下来等待数据载入结束
      • controls提供用户控制,控制视频播放、暂停、恢复、音量、跨帧
      • loop布尔属性,视频结束自动回到开始位置
      • track表示字幕
      • poster表示封面
    • 画布canvas:
const ctx = canvas。getContext(‘2d’); // 获取它的2d上下文
ctx.fillStyle = 'green'; // 设置笔刷填充色
ctx.fillRect(10, 10, 100, 100); // 利用画笔范围,画矩形