web标准：structure结构 presentaion表现 behavior行为
web标准提出的最佳体验方案：结构样式行为相分离——结构写到html文件 表现写到css文件 行为写到JavaScript文件中。
结构更加重要。
HTML标签
? ? ? ? HTML的语法规范：
? ? ? ? 1 标签都应该在<>中，大部分情况下都是成对存在的（双标签）。
e.g. <html>开始标签 </html>结束标签? ? ? ? 单标签（很少）
e.g. <br /> ‘/’ 表示结束，中间含有空格? ? ? ? 2 标签关系
? ? ? ? 双标签关系分为包含关系和并列关系
包含关系e.g.
<head>
<title></title>
</head>并列关系e.g.
<head></head>
<body></body>? ? ? ? 3 基本结构标签（骨架标签）
? ? ? ? ?html页面也称html文档，后缀名必须是html或htm。
????????
<html>
<head>
<title>第一个页面</title>
</head>
<body>
键盘敲烂，工资过万
</body>
</html>? ? ? ? ?4 开发工具
? ? ? ? visual studio code 即VS Code
? ? ? ? vscode工具生成骨架标签新增代码
? ? ? ? ? ? ? ? 4.1 <!DOCTYPE>文档类型声明，告诉浏览器用哪种HTML版本来显示网页。
? ? ? ? ? ? ? ? ? ? ? ? 写至整个页面的第一句，是一个声明标签，不是HTML标签。此处为html5的意思。
? ? ? ? ? ? ? ? 4.2 lang语言种类
? ? ? ? ? ? ? ? ? ? ? ? en英文网页
? ? ? ? ? ? ? ? ? ? ? ? zn-CN中文网页，可以在英文中写中文，也可以在中文中写英文。
<html lang="zh-CN">? ? ? ? ? ? ? ? 4.3 字符集：识别和存储各种文字，一定要写不然会出现乱码
<meta charset="UTF-8" /> 万国码? ? ? ? 5 常用标签
? ? ????????? ? 5.1 标签语义：标签的含义
? ? ? ? ????????5.2 标题标签：<h1>-<h6>
<h1> 我是一级标题 </h1>
<h2> 我是二级标题 </h2> h为head缩写? ? ? ? ? ? ? ? 5.3 段落标签和换行标签
<p> 我是一个段落标签 </p>
<br /> 换行标签
? ? ? ? ? ? ? ? 5.4 文本格式化标签：文字加粗，斜体，下划线等效果。
? ? ? ? ? ? ? ? 5.5 <div>和<span>标签
? ? ? ? ? ? ? ????????? 没有语义，只用来装内容（图片文字等等），用来布局。
? ? ? ? ? ? ? ? ????????<div>一行只能放一个????????<span>一行可以放多个
? ? ? ? ? ? ? ? 5.6 图像标签和路径
<img src="img.jpg" />
//src是img标签的必须属性，说明了图片文件路径和文件名
<img src="img.jpg" alt="图片显示不出来" />
//alt:图片显示不出来的时候用文字代替
<img src="img.jpg" title="图片1" />
//title:鼠标放置在图片上的文字提示
<img src="img.jpg" width="500" />
//width:设置宽度,高度等比例缩放
<img src="img.jpg" height="100" />
//height:设置高度，宽度等比例缩放
<img src="img.jpg" border="15" />
//border:加边框
? ? ? ? 目录文件夹和根目录：存放所需素材的普通文件夹，打开目录文件夹的第一层就是根目录。
? ? ? ? 相对路径：以引用文件所在位置作为参考，以图片相对于HTML页面的位置。
? ? ? ? ?绝对路径：电脑中的盘符或网络地址
? ? ? ? 5.7 超链接标签
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
<a href="http://www.qq.com" target="_self"> 腾讯</a>
//_self为默认方式，替换当前页面
//_blank新建窗口? ? ? ? 链接分类：
? ? ? ? （1）外部链接：跳转到其他网站
? ? ? ? （2）内部链接：网页内部的相互跳转
<a href="gongsijianjie.html" target="_blank"> 公司简介</a> ? ? ? ? （3）空链接：href="#"
? ? ? ? （4）下载链接：href里面是压缩包或文件
<a href="img.zip"> 下载链接</a>? ? ? ? （5）网页元素链接
<a href="http://www.baidu.com"> <img src="img.jpg"/></a>? ? ? ? （6）锚点链接：快速定位到页面中的某个位置
<a href="#live"> 个人生活</a><br />
<h3 id="live"> 个人生活</h3>? ? ? ? 6? 注释和特殊标签
? ? ? ? 6.1 注释
<!--->或ctrl+/
和代码的注释使用目的一致，? ? ? ? 6.2 特殊字符：记住空格，小于和大于就行
