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, 调试时间很长
以上内容来自视频教程所做笔记, 感谢视频原作者.
HTML(hyper text markup language)超文本标记语言学习笔记
来源: http://www.bubuko.com/infodetail-3383950.html