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>换行符 大部分标签的作用是把他包裹的文本作用城他设置的样子,所以成对出现,有 的标签自己就代表功能,就是单标签 16、<hr>水平线 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,调试时间很长 以上内容来自视频教程所做笔记,感谢视频原作者。