05·灵魂前端工程师养成-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万维网的发明 |
---|
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的一篇文章

最原始的HTML:
一共只有18个元素 除了a标签外,其他设计都深受SGMLguid影响 这些元素入金还有11个健在
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> 内容 内容
细节 大小写有区别吗? 需要引号吗? 如何注释? 如何组合?
<!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>
<!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
<!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>
大小写无所谓
<!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校验工具
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

如果某个标签不会如何查询? |
---|

<ruby>
汉 <rp>(</rp><rt>han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

ruby标签是给汉子注音使用的...
相关文章
- 01·灵魂前端工程师养成-安装配置VScode
- html超链接位置怎么改,如何修改HTML超链接样式?
- HTML添加背景图片_html背景图片铺满网页
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- 10年高级工程师用5分钟带你一次性搞懂Kubernetes的设计理念
- 锐捷网络交换机配置命令大全,网络工程师收藏!
- CRUD工程师的福音
- 【黑马程序员pinik名师讲html】HTML很容易忘记?有它我不慌的
- 深入Linux驱动开发:一个工程师的成长之路(linux驱动开发工程师)
- 让Linux灵活运行HTML:简单有效的方法(linux运行html)
- 标签使用MySQL过滤HTML标签(mysql过滤html)
- 招聘Linux软件工程师,助推企业发展(linux软件工程师招聘)
- HTML <html> 标签
- “探秘linux运维工程师的必备技能,助力IT行业就业热度。”(linux运维工程师)
- 文件MySQL 使用之禅 利用HTML文件实现完美保存(mysql保存html)
- 用HTML操作MySQL数据库(html调用mysql)
- 使用MySQL和HTML打造高效的数据驱动网站(mysql与html)
- 物理学家不再吃香?可以转型当 AI 软件工程师呀
- Linux运维工程师: 薪资高涨引进人才(linux运维工程师薪资)
- 「职场攻略」如何撰写一份出色的 Oracle 工程师简历?(oracle工程师简历)
- 攀上SQL Server之巅,成为成功的工程师(sqlserver工程师)
- Linux运维工程师简历模板:突出职业能力(linux运维工程师简历模板)
- HTML与Oracle新的组合引发了新的机遇与挑战(html oracle)