单词
- hyper 超级,html里的h哦。 /hi+per/
- target 目标
- reference 引用,refer的名词
- frame 边框、框架
- error 错误
- blank 空白
- parent 父母之一
- self 自己
- load 加载
- canvas 画布 /kanvas/
a 标签
作用
- 跳转外部页面
- 跳转内部锚点
- 跳转到邮箱或电话等
属性
- href = hyper reference =超链接
- target 指定哪个窗口打开超链接
- download
- rel=noopener
href
注意
- 不要双击html文件来浏览网页,作为专业前端程序员应该借用***http-server***
yarn global add http-server //这是安装//
http-server -c-1 //下次直接输入
//得到的四个地址,复制一个到浏览器,在末尾加上html文件名浏览
- 可以不用http-server,用parcel
yarn global add parcel //也是安装
parcel a-href.html //下次直接输入
//和http-server效果一样的
取值
-
网址
- https网址
- http网址
- 无协议网址
//google.com
//其实就是继承,你是http就是http,所以我们用这个
-
路径
- 绝对路径/a/b/c ,相对路径 a/b/c
说明:我们在哪里打开http-server,哪里就是根目录,所以这里其实两者都一样(记结论) - index.html 或者 ./index.html
- 绝对路径/a/b/c ,相对路径 a/b/c
-
伪协议
-
javascript:JS代码;
效果就是点击就执行了这段JS代码,最近很少用吧
- JS代码留空可以实现一个点击什么都不做的需求,没有其他a标签写法能做到这样,因为href="#"会跑到顶部,href=""会刷新页面***
-
#xxx
搭配id= XXX使用实现点击跳转到id=XXX的元素
-
mailto:xxx@xx.com
发邮件给XXX</a> 发邮件
-
tel:123456789
手机点击就会自动进到拨号界面并写上号码
-
-
id
href=#xxx
target 属性
取值
- _blank 空白页打开
- _top 顶部打开(只有一个顶部)
- _parent 父级(的 iframe )打开
- _self 自己(的 iframe )打开
- XXX 这是指窗口的名字:
windos.name
如果没有XXX就新建一个叫XXX的窗口,如果存在两个叫XXX的 iframe 那就会顺序覆盖 - iframe 的name,这时进行点击会在这个名字的iframe里执行href的对应操作
比如配置如下
href = "//google.com",target = "myiframe" ,iframe src ="myiframe.html" , name = "myiframe".
那么点击了超链接后,在myiframe里打开了谷歌,但是谷歌拒绝了你内嵌访问它,哈哈.
- 拓展
将iframe设置成全屏那么大,整两个,再整两个超链接,就能实现googbai啦
download 属性
用于下载链接
rel = noopener 属性
暂时不用知道
iframe标签
用法
iframe + tab 补全,然后src ="",name = ""等等,看文档
作用
内嵌页面
补充说明
现在大多数不采用这个方式了,还有更好的方式,所以不作补充
table标签
内部只能有的三个标签
-
thead 表头
- tr = table row
- th = table head 写表头内容,按列
- tr = table row
-
tbody 表体
- tr
- td = table data 按列来写内容
- tr
-
tfoot 表尾
- tr
- td 一样
- tr
-
拓展
td,th
{
border: 1px solid red;
}
// 加了边框,一像素粗,红色
相关标签
- table-layout
- ~: auto
- ~: fix
- border-collapse 控制border是否合并
- ~: collapse;
- border-spacing 控制border的距离
- ~: 0;
演示
- ~: 0;
动手做个表格
- 就是thead,tbody,tfoot三个部分,写tr>th or td的内容,从左往右填空完事。最后在head里设置一下border。
- 用http-server推的地址后面接我这个demo的文件名,预览
img 标签
作用
- 发出一个get请求展示一张图片
属性
- alt 失败时作为代替显示的信息
- height 高,只写高度,宽度会自适应
- width 宽,只写宽度,高度会自适应
都写可能会使图片变形 - src
- 用法: src = "图片的相对or绝对路径,网路地址"
永远也不要让图片变形,这是前端工程师的底线
事件
- onload
加载成功时该做什么 - onerror
加载失败时该做什么
响应式
使手机能正常看
- 在head>style里,img{max-width: 100%;}
form 标签
表单
必须要有一个type ="submit"
作用
- 发get或post请求,然后刷新页面
属性
-
action 后台给的一个路径,随便/XXX,报错不管
-
autocomplete 自动推荐要输入的内容,比如登录过,下次登录会提示一个用户名
-
method 控制是get还是POST
-
target
-
拓展
form标签里面使用input标签
<body>
<form>
<input name ="username" type="text"/> 自动输入提醒
<input type="submit" value="我可以自己写"/>
<button type = "submit">
<strong>我可以自己写</strong>
<button/>
</form>
</body>
input和button的巨大区别就是,button可以> strong、img等等,而input啥也不行!
事件
- onsubmit
input 标签
作用
- 让用户输入内容
属性
- type
- 取值 button
- checkbox
- file
- hidden 用户写不了,给机器写
- number
- password
- radio
- search
- submit
- tel
- text
- name
- autofocus
- checked
- disabled
- maxlength
- pattern
- value
- placeholder
- 其他输入标签
- textarea 多行,style="resize: none; width: 50%; height: 300px"
- select
- option
- label
事件
- onchange 改变
- onfocus 鼠标放上去
- onblur
验证器
- HTML 5 新增功能
- required: 搭配text强制要填表
注意事项
- 一般不监听input 的click 事件
- form里面的input 要有name
- form里要放一个 type=submit 才能触发submit事件
感想
内容很多很多,需要时间消化。有许多标签记录得很粗,但这些其实都是可以通过MDN找到的,不慌。忘了就去查资料。