HTML学习笔记
1990年李爵士发明了WWW(万维网)= URL、HTML、HTTP。
万维网是基于互联网实现的输入地址就能访问网页的技术。
CRM学习法
copy -- 抄文档、抄别人
run -- 跑起来、
Modify -- 加入自己的想法,然后再跑起来
HTML的语法
标签语法
<!DOCTYPE html> //文档类型
<tag attr=value>内容</tag>
<tag attr>内容</tag>
<tag attr=value>
<!DOCTYPE html> 文档类型
<html lang="en"> html标签,可以把lang改成zh-CN
<head>
<meta charset="UTF-8"> 文件字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 告诉IE使用最新内核
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 禁用缩放 兼容手机
<title>Document</title>
</head>
<body>
</body>
</html>
章节标签
表示文章的层级
标题标签 h1~h6、章节标签 section、文章标签 article、段落标签 p、头部标签 header、底部标签 footer、主要内容 main、
旁支标签 aside、划分 div
全局属性:所有标签都有的属性
class、contenteditable、hidden、id、style、tabindex、title
id可能并非唯一,不到万不得已不用id,因为id不报错。
默认样式:
Elements -> Style -> user agent stylesheet(浏览器)
CSS reset 默认样式已经不符合需求了。
常见的CSS reset,可以选择进入大厂首页,Chrome开发者工具,找类似代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
input,
button {
font-family: inherit;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
内容标签:
ol + li(有序列表)、ul + li(无序列表)、 dl + dt + dd(description list) 、pre(当需要保留空格、table时使用)、hr(分割线)、br(换行)、a(超链接)、em(强调)、strong(重要)、code(显示代码)、quote(引用标签)、blockquote(块级引用元素)
HTML重点标签
a标签
属性:href、target、download、rel=noopener
作用:跳转外部页面、跳转内部锚点、跳转到邮箱或电话等
yarn global add http-server
http-server . -c-1 预览网页
a的href的取值
网址:https://google.com 、http://google.com、//google.com
路径:/a/b/c 以及 a/b/c、index.html 以及 ./index.html
伪协议:javascript:代码;(javascript:;空的伪协议)、mailto:邮箱、tel:手机号、id:href=#XXX
a的target的取值
_blank(在空白页面打开)、_top(在顶级窗口打开)、_parent(在当前链接的上一层打开)、_self(默认值,在当前页面打开)
target="xxxx"给窗口命名。
a的download:作用不是打开页面,而是下载页面(但不是所有浏览器的都支持)。
iframe标签:内嵌窗口,以及很少使用了。
table标签
<tr></tr> //table row
table相关标签:table、thead、tbody、tfoot、tr、td、th、
相关的样式:table-layout、border-collapse、border-spacing
img标签(永远不要让图片变形)
作用:发出get请求,展示一张图片
属性:alt(替换)、height、width、src
事件:onload、onerror
响应式:max-width: 100%
form标签
作用:发get或post请求,然后刷新页面
属性:action、autocomplete、method、target
事件:onsubmit
input标签
作用:让用户输入内容
属性:类型 type:button、checkbox、email、file、hidden、number、password、radio、search、submit、tel、text
其他 name、autofocus、checked、disabled、maxlength、pattern、value、placeholder
事件:onchange、onfocus、onblur
验证器:HTML5新增功能 required
其他的输入标签:textarea多行文本,select+option下拉菜单。label(表示用户界面中某个元素的说明。)
注意事项:一般不监听input的click事件,form里面的input要有name,form里面要放一个type=submit才能触发submit事件
其他标签:video、audio、canvas、svg 这些标签有一定兼容性问题