HTML入门(学习方法+概述)

最新推荐文章于 2022-10-24 01:05:23 发布

InnerXuan

最新推荐文章于 2022-10-24 01:05:23 发布

阅读量335

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/Nevermind_goon/article/details/105748125

版权

本文介绍了HTML5的基本概念，包括万维网的起源、HTML5技术合集及其学习方法。强调了正确学习HTML5的方法，如通过阅读权威资料、实践和错误纠正来加深理解。此外，还探讨了VSCode与WebStorm的性能比较，推荐了在线编辑器和HTML5检验工具。最后，详细讲解了HTML5的一些常用标签，如章节标签、全局属性和内容标签。

摘要由CSDN通过智能技术生成

HTML5概述

万维网www

World Wide Web
其实等于 URL + HTTP +HTML

万维网的发明人 Tim Berner-Lee

自己写了第一个浏览器
自己写了第一个服务器
用自己写的浏览器访问了自己写的服务器
发明了WWW,同时发明了HTML,HTTP和URL

内容共享是互联网的本质

我们应该学习那些知识呢？

如何制作出网页
域名知识
HTTP服务器知识
HTML知识

万维网是基于互联网，实现了输入网址，呈现网页的功能

最早的HTML诞生于Tim Berner-Lee 的Html Tag文章

HTML的权威资料

MDN网址

什么是H5?

狭义的H5 : 即最新版本的HTML5
广义的H5: 即HTML5和CSS3其他

HTML5技术合集

新标签，新属性
新的媒体通信技术：WebSockets,WebRTC等
离线存储技术：LocalStorage,断网检测
多媒体技术：视频，音频
图像技术：Canvas,SVG,WebGl
Web增强技术：History API ,全屏
设备相关技术：摄像头.触摸屏
新的样式技术：CSS3的新的Flex.Grid布局方式

正确的学习方法

把所有标签用嘴巴读一遍，了解其内容
全部忘掉，只记住div和span
开始学习CSS
找一个页面，仿写
发现有更合适的标签，就改用更合适的
继续写页面

学习过程

COPY 抄文档，抄老师的代码
RUN 放在自己的机器上运行
Modify加入一点自己的想法，然后重新运行

一旦有一面试官问你一个英文是什么意思，你就直接翻译成英文

HTML的语法结构是怎么样的？

tip:学变态，不学常态

<!DOCTYPE=HTML> 
表名这个是HTML文档
<tag attr=value></tag>
最常见的一种方式
value其实中间是可以加空格的
<tag attr></tag>
比如
<input type="checkbox" checked>
要改为checked="false"其实是无效的
<tag att=value>
  比如link标签

注意点是

标签它不区分大小写
注释 ctrl + /
组合

如何纠错？

1.VSCode 颜色提示
2.WebStorm颜色提示
3.使用HTML5检验器

WebStorm与VSCode性能比较

WebStorm开启项目10秒以上
要求电脑4G内存以上
但是对于大型项目来说WebStorm和VSCode的性能区别不大

如何使用HTML5检验器?

yarn global add node-w3c-validator

node-w3c-validator -i 相对路径

在那里查资料好？

Google关键词后面加MDN
w3school跟W3C没有任何关系
不推荐使用W3Chool有一些是错误的
MDN是一个很多人维护的社区

html5常用标签

介绍一个常用的VSCode 插件

prettier ，当鼠标离开之后，自动格式化

介绍二个强大的在线编辑器

js bin

具有代码分享的功能,ctrl+s之后,点击share，或复制上面的url，就可以分享代码给你的小伙伴。

codesandbox.io

一个美观高大上的代码编辑器,保存后,复制url，同样可以分享代码
且是一个高仿的VSCode,快捷功能齐全

HTML起手式

在VSCode中 !+Tab即可生成代码骨架

<!DOCTYPE html>----------------------- 声明文档类型为HTML
<html lang="en">----------------------------- lang表示language en英文可以改为zh-en

<head>
    <meta charset="UTF-8"> ---------------------------字符编码为utf-8不要更改
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> ------------------------视口标签，不可以缩放，兼容手机
     <meta http-equiv="X-UA-Compatible" content="ie=edge"> --------------------------------使用IE浏览器时候，必须升级到最新版本
    <title>Document</title>---------------------------------标题
</head>

<body>
   
</body>

</html>