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>

HTML5基础知识(全面)相关推荐

html5基础知识文档,HTML5基础知识（1）
原标题:HTML5基础知识(1) html5是万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力, ...
HTML5 基础知识
HTML5 基础知识什么是 HTML? HTML 是一种超文本标记语言,"超文本"就是指页面内可以包含图片.链接.深职音乐.视频.程序等非文字元素 HTML 不是一种编程语言 H ...
html5哪个属性规定输入字段是必填的,HTML5基础知识习题及答案
原标题:HTML5基础知识习题及答案 1. HTML5 之前的HTML版本是什么? 答: HTML 4.01 2. HTML5 的正确doctype是? 答: 3. 在 HTML5 中,哪个元素用于组 ...
html5基础知识，期末复习大全
目录 1.1 Web系统体系结构 1.C/S(即Client/Server)结构 1.2 浏览器 1.排版引擎(Rendering Engine) 2.Javascript引擎 1.3 Web相关概 ...
Html5基础知识笔记
学习笔记,供个人快速查阅使用!! 公开分享,不喜勿喷! Html5基础介绍 h1标签 <h1>Hello World</h1> p标签如果想在网页上显示文章,这时就需要< ...
HTML5基础知识学习笔记
1.Html5基础讲解 1.1HTML5基础标签: head:头标签,一般会将一些网页的基本配置和文件引用在head中设置: body:内容标签,里面是整个网页要展示内容部分: 1.2HTML5标题: ...
HTML5基础知识汇总
HTML是Hypertext Markup Language的缩写,中文翻译为:超文本标记语言 HTML文档结构和基本语法 HTML5基本语法扩展名.html/.htm 内容类型(ContentTy ...
超详细、超清楚的HTML5基础知识
本文从最基本HTML5知识说起,让各位看官老爷能够从零开始学习!!! 不渴望能够一跃千里,只希望每天能够前进一步基本知识 web前端三大技术: (1)html:结构 (2)css:样式 (3 ...
HTML5 基础知识（四）
关于web图像: 1.格式与下载速度:当前web上应用最广泛的三种格式gif.png.jpeg. JPEG格式适用于彩色照片,因为它包含大量的颜色并进行合理的压缩,采用这种格式保存的文件相对较小,全彩 ...
HTML5 基础知识（二）
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8" ...

HTML5基础知识(全面)

1. 熟记各大主流浏览器内核版本_{面试常问哦}

2. 手写HTML基本框架结构_{虽有快捷键，但是还是得记住哈}

3.熟练使用HTML常用标签_{前端必须掌握}

4. `meta`标签的介绍

5. 超链接及其简单使用

6. 音视频标签

7.图片及其相对路径

8.内联框架

9. 音视频标签

10. 标签语义化

11. 结构化语义标签

12. 系统掌握以下标签及标签属性

13. 掌握Get和Post提交数据的区别_(重点)

14.列表

15.实现两个重要案例

HTML5基础知识(全面)相关推荐

最新文章

热门文章

HTML5基础知识(全面)

1. 熟记各大主流浏览器内核版本面试常问哦

2. 手写HTML基本框架结构虽有快捷键，但是还是得记住哈

3.熟练使用HTML常用标签前端必须掌握

4. meta标签的介绍

5. 超链接及其简单使用

6. 音视频标签

7.图片及其相对路径

8.内联框架

9. 音视频标签

10. 标签语义化

11. 结构化语义标签

12. 系统掌握以下标签及标签属性

13. 掌握Get和Post提交数据的区别(重点)

14.列表

15.实现两个重要案例

HTML5基础知识(全面)相关推荐

最新文章

热门文章

1. 熟记各大主流浏览器内核版本_{面试常问哦}

2. 手写HTML基本框架结构_{虽有快捷键，但是还是得记住哈}

3.熟练使用HTML常用标签_{前端必须掌握}

4. `meta`标签的介绍

13. 掌握Get和Post提交数据的区别_(重点)