a 标签
作用
- 跳转到外部页面
- 跳转到内部锚点
- 跳转到邮箱或电话
属性
- href
- target
- dowload
- rel
href的取值(所要跳转页面的网址、路径、、)
- 网址
google.com 、google.com、//google.com 推荐最后一种格式 - 路径
是针对于http server而言 服务在哪开启哪里就是根目录 例：/a/b相当于a/b /index.html相当于index.html - 伪协议
1. javascript:代码; --------------------页面执行js操作
2. mailto:邮箱号 --------------------发邮件给xxx
3. tel:手机号 --------------------打电话给xxx - id
href="#xxx" --------------------若存在标签设置id="xxx" 链接会跳转到该标签 即该标签显示在页面的顶部
问：必须使用a标签但又想他任何操作都不做如何实现
- href="javascript:;" --------------------执行js代码但是代码为空所以他啥都不干
- href=" " --------------------会刷新页面
- href="#" --------------------不会刷新页面但是会出现回滚
因此只有href="javascript:;"能够实现该功能
target的取值(页面以什么方式打开)
内置名字
- _self --------------------自身页面
- _blank --------------------空白页面
- _top --------------------顶级窗口
- _parent --------------------上一级窗口
问：_top与_parent的区别
引入内嵌标签iframe
在index.html页面内嵌一个iframe1.html,在iframe1.html内嵌一个iframe2.html
index.html:
<a href="//google.com">top与parent的区别</a>
<div>
<iframe width="800" height="800"src="iframe1.html" frameborder="0" ></iframe>
</div>
iframe1.html:
<body style="background: red;">
我是iframe1
<a href="//baidu.com" target="_top">我会在最外层窗口打开</a>
<a href="//baidu.com" target="_parent">我会在最外层窗口中打开</a>
<div><iframe width="200" height="200" src="iframe2.html" frameborder="0"></iframe>
</div>
</body>
iframe2.html:
<body style="background: blue;">
我是iframe2 <br />
<a href="//baidu.com" target="_top">我会在最外层窗口打开</a>
<a href="//baidu.com" target="_parent">我会在iframe1窗口打开</a>
</body>
程序员的命名
- window.name
一个页面两个a标签的href值不同，target都为xxx
第一个a会在新开的xxx页面打开 第二个a会在xxx页面打开
总结：如果有一个xxx页面就用它 没有就创建 - iframe.name
通过在iframe标签内设置name值来实现
<a href="//google.com" target="xxx">谷歌</a>
<a href="//baidu.com" target="xxx">百度</a>
<div>
<iframe width="1000" height="1000" src="" frameborder="0" name="xxx" ></iframe>
</div>
总结：通过一个页面实现浏览器之间的切换
img 标签
作用
发出get请求，展示一张图片
属性
- src
图片的文件路径 - alt
图片加载失败时显示出来的文字 - width/heigth
只能设置其一 否则图片会变形
事件
- onload
图片加载成功时js作出的响应 - onerror
图片加载失败时js作出的响应
通过事件响应来进行用户优化体验------图片加载失败时做一张挽救图
<img id="xxx" src="p1.jpg" width="400" alt="狗子" />
<script>
xxx.onload = function () { console.log("图片加载成功"); };
xxx.onerror = function () { console.log("图片加载失败"); xxx.src = "p2.png"; };
</script>
响应式图片
设置css属性 max-width:100%;自适应设备大小
table 标签
相关标签
- table -------------------- 表示表格数据 通过二维数据表示的信息
- thead -------------------- 定义一组表格的列的行头
- tbody -------------------- 表的主体 封装表中的行
- tfoot -------------------- 定义一组表格各列的汇总行
- tr -------------------- row 表格中的行
- th -------------------- 定义表头单元格
- td -------------------- 包含数据的单元格
相关样式
- table-layout -------------------- 定义了表格单元格的布局
auto 默认值 单元格宽度取决于其包含的内容 推荐用auto
fixed 宽度由首行设置 - border-collapse -------------------- 决定表格边框是分开还是合并
collapse 设置为共享边框
separate 设置为独立边框 - border-spacing -------------------- 指定相邻单元格边框之间的距离
只适用于border-collapse="separate"即边框分离的模式 希望边框合并 其值应为0
form 标签(表单)
作用
发出get/post请求，刷新页面
属性
- action -------------------- 控制页面的请求地址
- method -------------------- 请求方法是使用post/get
- target -------------------- 需要提交的地方
- autocomplete -------------------- 自动给出建议
问input与button 中type="submit" 都有提交功能 两者有什么不同
- input 里面不能有其他标签如strong而button可以
- button中type不是submit 按钮只能是按钮 没有提交功能
input 标签
作用
让用户输入内容
属性
- button -------------------- 按钮 可放入图片
- text -------------------- 单行文本
- textarea -------------------- 多行文本
- checkbox -------------------- 多选框
- radio -------------------- 单选框 需设置name相同才能实现单选功能
- select -------------------- 选项菜单控件
- option -------------------- 表单项 与selete组合使用
- email -------------------- 输入邮箱地址 设置multiple可编辑多个邮箱地址
- file -------------------- 上传文件 设置multiple可上传多个文件
学习总结
- 明白标签的用法不等于能够用代码写出来 所以代码实践很重要 在写代码过程中进一步加深对知识的理解 同时也在复习巩固知识
- 细节决定成败
