05·灵魂前端工程师养成-HTML入门

2022-10-31 17:56:10 浏览数 (1)
  • WWW的历史

  • HTML语法

-曾老湿, 江湖人称曾老大。 -笔者QQ：133411023、253097001 -笔者交流群：198571640 -笔者微信：z133411023

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

WWW的历史

WWW万维网的发明

代码语言：javascript复制
WWW = URL   HTTP   HTML

WWW就是万维网：World Wide Web 中文直译：像世界那么大的网

1.WWW是谁发明的？

HTML之父：Tim Berners-Lee

1）1990年左右诞生 2004年，英女皇他办法大英帝国爵级司令勋章 2017年，被颁发图灵奖

2）李爵士做了啥？ 自己写了一个浏览器 自己写了第一个服务器 用自己写的浏览器访问了自己写的服务器 发明了WWW，同事发明了HTML、HTTP和URL

HTML语法

如何制作网页

1.需要知识

  • 域名知识
  • HTTP服务器知识
  • HTML知识
  • 其他

2.为什么没有CSS和JS

  • 万维网初期就没有CSS和JS
  • 1996年底CSS才发布第一个版本
  • 1995年底JavaScript才出现
  • 也就是说最开始的网页就是 HTML 在裸奔

HTML历史

HTML诞生于Tim Berners-Lee的一篇文章

请FQ访问



最原始的HTML：

一共只有18个元素 除了a标签外，其他设计都深受SGMLguid影响 这些元素入金还有11个健在

代码语言：javascript复制
title
nextid
base
a
isindex
plaintext
listiong
p
h1~h6
address
hp1
hp2
dl
dt
dd
ul
li
menu
dir

现如今，最新版HTML有110个标签

HTML权威资料

在google上搜索：MDN HTML





HTML5技术集

HTML5有两个含义

最新版本的HTML语言，含旧标签和32个新标签 HTML5和他的朋友们（包括CSS3等）

HTML5技术集合:

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

注意：H5 跟 HTML5不是一个东西

HTML的语法

标签 <!DOCTYPE html> 内容 内容

细节 大小写有区别吗？ 需要引号吗？ 如何注释？ 如何组合？

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
#此处语法，加引号和不加引号没有区别
    <div id=xxx></div>
    <div id="xxx"></div>
</body>
</html>
代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
#此处语法，只要写了checked就一定是勾选的，不管后面是否加='false'
    <input type="checkbox" checked>
    <input type="checkbox" checked='false'>

</body>

</html>







新语法，只要写了checked就会勾选，不管是否等于 false

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
#下面语法，直接闭合，第一行，是旧版本XML的语法，新版本语法，支持直接闭合，不用加/
    <link rel='stylesheet' herf='xxx.css'/>
    <link rel='stylesheet' herf='xxx.css' >

</body>

</html>

大小写无所谓

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <DIV>lalala</DIV>
    <div>lalala</div>
</body>

</html>

HTML排错

看VScode中颜色报错 看WebStorm中的报错线 使用HTML5验证器(在线/npm工具)







在命令行使用w3c校验工具

代码语言：javascript复制
MacBook-Pro:demo-1 driverzeng$ sudo npm i -g node-w3c-validator

MacBook-Pro:demo-1 driverzeng$ node-w3c-validator --version
1.6.0

#注意，执行该命令，需要安装jdk
MacBook-Pro:demo-1 driverzeng$ node-w3c-validator -i index.html



如果某个标签不会如何查询？



代码语言：javascript复制
<ruby>
  汉 <rp>(</rp><rt>han</rt><rp>)</rp>
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>



ruby标签是给汉子注音使用的...

html html5 运维 自动化 css

0 人点赞