文章目录
- 1: 复习：
- 2: 押题：
1: 复习：
· DOCTYPE和lang以及字符串的作用
<!DOCTYPE html>文档类型声明标签， 告诉浏览器这个页面采取html版本来显示
<html lang="en">告诉浏览器或者搜索引擎，这是一个英文网站，本页面采取英文来显示
<meta charest="UTF-8">必须写， 采取HTF-8 来保存文字， 如果不写就会乱码
· 相对路径
同级路径
<img src="baidu.gif" />
下一级< img src="images/baidu.gif" />
上一级< img src="../baidu/gif" />
· 特殊标签
空格标签
<< 左箭头
>> 右箭头
· 锚点标签
1：设置点击的a标签
<a href="#two">第二集</a>
2：设置对应接收的标签，点击就会跳转到该位置：<h2 id="#two">第二集 内容介绍</h2>
· 绝对路径
相对于本地的地址：
< img src="C:\Users\Administrator\Desktop\baidu.gif" />
相对于服务器地址：< img src="www.baidu.com/images/logo.png" />
· 表格标签 table
<table align="center" width="500" height="260" border="1" cellspacing="0">
<thead>
<tr>
<th>排名</th>
</tr>
</thead>
<tbody>
<tr>
<td>第二名<td>
</tr>
</tbody>
</table>
align ： left right center 表格在浏览器中的位置
border: 默认没有边框
cellpadding 单元格和内容之间的空隙 默认1px
cellspacing 单元格与单元格之间的空隙 默认 2px
width 表格的宽度， height 表格的高度
rowspan = “跨行合并单元格的个数”
colspan = “跨列合并单元格的个数”
· 表单域 form
<form action="url地址" method="提交方式" name="表单域名称"></form>
action=“提交到url地址”
method=“提交方式”
name=“表单域名称” 一个页面中有多个表单
· label 标注
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
注意 label的 sex 和 input 的 sex 需要保相同
· html查 W3School
2: 押题：
· 1：常问：
· 什么是 HTML5? (重点)
PS: HTML5是HTML（超文本标记语言）的最新版本。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。
现代的浏览器都支持 HTML5
· HTML 代码约定
使用正确的文档类型
<!DOCTYPE html>
关闭空的 HTML 元素
<meta charset="utf-8"/>
属性值我们推荐使用引号:
<table class=“table striped”>
空格和等号
<link rel="stylesheet" href="styles.css">
避免一行代码过长
每行代码尽量少于 80 个字符
空行和缩进
<body>
<h1>空行和缩进</h1>
<h2></h2>
<p>不要无缘无故添加空行。
为每个逻辑功能块添加空行，这样更易于阅读。
缩进使用两个空格，不建议使用 TAB。
比较短的代码间不要使用不必要的空行和缩进。</p>
</body>
HTML 注释
比较长的评论可以在 <!-- --> 分行写：
<!--
这是一个较长评论。 这是 一个较长评论。这是一个较长评论。
这是 一个较长评论 这是一个较长评论。 这是 一个较长评论。
-->
短的规则可以写成一行:
p.into {font-family: Verdana; font-size: 16em;}
· HTML5有哪些的新特性？(重点)
· canvas图形 video视频 audio音频
二维画图中的元素
媒体播放的 和元素
支持本地存储
新的内容特定元素，如<section>，<article>，<footer>，<header>，<nav>，<menu>
接下来是代码实例：附解释 ↓↓↓
1:创建一个画布（Canvas）
<canvas id="canvas"></canvas>
2:使用 JavaScript 来绘制图像
<script>
var canvas=document.getElementById('canvas'); //首先，找到 <canvas> 元素
var ctx=canvas.getContext('2d');//然后，创建 context 对象：
ctx.fillStyle='#FF0000'; // 通常颜色
ctx.fillRect(0,0,200,200);//坐标和宽高
</script>
==================================================================================
2：Video(视频)
<video width="320" height="240" controls> //播放控件
<source src="movie.mp4" type="video/mp4">链接不同的视频文件。浏览器将使用第一个可识别的格式
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
==================================================================================
3：Audio(音频)
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
· 语义化标签 (重点)
· header nav section article aside footer
呈现出很好地内容结构、代码结构,
比<div>标签有更加丰富的含义，方便开发与维护
方便搜索引擎能识别页面结构，有利于SEO
遵守W3C标准,有利于合作
· Web 存储 (重点)
· localStorage 长久保存
· sessionStorage 临时保存
客户端存储数据的两个对象为：
localStorage- 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage- 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
保存数据： sessionStorage.setItem(“key”, “value”);
读取数据：sessionStorage.getItem(key)
· 常用元素
· 常用块级元素 block
不常用-----------
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
fieldset - form控制组
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
pre - 格式化文本
·
常用--------------
div- 常用块级容易，也是css layout的主要标签
dl- 定义列表
table- 表格
ul- 非排序列表
form- 交互表单
h1- 大标题
h2- 副标题
h3 -h63级-6级标题
hr- 水平分隔线
ol- 排序表单
p- 段落
· 常用行级元素 inline
不常用----------
abbr - 缩写
acronym - 首字
bdo - bidi override
big - 大字体
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
font - 字体设定(不推荐)
kbd - 定义键盘文本
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
.
常用-----------
a- 锚点
hr- 分割线
b- 粗体(不推荐)
br- 换行
em- 强调
i- 斜体
img- 图片
input- 输入框
label- 表格标签
· link 和 @import 的区别是？
1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4.link支持使用Javascript控制DOM去改变样式；而@import不支持
· 浏览器的内核分别是什么
Trident [
踹等刺] (微软IE内核)，是微软开发的一种排版引擎。
Gecko[该狗] (火狐Firefox内核)，是一套开放源代码的、以C++编写的网页排版引擎。
Presto[破莱斯椭] (欧朋Opera前内核) (已废弃)。
Webkit(苹果Safari内核,谷歌Chrome内核原型,开源)。
· 常见兼容性问题及解决方案
1.清除图片下方出现几像素的空白间隙
img{display:block;}
img{vertical-align:top;}
.
2.不同浏览器的标签默认的外边距和内边距不同
*｛margin:0;padding:0｝
或者仅自己可见功能？
· src 和 href 的区别
src 是引入资源的地址
href 是跳转的url地址
cookie session localStroage sessionStorage 的区别和优点 (重点)
1:
session存储在服务器端， 不是存储在客户端
2:cookie用于和服务器端通信， 而其他不会
2.1:cookie相对于其他2个它有大小限制， 单个不超过4kb，
3:localStorage- 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
4:sessionStorage- 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
url地址输入后，接下来会发生什么
首先从 DNS 解析域名， 获取ip地址，找到服务器， 服务器会根据请求地址返回相关数据， 浏览器获取到数据，再进行页面渲染
什么是标签语义， 有什么作用
即使在没有css的情况下，页面代码也能很好的被阅读理解， 用正确的标签，能够对浏览器和搜索引擎的支持更好， 便于后期的维护。
简述下你对html 语义化的理解 (重点)
1：去掉或者丢失css样式时， 页面也能呈现出清晰易读的结构
2：有利于 SEO 和 搜索引擎的建立良好的沟通
3：方便其他设备的解析
4：便于团队开发，和后期的维护， 语义化更具可读性
网站如何进行性能优化
A： content 内容方面：
1： 减少HTTP请求， 合并文件， css精灵图， 小图使用base64
2：减少DNS 查询， DNS 查询之前浏览器不能从这个主机下载任何文件
3：多余的中间访问， 避免重定向
4：使用Ajax 可缓存
5：非必须组件延迟加载
6：未来所需组件预加载
7：将资源放到不同的域下， 浏览器同时从一个域下下载资源的目录有限。
8：减少iframe和table标签的数量，会影响页面渲染顺序
·
B：Server 服务器请求方面
1：有限使用CDN加载请求
2：对组件使用Gzip进行文件体积压缩
3：Ajax使用 GET 请求
4：避免 src 的img标签
·
C：Cookie 方面
1：减小cookie大小
2：引入资源的域名， 不要包含cookie
·
D：CSS样式方面
1：将css样式表放在页面顶部加载
2：不使用css表达式
·
E：JavaScript 方面
1：将js脚本放在页面顶部
2：将js脚本和css样式，从外部引入
3：减少DOM的操作和访问
4： 合理的设计时间监听器，减少无意义和没必要的事件监听
·
F：图片方面
1：小图标优先使用字体图标
2：页面背景小图，优先设置好精灵图，并使用精灵图提高网站渲染和加载速度
XHTML 和 HTML有什么区别
1: HTML是一种基本的WEB 网页设计语言， XHTML是基于 XML的置标语言
2:XHTML 元素必须被正确的嵌套
3:XHTML元素 必须被正确的关闭
4:标签名必须用小写字母
5:XHTML 文档必须用于根元素
常用块元素， 行内元素，空元素有哪些
1：块级元素：div, ul, li, dl, dt, dd, h1-h6
2：行内元素：a, b, sapn, input, strong, select, label, em, button, textarea
3：空元素：没有内容的标签： br, meta, hr, link, input, img
2：不常问：
浏览器的渲染过程
1：将html 解析为 dom树
2：处理css， 构成层叠样式表 CSSOM
3：将dom树 与CSSOM 合并为渲染树
4：根据 CSSOM 将渲染树的节点布局计算
5：将渲染树节点样式绘制到页面上
注意在渲染的过程中是自上而下的渲染， js会阻塞页面的渲染， 优先等待js执行完成， 如果在渲染的过程中改变了样式，会造成回流渲染
· 前端由哪三层构成， 分别是什么
前端3剑客： html dom结构， css样式渲染 js行为操作
· svg 和canvas 区别
svg 输出的图形都有独立的dom， 是一个独立的矢量图像， 放大缩小也不会失真
canvas 输出的是一整块画布， 放大缩小会失真常见的空元素有哪些
br, hr, img, input, link, meta
label 标签的作用是什么， 是怎么用的
label 标签定义表单控制间的关系， 当用户选择该标签时， 浏览器会自动将焦点转移到和标签相关的表单控件上
请说出 XHTML 和 HTML 的区别
1： 文档顶部的 DOCTYPE 声明不同， XHTML 的 DOCTYPE 顶部声明中明确确定了 XHTML DTD的写法
2：HTML 元素 必须正确嵌套，不能乱
3：属性名必须是小写
4：属性值必须加引号
5：标签必须有结束， 单标签必须使用 "/"来结束
很多网站不常用 table iframe 这2个元素， 为什么
因为浏览器页面渲染的时候，从上至下的， 而table和 iframe 这两个元素会改变这样的渲染规则， 他们是要等待自己元素内容加载完成才整体渲染， 用户体验不好。
请用 HTML 知识，解决seo优化问题
标题 - 概述 - 关键词 被业界称为 seo
1：title 尽量简洁， 写好后就不要再去修改了
2：description 对网页的概述，内容要精简，3次最佳，阅读起来要自然顺畅。
3：kewords关键词，数量控制在3-6个内， 想方设法让主关键词出现在页面中。
xhtml的局限性
1: 语法上更加严格， 放弃了一些语义化不好的标签
2：必须要有 head， body 标签必须闭合
3：一些老的浏览器并不兼容
1553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
