前端学习总结之——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); // 利用画笔范围，画矩形
前端学习总结之——HTML的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 前端学习 第七弹： Javascript实现图片的延迟加载
前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img src="" x-src="/acsascas ...
- 前端学习 第六弹： javascript中的函数与闭包
前端学习 第六弹: javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) { ...
- 前端学习 第五弹： CSS （一）
前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...
- 前端学习 第四弹： HTML（一）
前端学习 第四弹: HTML(一) 元素分类:块元素 内联元素 块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p>, <ul>, &l ...
- 前端学习 第三弹： JavaScript语言的特性与发展
前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...
随机推荐
- Day1 【Scrum 冲刺博客】
(因发作业当天没注意看作业内容,第一天的冲刺博客和第二天的同时发!!!不好意思!!!) 各个成员在 Alpha 阶段认领的任务 方晓莹 搭建社区管理系统的前端框架 登录页开发 管理员模块个人中心开发 ...
- CSS基础-链接
链接的状态 link 没有访问过的 visited 访问过的 hover 用户鼠标刚好停留在这个链接上时 focus 通过TAB键或者编程方法将一个链接选中时 active 链接被激活时 默认的链 ...
- 一文打尽PWM协议、PPM协议、PCM协议、SBUS协议、XBUS协议、DSM协议 | STM32的通用定时器TIM3实现PPM信号输出
PWM.PPM.PCM.SBUS.XBUS.DSM都是接收机与其他设备通信的协议. 请注意这里不要将遥控器和接收机之间的协议混淆.遥控器和接收机之间会采用某种协议来互相沟通,这些协议往往各个厂牌各自有 ...
- Tomcat 知识点总结
Tomcat 学习笔记.本文相关配置均为 tomcat8 下,其他版本可能略有不同.如有错误请多包涵. 架构 首先,看一下整个架构图 接下来简单解释一下. Server:服务器.Tomcat 就是一个 ...
- Java并发编程的艺术（八）——锁相关
锁的作用 控制多个线程访问共享资源. 线程协作 Lock接口 特点 与synchronized类似的同步功能,只是需要显式地获取和释放锁.缺少隐式获取锁的便捷性. 拥有锁获取与释放的可操作性.可中断的 ...
- css处理文字不换行、换行截断、溢出省略号
1.使文字不换行 white-space: nowrap; 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签 ...
- sqli-labs less13-20(各种post型头部注入)
less-13 POST型双查询注入 less-14 POST型双查询注入 less-15 POST型布尔注入 less-16 POST型布尔注入 less-17 POST型报错注入(updatexm ...
- Spring Boot 的2020最后一击：2.4.1、2.3.7、2.2.12 发布
近日,Spring Boot官方发布了本年度最后一次版本更新,主要针对目前维护的三个版本: 2.4.x:第一个bug修复版本 2.4.1 2.3.x:常规维护版本 2.3.7 2.2.x:常规维护版本 ...
- bbed工具安装
1.上传bbedus.msb bbedus.msg sbbdpt.o ssbbded.o四个文件到数据库服务器 [oracle@edgzrip1-PROD1 bbed_10g_src_x32]$ ...
- Linux下双网卡绑定bond配置实例详解
本文源自:http://blog.itpub.net/31015730/viewspace-2150185/ 一.什么是bond? 网卡bond是通过多张网卡绑定为一个逻辑网卡,实现本地网卡冗余,带宽 ...