html入门笔记
html 历史
- 1990年左右诞生
- Tim Berners-Lee，李爵士发明的
- 2004年，获得大英帝国爵级司令勋章
- 2017年，获得图灵奖
李居士做了什么
- 自己写了第一个流量只能去
- 自己写了第一个服务器
- 用自己写的浏览器访问了自己写的服务器
- 发明了WWW，同事发明了HTML，HTTP和UEL
WWW是什么
- WWW就是万维网
- WWW=URL+HTTP+HTML
www的直观感受
-
如何使用万维网
输入一个网址
可以看到网页
看不见的部分由HTTP来搞定
如何制作出网页
-
需要的知识
域名知识
http服务器知识
html知识
企图
-
为什么没有css和js
万维网初期就没有css河js
1996年底css才发布第一版本
1995年底javascript才出现
也就是说最开始的页面就是html在裸奔
-
最原始的html
-
最初html只有18个元素
title h1~h6 nextid address base hp1/hp2... a dl/dt/dd isindex ul/li plaintext menu listing dir p
-
-
html 权威资料
google搜索MDNhtml5
HTML5 技术集
-
HTML5的两个含义
最新版本的html语言，包含旧版的标签和新增的32个标签
html和他的朋友们（包括css3等）
-
HTML5技术集合
新标签，新属性。
新的通信技术：WebSockets，WebRTC等。
离线存储技术：LocalStorage，断网检测。
多媒体技术：视频，音频。
图像技术：Canvas，SVG，WebGL。
Web增强技术：History API，全屏。
设备相关的技术：摄像头，触摸屏幕。
新的样式技术：css3新的Flex，Grid布局。
-
HTML的语法
<!DOCTYO HTML> <tag attr=value>123</tag> // 细节 大小写区别 引号 如何注释 如何组合 -
HTML排错
如何知道html是否正确 看VSCode的颜色提示 看WEbStorm的颜色提示 使用HTML5验证器（在线/npm工具）HTML的标准制定者W3C由李爵士创办。
html学习前的准备
-
vscode推荐插件：Prettier更好的本地格式化工具
-
JSBin:网址js.jirengu.com
-
代码沙河：网址codesandbox.io
HTML 起手式
<!DOCTYPE html>
<html lang="CN-ZH">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML练习</title>
</head>
<body>
<h1>我是一个标题</h1>
</body>
</html>
章节标签
-
表示文章、书的层级
章节 h1~h6 章节 section 文章 article 段落 p 头部 header 脚部 footer 主要内容 aside 旁支内容 aside 划分 div
全局属性
-
所有标签都有的属性
clss 类名 contenteditable 可编辑的 hidden 隐藏 id 唯一的（可以通过js直接获取元素） style 样式 tabindex 正值，表示元素是可聚焦的 title 表示咨询信息文本
默认样式
-
为什么有默认样式
因为html被发明的实收，css还没有
-
怎么看默认样式
Chrome开发者工具
Elements > Styles > user agent stylesheet
-
CSS reset
默认样式已经不符合我们的需求
-
常见的 CSS reset
用大厂的打开开发和工具，查看类似的代码复制
内容标签
| ol+li | 有序列表 |
|---|---|
| ul+li | 无序列表 |
| dl+dt+dd | 描述列表 |
| pre | 保留空格 |
| hr | 分割线 |
| br | 换行 |
| a | 链接 |
| em | 强调（语气强点） |
| strong | 加粗 |
| code | 代码 |
| q | |
安装工具
yarn global add http—server
使用 http server -c -1
yarn global add parcel
html标签
-
a标签
属性
href（要跳转的链接）
target（指定怎样打开）
download（定义下载的地址）
rel = noopener
作用
跳转外部页面
跳转内部锚点
跳转到邮箱电话等
-
a标签的href的取值
网址
//google.com
路径
/a/b/b 以及a/b/c
index.html以及./index.htmll
伪协议
javascript:代码;
matlto：邮箱
tel：手机号
-
a标签的target的取值
内置名字
-blank（新的页面打开）
-top（顶部打开）
-parent（父级窗口打开）
-self（当前页面打开）
程毓媛命名
window的name（锚点链接）
iframe的nae（iframe内打开）
-
a标签download属性
作用
不是打开页面，而是下载页面
问题
不是所有浏览器都支持，尤其手机浏览器不支持
iframe标签
- 内嵌窗口已经很少用了，还有些老的系统在用
table标签（表格）
-
table标签相关的标签
table：表格
thead：表头
tbody：表体
tfoot：表底
tr：行
td：每项
th：标题
相关的样式
table-layout（auto、fixed）
border-collapse（合并表格：collapse）
border-spancing（表格间距）
img标签（图片）
-
作用
发出get请求，展示一张图片
-
属性
alt (图片加载失败展示文字)
height（高）
width（宽）
src（图片的地址路径0
-
事件
onloab:图片加载成功执行
onerror：图片加载失败执行
-
响应式
max-width：100%（图片的最大宽度）form表单标签
-
作用
发git或post请求，然后刷新页面
-
属性
active （要提交的那个网址）
autocomplete：（是否补充）
method（使用什么请求）
target（提交到那个页面）
-
事件
onsubmit : 提交时触发
input标签
-
作用
让用户输入内容
-
属性typpe
button 定义可点击按钮 checkbox 定义复选框（要用同一个name） email 定义邮箱字段 file 定义输入字段和 "浏览"按钮，供文件上传 hidden 定义隐藏的输入字段 number 定义数字字段 password 定义密码字段 radio 定义单选按钮（要用同一个name） search 定义用于搜索的文本字段 submit 定义提交按钮 tel 定义用于电话号码的文本字段 text 定义单行的输入字段 -
其他属性
name 规定 input 元素的名称 autofocus 规定输入字段在页面加载时是否获得焦点 checked 规定当页面加载时是否预先选择该 input 元素 disabled 规定当页面加载时是否禁用该 input 元素 maxlength 规定文本字段中允许的最大字符数 pattern 规定输入字段的值的模式或格式。 value 规定按钮上的文本 placeholder 规定帮助用户填写输入字段的提示
-
-
事件
onchange:变化是触发
onfocus：获取焦点是触发
onblur：失去焦点是触发
-
验证器（html5新增功能）
其他输入标签
- select+option
- textarea
- label
注意事项
一般不监听input的click事件
from里面input要有ame属性
form里面发一个typ=submit才能触发
其他标签
video（视频）
audio（音频）
canvas（画布）
svg（图像）
textarea（文本输入框）
elect标签（选择）
<select>//选择
<option value="星期一">星期一</option>
<option value="星期二">星期二</option>
</select>
注意事项
- 这些标签的兼容性一定要看文档
mate标签的完整写法
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
