html重要知识点总结

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样式，易于修改。