HTML5前端基础知识学习

探长爆料

于 2020-10-18 15:48:27 发布

阅读量454

点赞数 2

分类专栏：前端开发基础与后端文章标签： html css3 javascript

本文链接：https://blog.csdn.net/qq_42663223/article/details/109145485

版权

前端开发基础与后端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5前端基础知识学习

1.学习准备

Web前端应用需要浏览器作为载体，目前可供选择的浏览器类型非常多，选择款合适的浏览器，对于体验HTMLS的效果将会有很大的帮助。另外，选择得心应手的开发工具，也能够更好地掌握HTMLS的开发技巧，提高开发实际效果。

2.选择合适的浏览器

IE浏览器应该是所以用户最熟悉的一款浏览器，它伴随着Windows的成长也在不断地更新换代，除了IE浏览器以外，我们可能还听说或使用过Google Chrome 浏览器、微软Microsoft Edge、Mozilla Firefox 浏览器、Opera浏览器、Maxthon 浏览器、百度浏览器、QQ浏览器等，这么多的浏览器，到底哪一款适合我们学习HTML5呢?本人认为，各款浏览器都有自己的优点和缺点，我们选择的依据是哪款浏览器对HTML5支持的更好，我们就选择哪款。根据笔者的经验和目前浏览器的版本，建议大家选择IE 11或Google Chrome，以Google Chrome浏览器为大家呈现HTML5的各种效果。

3.选择合适的开发工具

对于简单的HTML网页，使用记事本就可以完成页面布局和显示，对于稍复杂的一些HTML网页，使用Notepad或Editplus也可以满足需要，但是对于稍大一些的Web项目而言，使用这些工具就好比钻木取火，虽然通过精湛的技术和细致的编码也能完成任务，但是效率却非常低。IDE (IntegratedDevelopment Environment)集成开发环境是专业的软件项目开发工具，根据开发语言的不同，IDE开发工具也有很多种。对于HTML5而言，可供选择的开发工具有HBuilder X、Visual Studio Code、Visual Studio 2019、Adobe ColdFusion 10、Sencha Architect 2、Sencha Touch 2、Aojo FoundationMaqetta、JetBrains WebStorm 4.0、Google Web Toolkit等，这些开发工具都致力于为用户提供方便、快捷的开发模式，提高工作效率。我将以Visual Studio Code或HBuilder X为开发工具，详细讲解HTML5。

4.认识HTML5

1.字符编码
为了告诉浏览器应该使用哪种编码，在对文本进行存储或通过通信网络进行传递。在HTML文档中，使用元素指点字符编码，使用HTML4中，其形式如下:`

<meta http-equiv="Content-Type" content="text/htmiicharset=utff-8">`

而在HTML5中，直接使用charset属性即可指定字符编码，其形式如下:`

<meta charset="utf-8">`

2.DOCTYOPE文档类型
DOCTYPE文档类型是种标准通用标记语言的文档类型声明，在HTML 文档中，用于高速浏览器应该使用哪种文档类型来解析HTML文档。
在HTML4中，DOCTYPE 文档类型的语法如下:

<!DOCTYFE HTML PUBLIC"-/W3C//DTD HTML4.01 Transtitional//EN""http://www.w3.org/TR/html4/0020loose.dtd">

在HTML5中，DOCTYOPE文档类型的语法如下:

<!DOCTYOPE html>

5.HTML基础文档骨架

<!DOCTYPE html>				 文档类型说明
<html lang="en">
<head>						
    <meta charset="UTF-8">   字符编码
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>Document</title>  标题
</head>
<body>
 		内容编辑区
</body>
</html>

6.HTML5基础标签

1.块元素：能够设置宽高并且独自站一行

<div></div>
<p></p>  定义段落
<h1></h1> h1是最大标题最小只有h6没有h7
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>标签

2.行元素：不能够设置宽高不独自站一行

<span></span>
<sub></sub>
<sup></sup>
<em></em>
<strong></strong>

3.单标签

<br>  换行不允许写成<br></br>
<hr>  横线

4.特殊标签

&lt;小于
&gt;大于
&quot;引号
&bnsp;空格

5.有序列表

<ol></ol>
<li></li>

6.无需列表

<ul></ul>
<dl></dl>

7.定义列表

<dl></dl>
<dt></dt>
<dd></dd>

小杨杨学长

探长爆料

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
HTML5前端基础知识学习

HTML5前端基础知识学习1.学习准备Web前端应用需要浏览器作为载体，目前可供选择的浏览器类型非常多，选择款合适的浏览器，对于体验HTMLS的效果将会有很大的帮助。另外，选择得心应手的开发工具，也能够更好地掌握HTMLS的开发技巧，提高开发实际效果。2.选择合适的浏览器IE浏览器应该是所以用户最熟悉的一款浏览器，它伴随着Windows的成长也在不断地更新换代，除了IE浏览器以外，我们可能还听说或使用过Google Chrome 浏览器、微软Microsoft Edge、Mozilla Firef
复制链接

扫一扫