1. 熟记各大主流浏览器内核版本面试常问哦
浏览器名称 | 内核 |
---|---|
opera欧朋 | 最初是自己的Presto内核,后谷歌Webkit 到Blink |
Firefox火狐 | Gecko内核俗称Firefox内核 |
Chrome谷歌 | 统称为Chromium或Blink内核 |
Safari苹果 | Webkit不受IE、Firefox内核约束 |
IE浏览器 | Trident内核 |
360浏览器 | IE+Chrome双内核 |
2. 手写HTML基本框架结构虽有快捷键,但是还是得记住哈
<!DOCTYPE html>
<html lang="en">// 设置文档语言
<head>
<meta charset="utf-8">//设置编码方式
<title>标题</title>
</head>
<body>
身体部分
</body>
</html>
3.熟练使用HTML常用标签前端必须掌握
标签(带尖括号哈) | 用法 |
---|---|
DOCTYPE html | 指定文档类型 |
html | 文档开始标签 |
head | 文档头部内容写里面 |
meta元数据SEO优化 | 定义页面说明,关键字,SEO等 |
title | 文档的标题,浏览器标签卡上的内容 |
body | 文档的主要内容放这里面 |
h1~h6 | 标题标签,字体从大到小,独占一行(块元素) |
p | 段落标签,独占一行(块元素) |
span | 行内标签,可一行多个,根据内容撑开标签大小(行内元素) |
a | 超链接标签,页面的跳转,属性常用href、target |
img | 图片标签,属性常用src(块元素) |
div | 盒模型,独占一行(块元素) |
hr | 水平线,属性noshade |
br | 换行 |
table | 表格标签,内含行、列 |
tr | 行,属性常用align水平对齐、valign垂直对齐 |
td | 列 |
form | 表单 |
input | 输入框组件 |
ol | 有序列表 |
ul | 无序列表 |
li | 列表内容 |
小小总结:
①常见块元素、行内元素、行元素点我
4. meta
标签的介绍
<head>
<meta charset="utf-8"> 设置编码字符集
<meta name="keywords" content="HTML5,CSS3,前端,个人网站">
<meta name="refresh" content="3;url=https://www.baidu.com">
</head>
name
属性:指定数据的名称,例如:keywords关键词,refresh重定向等content
属性:指定的数据内容,前面name属性写的是什么功能,后面写相关的内容- 注意
refresh
重定向双引号的使用,以及该处content
是指延迟时间,单位S
5. 超链接及其简单使用
超链接:可以跳转到指定的地点,或者当前页面的某个位置,用作页面的锚点;它是一个行内元素,a标签里面可以嵌套除a自身外的任何元素。
<a href="https://www.baidu.com" target="_blank"></a> 简单的在一个新页面打开这个链接
<a href="#p3">去到ID为P3的段落</a> 当点击该超链接时,能定位到段落N位置
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
·
·
·
<p id="p3">段落N</p>
target
常用属性值:_self
当前页面打开链接 _blank
新窗口打开链接
6. 音视频标签
引入一个外部文件,属性:controls是否允许用户控制播放 autoplay自动播放(如果设置此属性,大部分浏览器初始化是不会自动播放,播放过后一次就会) loop循环播放
方法一:
<audio src="" controls autoplay></audio> 该方法不能根据浏览器来作出提示
方法二:
<audio controls>
对不起,您的浏览器不支持播放音频
<source src="">
<source src="">
<source src="">
</audio>
方法二中可以放多个source源文件,可以放相同文件的不同格式,这样可以根据浏览器支持性来自动选择,如果都没选上,就会出现上面提示性文字。
7.图片及其相对路径
常见图片格式的区别:
jepg
:支持颜色比较丰富,不支持透明效果、不支持动图;一般用来显示照片
gif
:支持颜色比较少,支持简单透明、支持动图;颜色单一的图片,动图
png
:支持颜色丰富、支持复杂透明、不支持动图、专为网页而生
webp
:谷歌推出一种图片格式,具有以上文件的有点,缺点:兼容性不好
<img src="./xxx.png" alt="这是个图片"> alt是对图片的描述,搜索引擎根据alt中的内容来识别图片,不写会不被搜索引擎识别
…/上一层目录
./当前文件目录
8.内联框架
内联框架,用于向当前页面引入一个其他页面(视频也可以哦);frameborder:内联框架的边框 0 无 1 有
<iframe src = "" frameborder="1" width="800" height="600"></iframe>
9. 音视频标签
引入一个外部文件,属性:controls是否允许用户控制播放 autoplay自动播放(如果设置此属性,大部分浏览器初始化是不会自动播放,播放过后一次就会) loop循环播放
方法一:
<audio src="" controls autoplay></audio> 该方法不能根据浏览器来作出提示
方法二:
<audio controls>
对不起,您的浏览器不支持播放音频
<source src="">
<source src="">
<source src="">
</audio>
方法二中可以放多个source源文件,可以放相同文件的不同格式,这样可以根据浏览器支持性来自动选择,如果都没选上,就会出现上面提示性文字。
10. 标签语义化
语义化是指在书写网页过程中,根据标签内的内容功能来使用正确的标签;例如:头部标签就用
<head></head>
,导航栏就用<nav></nav>
等;语义化标签的使用能让提升网站的SEO
功能。
注意:
- 网页中一般只会有一个
h1
标签,页面中独占一行的称为块元素
(block),不会独占一行的称为内联元素
(inline)块元素
一般用来对网页进行布局设计,行内元素
则是用来包裹文字的- 一般而言,一般情况下会在
块元素
下放行内元素
,反之不能;块元素中可以放任何标签,P标签中不能放任何的块元素。(如果放了浏览器会自动调整,会自动生成两对P标签)
(错误示范)
<p>
<h1>不能这么放哦</h1>
</p>
(浏览器自动更正后,不要怀疑代码有问题哈,就是这样的)
<p></p>
<h1>不能这么放哦</h1>
<p></p>
11. 结构化语义标签
常用来对页面进行布局的语义标签,常见的有以下几种
标签 | 作用 |
---|---|
header | 表示网页头部,可用于网页的头部部分 |
main | 表示网页的主体,一个页面只有一个 |
footer | 网页的底部,可用于网页的版权之类的 |
nav | 表示网页中的导航 |
aside | 表示和网页相关的内容,侧边栏 |
article | 表示一个独立的文章 |
div | 没有语义,表示一个区块,主要的布局标签 |
section | 表示一个独立的区块,上面标签不能表示时用它 |
span | 行内元素,一般用于网页中选中的文字 |
12. 系统掌握以下标签及标签属性
1.table标签 (width宽度属性、align对齐方式、bordercolor边框颜色、cellspacing单元格与单元格间距、cellpadding单元格与内容间距)
<table border="1" width="50%" align="center" bordercolor="green" bgcolor="pink" cellspacing="0" cellpadding="10">
<!-- border控制外边框 widht 百分比(相对于父元素) px-->
<tr>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>99</td>
<td>100</td>
</tr>
</table>
<table border="1" align="center" width="50%" cellspacing="10" cellpadding="10">
<tr align="center" valign="top" height="100">
<td height="200">11</td>
<td>22</td>
</tr>
<!-- td如果一个单元格设置了宽度,影响的是一列宽度 -->
<!-- td如果一个单元格设置了高度,影响的是一行宽度 -->
<tr align="center" valign="top" height="100px">
<td width="99">11</td>
<td bgcolor="pink" align="right" valign="bottom">22</td>
</tr>
</table>
- form表单 (width宽度属性、align对齐方式、bordercolor边框颜色、input组件重点,action提交接口目标属性,method提交方式)
<form action="" method="post">
//想要正确的提交表单数据到后台,name属性一定不能少
用户信息:<input type="text" placeholder="请输入您的名称" name="username">
<br/>
密码:<input type="password" placeholder="请输入您的密码" name="psd">
<br/>
<input type="submit" value="Logo in">
<!-- 提交信息到action指定的地址 -->
<button type="submit">提交</button>
<input type="reset" value="重置">
</form>
13. 掌握Get和Post提交数据的区别(重点)
- get是从服务器上获取数据 post是向服务器传送数据
- get是提交能在地址栏看到明文,而post则是看不到
- 对于get方式,服务器端用Request.QueryString获取变量的值 对于post方式,服务器端用Request.Form获取提交的数据
- get传送的数据量较小,不能大于2kb,post传输量大,一般默认为不受限制,但理论上上最量为80k(IIS4)
14.列表
HTML中列表分为:有序列表(ol) 无序列表(ul) 自定义列表(dl)
不同列表之间可以相互嵌套
(有序列表)
<ol>
<li>橘子</li>
<li>甘蔗</li>
</ol>
(无序列表)
<ul>
<li>行为</li>
<li>表现</li>
</ul>
(自定义列表)
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构,结构用来规定网页那里是标题</dd>
<dd>这是一个二级菜单</dd>
</dl>
运行效果如下图:
15.实现两个重要案例
案例一(table表格案例):
<table border="1" cellspacing="0" align="center" width="356px">
<tr height="25px">
<td width="70px" >联系方式</td>
<td colspan="3" ></td>
<td rowspan="3">靓照</td>
</tr>
<tr height="25px">
<td width="70px">家庭住址</td>
<td colspan="3"></td>
</tr>
<tr height="25px">
<td width="70px">教育经历</td>
<td colspan="2" ></td>
<td></td>
</tr>
</table>
案例二(form表单案例):
<form action="" method="post">
姓名:<input type="text" name="username">
密码:<input type="password" name="psd">
<input type="reset" value="重置">
</form>