Html4.0.1 标签使用笔记

1.lang=zh，en有什么用？

告诉搜索引擎爬虫，网站是关于什么内容的，优先显示网站排名。
一般竞价排名，根据百度搜索引擎，需要签订关键词协议，首页第一个竞价排名大概是30-50元/条，竞价排名范围1-999元，最贵行业，医疗器械，医院(高转化率行业)。
如果点击次数很多怎么办？IP段协议：同一个时间段一个IP被访问多次，只能算一次
小公司出不起钱怎么办？SEO技术，lang= 是里面的一部分。ex：<meta content="Shift" name="Keywords">

2.字符集编码

gbk是gb2312的扩展，包括繁体。utf-8是unicode的升级版。

3.普通标签

标签名称	功能介绍	用法说明	应用范围
h1-h6	段落	-
p	段落标签	-
strong	加粗	-
em	斜体	-
del	删除线	-
address	地址标签	加粗斜体	少
div	容器	独占一行，分块，结构化	最多
span	容器	没有效果，结构化绑定化操作	最多

4.div标签汉字英文换行问题。

空格/回车：文本分隔符。浏览器一个单词会一行显示，很多英文会越界，汉字都是单独的不能。

(HTML编码)
显示空格： 　　显示<：<　　显示>：>

显示回车：<br>（标签一般都是成对出现的，这个标签里面不需要包裹修饰里面的内容，所以是单标签（meta、br、hr（水平线））

5.特殊标签

标签名称	功能介绍	用法说明
ol
li	有序序列	可放在ol里面使用属性type="a"(1,A,i,I)，相应的序列排列属性reversed="reversed" 倒序排列属性start="2" 从2开始排，
ul	无序列表	可放在ol里面里面使用属性type="disc" square方块 cicle空心圈用处：大的功能下面有很多相同的功能子项（导航栏，<ul><li>…</ul></li>）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            ul{
                list-style: none;
            }
            li{
                margin: 10px;
                float: left;
                color: #0000CC;
                font: "微软雅黑";
                font-size: 18px;
                font-weight: bold;
                height: 20px;
                line-height: 20px;
                padding: 0 5px;
            }
            li:hover{
                border-radius: 15px;
                color: #F0F8FF;
                background-color: #0000CC;
            }
        </style>
    </head>

    <body>
        <ul>
            <li>天猫超市</li>
            <li>聚划算</li>
            <li>天猫</li>
        </ul>        
    </body>

</html>

仿菜单栏

标签名称

功能说明

用法说明

img

图片显示

属性src：
1.网上的url 2.本地绝对路径 3.本地相对路径
属性alt：图片占位符，加载失败显示
属性title：图片提示符

anchor（锚）
超链接标签

最开始是作为锚点记录位置
1.href=#id，跳转到网页id所在的位置。

2.属性href：hyperText reference（超文本引用）
可以包裹图片，设置任何属性
属性target：blank 在新的标签中使用

3.打电话,发邮件
属性：　href="tel：138*********"
　　　　href="mailto：138*****@**.com"

4.协议定义符（书签等）
href=“javascript:***”
点击后强行执行里面的js代码

跳转顶部代码示例

标签名称	功能说明	用法说明
form	表单标签，发送数据	1.属性method="get",表示请求方式 2.属性action="**",发送给谁的地址
关联标签
input	输入框	1.属性type=“text”，输入的内容格式属性type=“submit”，提交测试：name=“” 添加数据值，可以直接在网页提交，提交成功后网址后面会出现对应的值（如何保护密码？）你的密码提交到公司去的时候，这个公司是要和网安局签署加密协议，必须对密码对进行md5加密。 2g,3g,4g的区别，2g不对数据进行加密，如果在信号很好的地方信号变得差，有可能被干扰。 2.属性type="radio"，选择提交。name属性用来统一单选关系，value属性用来传值懒操作：默认选中，cheked="cheked" 3.属性ttype="checkbox",复选框。 3.value增加到1当中，在框中初始化显示。
select	下拉菜单 option一起使用	传递数据注意两点，数据值，数据名。用属性name设置数据名。

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7     </head>
 8 
 9     <body>
10         <form action="" method="get">
11             <p>
12                 <input type="text" name="name" value="请输入姓名" style="color: #999;" 
13                     onfocus="if(this.value=="请输入姓名"){ this.value='';this.style.color='#424242'}"  
14                     onblur="if(this.value==''){ this.value='请输入姓名';this.style.color='#999'}"/>
15             </p>
16             <p>
17                 <input type="password" name="password" />
18             </p>
19             <input type="submit" />
20         </form>
21     </body>
22 
23 </html>

输入框筛选