html重要知识点总结
2017-12-03 16:33
351 查看
HTML知识点总结
一、div,span
看起来相对于<em>,<strong>啥的没有什么效果,实际上是最实用的,有两大功能1、容器,分块明确,使页面更结构化
<div >dkjgaklgja</div> <div > <h1>分块操作</h1> </div> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512195786234&di=7aad12cdf6f606bfb651eaad02338f3b&imgtype=0 &src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F98105c8b5929e326b0a898b2386ee7ddd5f0434a.jpg" width="200px"> </div>
效果:
2、捆绑操作,使操作更简便
<div style="color: #ff0000;background-color:#999"> <h1>捆绑操作</h1> <strong>捆绑操作</strong> <em>捆绑操作</em> <i>捆绑操作</i> </div><!--不用对h1,strong,em,i分别设置样式-->
效果:
二、ul,li(无序列表)
用途:做功能,由于他们的父子结构
适用于一种很常见情况:功能由很多功能子项组成,子项的功能和样式相同的,只是内容有一点差别,如淘宝的导航栏
<ul>
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul><!--无序列表-->
css:
* { padding: 0; margin: 0; } ul{ list-style: none;/*列表样式:无*/ } li{ font-size: 14px; font-weight: bold; background-color: #fff; color: #f40; float: left; margin: 0 10px; line-height: 25px; padding: 0 5px; } li:hover{ color: #fff; background-color: #f40; border-radius: 15px; }
效果:
三、绝对路径、相对路径、网上路径
1、绝对路径
绝对路径:是从盘符开始的路径,形如C:\windows\system32\cmd.exe
2、相对路径
相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法
../../代表上两级目录
/.. 代表下级目录
/../..代表下两级目录
../代表上一级目录
同级直接引用文件名
3、网上路径
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512195786234&di=7aad12cdf6f606bfb651eaad02338f3b&imgtype=0&sr
c=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F98105c8b5929e326b0a898b2386ee7ddd5f0434a.jpg" width="200px"<!--此处引用网上的图片-->>
效果:
四、<a></a>
作用
1、超链接
<a href="http://www.baidu.com">click me</a><!--在当前窗口中打开百度-->
2、锚点定位
<p> <a href="#C4">查看章节 4</a><!--点击查看章节定位到章节四--> </p> <h2>章节 1</h2> <p>这边显示该章节的内容……</p> <h2>章节 2</h2> <p>这边显示该章节的内容……</p> <h2>章节 3</h2> <p>这边显示该章节的内容……</p> <h2><a id="C4">章节 4</a></h2> <p>这边显示该章节的内容……</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
3、打电话
<a href="tel:10086">移动热线</a><!--移动端拨号功能,如美团外卖客服电话-->
发邮件
<a href="mailto:haorooms@126.com">给haorooms发邮件</a><!--调用电脑上的邮箱发邮件-->
4、协议限定符
<a href="javascript:while(1){alert(叫你收钱)}">点了小心死机!</a><!--javascript:是伪协议,点击该链接来调用javascript函数-->
五、表单:最重要的一个标签<form></form>
1、大多数情况下用到的是表单输入标签<input>--最重要
输入字段可通过多种方式改变,取决于 type 属性,可以是文本框,密码等。具体参考w3cschool html<form method="get"> <p> username:<input type="text" name="username"> </p> <p> password:<input type="password" name="password"> </p> <input type="submit"> </form>效果:
六
六、选用标签时要考虑语义化好,可维护性高
例如:<p></p>功能就是成段展示,独成一行,并且可以添加一些css样式,易于修改。相关文章推荐
- HTML总结 HTML详细介绍重要知识点
- HTML 知识点总结
- Struts2重要知识点总结
- html+css知识点总结(田彦霞)
- 黑马程序员---第十篇 一些重要知识点总结
- HTML、CSS知识点总结。
- struts2重要知识点总结(2)
- html+css知识点总结
- html知识点总结
- 不错的android总结(重要知识点)
- JAVA中HTML知识点总结
- c++重要知识点总结
- html 5 学习笔记-重要知识点 1
- HTML的标签第一章知识点总结
- html知识点总结(一)
- 计算机网络重要知识点总结 面试必备
- C语言重要知识点总结(一)
- HTML 知识点总结
- HTML知识点总结
- HTML重要标签总结