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

2019-05-01 分类:HTML, 前端开发 阅读(84) 评论(0)

-曾老湿, 江湖人称曾老大。
-笔者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的一篇文章

请FQ访问

最原始的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布局方式

注意:H5HTML5不是一个东西


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标签是给汉子注音使用的...

关于 曾老湿
我只是一个躲在角落里瑟瑟发抖的小运维,随时准备给大佬端茶递水。
WeChat:z133411023
QQ:133411023
欢迎新朋友你的到来!
还没有人抢沙发呢~
昵称
邮箱
网站
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册