1、前后状态的不同，叫做交互效果。有了人的操作，机器给了一个反馈。
2、save 或 ctrl+s，保存，存文件一定要加.html
3、Hypertext Markup Language 超文本标记语言
4、<html></html>根标签
<head></head>里面放的是思想，设置浏览器用的，是人看不到的
<body></body>是展示给用户看的可以右键打开 Open in Browser
5、这就是一个属性：属性名 = “属性值”
属性名不用加双引号，属性值必须加双引号<meta charset = “utf-8”>一般都填这个
编码字符集：gb2312 国家编码字符集（简体，亚裔字符集）gbk（gb2312+繁体）
unicode 是万国码，包括了所有国家的语言uft-8 是 unicode
6、<title>淘宝网，淘</title>
7、<html lang = “en”>告诉搜索引擎爬虫，我们的网站是关于什么内容的
en 代表是英文，zh 是中文，德语是 de
竞价排名费 1-999 元/点击一次，但是有 IP 段锁定例这样是告诉搜索引擎的
<meta content = “服饰” name = “keywords”> <meta content = “时装” name = “description”>
8、<p></p>段落标签，让内容成段展示
9、标题标签，成段展示，独占一行，加粗字体，更改字体大小（从 1 到 6 依次减小）<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6
10、<strong>加粗</strong> <em>斜体</em>
例又加粗又斜体，写成嵌套功能
<strong>
<em>又加粗又斜体</em>
</strong>
11、<del></del>这是一个中划线
12、<address></address>这是一个地址标签。可以用斜体+成段展示模拟
13、<div></div>独占一行
<span></span>不独占一行
div 和 span 这两个标签是为了成块展示，规格化，这两个就是容器，功能如下：功能 1：分块明确，让整个页面更加结构化；
功能 2：捆绑操作的作用（搬书架）
使用前
<strong style="color: #f40">a</strong>
<em style="color: #f40">b</em>
<del style="color: #f40">c</del>
使用后
<div style="color: #f40">
<strong>a</strong>
<em>b</em>
<del>c</del>
</div>
14、如果是一个单词，溢出是不管的
空格的含义是英文单词分隔符，不代表文本的空格，作为分隔符，打多少个都只显示一个空格；回车也是文字分割符，也是打多少个都只显示一个空格
html 编码格式是&；常用就以下三个
1） 空格文本，写多少个就空几格 （ ；）
2）<左尖角号，小于的意思，less than，html 编码是（<；）
3）>右尖角号，大于的意思，great than，html 编码是（>）
15、<br>换行符
大部分标签的作用是把他包裹的文本作用城他设置的样子，所以成对出现，有
的标签自己就代表功能，就是单标签
17、有序列表
喜欢的电影
<ol>
<li>marvel</li>
<li>速 8</li>
<li>返老孩童</li>
<li>了不起的盖茨比</li>
</ol>
如果写成：<ol type = “1”> 就以 ABC 排序， 改成 a，就以 abc 排序
此处的 type 值只有五个：数字，大写英文 A，小写英文 b，罗马数字大写 I，罗马数
字小写 i
A 可以 27 进制
写成<ol type = “1” reversed = “reversed”> 就是倒序
如果想从第 2 个开始排序，就写<ol type = “1” start = “2”>
如果想从第 117 个开始排序，就写<ol type = “i” start = “117”>
想从第几个开始拍，start 里面写数字几
18、无序列表 ul，unorder list 只有 type = “”这一个属性可以改
<ul type = “disc”>
<li>草莓</li>
<li>苹果</li>
<li>橙子</li>
</ul>
如 type = “disc” 意思是 discircle，实心圆
如 type = “square” 意思是 square，实心方块
如 type = “circle” 意思是 circle，圈(空心圆)
ul 和 li 是一个很好的天生父子结构(柜子与抽屉)，可以做导航栏
可维护性好
19、<img src = “sss.jpg style = “width:100px;”>
src 是 source 的缩写，img 的地址分：
1）网上 url
2）本地的绝对路径
3）本地的相对路径
如 html 和图片在同一文件下，是一种相对关系，相对路径，写法<img src = “123.jpg”>
D:/a/b/lesson2.html
D:/a/b/123.jpg
如 html 和图片不在同一文件下，是绝对路径，写法<img src = “D:/a/b/c/123.jpg”>
D:/a/b/lesson2.html
D:/a/b/c/123.jpg
例<img scr = “fy.jpg” style = “width:200px;” alt = “这是范爷”>
此处的 alt 是图片占位符。当地址出错时，图挂了，来展示这个信息；图片没问题，
就不会展示这个信息
例<img scr = “fy.jpg” style = “width:200px;” alt = “这是范爷” title = “This is fy”>
此处的 title 是图片提示符。当鼠标放上去，就会显示这个信息
20、<a href = “https://www.baidu.com”>www.taobao.com</a>
这个地址展示给用户是淘宝，实际给浏览器看的地址是百度
href 是 hyperText reference 超文本引用
<a>标签可以包裹图片
<a>是 anchor --> 锚，定在某个点（置顶）
<a>标签的功能
1）超链接
2）锚点
3）打电话，发邮件
4）协议限定符
例<a href = “https://www.baidu.com” target = “_blank”>target = “_blank”意思是在新标
签中打开这个地址
例
例
写一个<a href = “javascript:”>你点我试试</a>写了 JavaScript 就可以在里面写 js 了
21、form 表单，能发送数据，非常重要<form></form>
form method = “get/post”这是 form 发送数据的两种方式
action = “http://ssffg.php”这是发送给谁，就是 action 的位置
form 表单里面还需要配合 input 来写，input 里面需要 type
<input type = “text”> //这个是输入框的意思
<input type = “password”> //这个是密码框的意思，默认是暗文
<input type = “submit”> //这个是提交的组件，也就是登录
<input type = “submit” value = “login”> //这样就改变了提交框的值
<input type = “radio”> //是单选框
<input type = “checkbox”> //是复选框
要注意语义化，所以用 p 标签更好，p 标签天生的功能就是换行
这种方式发送不了数据
发送数据要注重数据的主题（数据名）和数据的内容（数据值），缺一不可，没有
这个就发送不了数据
<input type = “text” name = “1234”> 此处 name 是数据名，1234 是数据值，此处 1234
可以随便填，最好填写接近意思的英文单词，方便使用
例
html？后面有值，就是发送成功的体现
另外，暗文是仅对自己不可见，受网安局监管的公司，一般用 md5，不可逆的加密
方式
<input type = “radio” name = “star”>是单选框，此处的 name 里面的值一样的，是告诉
浏览器你们是一道题，那么这个时候就没有填数据值的地方了，可以写个 value = “”
来储存数据值
<input type = “radio” name = “star” value = “”>此处的 name 里面的值一样的，是告诉
浏览器你们是一道题，那么这个时候就没有填数据值的地方了，可以写个 value = “”
来储存数据值.
把编程思想和编程工具结合在一起就是编程，把编程思想量化出来，用编程工具一
步步写出来，修修补补，完成自己所需要的
例下面做一个小项目，如图，聚焦，失去焦点，输入文字，发生改变
onfocus = “”是想鼠标聚焦时发生什么事
onblur = “”是在鼠标失去焦点时发生的状态
<input type = “checkbox”> //是复选框
功能上要有培养用户懒习惯（吸引用户）
做一个产品需要 1 解决刚需，解决社交 2 用户体验感好（减少用户操作）3 用户粘性
默认选中 checked = “checked”
form 表单里面的组件 select，是一个下拉菜单，可以选值
在这种情况，数据名写在 select 里面更好，因为是天生的父子结构，而 option 标签中
间填的内容就相当于了一个数据值。如果写成<option value = “jc”>zjl</option>点提
交，那么后台会使用 jc 这个属性
<select>
<option></option>
<option></option>
<option></option>
</select>
结构 html，样式 css，行为 js 相分离
css 相当于装修材料，cascading style sheet(层叠 样式 表)
注释掉的部分是浏览器不会看的，是备忘录的功能，快捷键是 ctrl+？
html 的注释是 <!—块注释 --> //行注释 快捷键 ctrl+?
css 注释方式仅有 /* 被注释的内容 */ 快捷键 ctrl+?
注释可以用来调节 bug，注释一行，调试一行
每天工作 50%在沟通，40-50%写代码，10%左右写报告
一个项目一个月的话，一般是一周做完，三周调试。编程为 10 分，7 分在调试，3
分在开发，时间也是这样分配的，一个项目开发时间*3 或者*3.5，调试时间很长
以上内容来自视频教程所做笔记，感谢视频原作者。