HTML概览
一.HTML5概述
WWW的直观感受,如何使用万维网:你输入网址,看到网页,看不见的部分由HTTP搞定。
李爵士做了啥?
自己写了第一个浏览器,第一个服务器,用自己写的浏览器访问了自己写的服务器。发明了WWW,同时发明了HTML HTTP和URL。
李爵士这么做有什么意义?
让每个人输入网址就能看到网页。没有网址就发明URL,没有网页就发明HTML,为了让系统更完善发明了HTTP。
万维网与互联网的关系
万维网是基于互联网实现的,输入地址就能看到网页的一个网络。
制作网页需要的知识: 域名知识 + HTTP服务器知识 + HTML知识 + 其它
二.HTML5技术集
html5分狭义Html5和 广义Html5
1.狭义指 Html5新增的+旧的,大概 110 个标签。
核心标签
元数据:meta
章节:section nav artical aside header footer main
内容层次:ol+li ul+li dl+dt+dd
文字:a
嵌入内容:image video canvas svg
表格:table tbody thead tfoot tr td th
表单:form label input button select option textarea
2.广义标签包括 Html5和其它技术(包括CSS 3和javascript等)
三. HTML的语法
标签
<!DOCTYPE html> //文档类型
<tag attr=value>内容</tag> //属性值加引号的规则
<tag attr>内容</tag> //没有值的属性
<tag attr=value> //直接闭合
细节
大小写有区别吗?一般小写
要加引号吗?有特殊字符就加,没有就不加。
如何注释?<!- - - ->
如何组合?
解析标签语法:
1.<tag attr=value>内容</tag>
属性值
id=xxx
参数加 单/双引号和 无引号都是对的。
属性值加引号的规则与命令行一致。有特殊字符就加,没有就不加。
2.<tag attr>内容</tag>
没有等于号,没有值的属性,布尔属性(只有真和假)。
例子:
<input type="checkbox" checked="false"> //运行结果为被勾选状态☑️. 新版语法不支持,只要写了checked那不管是true还是false结果都是checked。
不过要注意不是所有的语法都这样。
3.<tag attr=value>
语法:直接闭合
例子:<link href="xxx.css">
由于html有超强纠错功能有/会自动纠错,最新版规范写法是不加/
四.HTML排错
如何知道html是否正确? 在线/npm
1‘.W3C提供了个在线工具
选择“Validate by Dtrect Input”,粘贴代码点击按钮“Check”
全局安装
yarn global add node-w3c-validator
node-w3c-validator --version
使用
打开vscode新建终端运行 node-w3c-validator -i + 路径
代码:node-w3c-validator -i index.html
体系化学习
1.学一门语言必须学会什么?
(1)语法(怎么写代码)
(2)如何调试(怎么知道自己代码写错了)
(3)在哪查资料(其实就是为了抄代码)
(4)标准制定者是谁(找正版文档)
2.如何学? -CRM法
copy 抄
run 放在自己的机器上运行成功
modify 改变,加入自己的想法,然后重新运行