zoukankan      html  css  js  c++  java

  • HTML标签

    1.<p></p>标签:paragraph

       <h1></h1>标签:标题(header)标签

      <strong></strong>加粗标签

      <em></em>斜体标签

             引申：如果想让一个文字既加粗又斜体，可以用<strong></strong>标签嵌套<em></em>标签，也可以使用<em></em>嵌

    　　　　　 套<strong></strong>标签！当然如果想让一个文字既加粗又斜体，同时也独占一行，那么就可以使用<p></p>嵌

    　　　　     套<strong></strong>标签，<strong></strong>标签嵌套<em></em>标签！

    2.<div></div>标签：

       <span></span>标签：

       以上两个标签非常重要，本身不具备含义，实际上就是起到容器的作用，通过对容器的操作，顺带着就可以将容器中的内容改变了！

       容器主要有两个功能：1.分门别类，清晰化 2.绑定化操作【对容器操作就可以取代对容器中每一个元素的操作了】

    3.空格在HTML中是文本分隔符的含义，不能使用在HTML中用空格当做我们传统意义上的空格！如下两行，你就能看到区别是啥：

    1         <div style="100px;height:100px;background-color:red">
2         thisisiafasljfasdjlasjfdlasjdlfjas;dfj;asdf;asdfafdasdf
3     </div>
    View Code

    上面的这段代码你会发现写在div中的文字都跑出了div之外，这是因为div将这些字母看成了一个单词【没有空格】，所以没法换行！

    如果改成下面的形式：

    1 <div style="100px;height:100px;background-color:red">
2     This is a beautiful Girl! I love you you are very beautiful!
3 </div>
    View Code

    这样就能换行了，当然汉字也是可以的，一个汉字默认就是一个词

    1 <div style="100px;height:100px;background-color:red">
2     你说的这是啥啊，这样讲都不懂么？哈哈
3 </div>
    View Code

    而且我们来看：

    1 <div style="100px;height:100px;background-color:red">
2     刘辉                                                                                 很帅！
3 </div>
    View Code

    上面可以看到，虽然我们在代码中隔了好多个空格，但是在浏览器显示的时候却显示不出来几个空格，仅仅能显示一个，所以在HTML中的空格不能按着我们在电脑中的普通文本的空格来看待，而是看做文本分隔符！当然与这个类似的，回车也是被看做文本分隔符,多个回车也是被看做一个分隔符！

    那非要实现多个空格的效果咋办呢？这里需要用到HTML编码，HTML编码就可以将很多的特殊字符给显示出来！

    4.HTML编码的书写都是有规律的，HTML编码都是以&开头，以;结尾，中间的这部分叫做HTML编码，举例：

    HTML编码

          &nbsp;   空格 

          &lt;           <

          &gt;         >

    当然还有其它的，可以参考W3SCHOOL文档，至于回车我们可以使用<br>标签来代替！

    单标签：<meta>  <br> 换车    <hr>  分割线    <img> 图片

    5.下面讲到的都是成组出现的

       <ol><li></li></ol> :ol表示Ordered List【有序列表】;   li表示List Item!【列表项】

    1 <ol type="1" start="2">
2     <li>marvel</li>
3     <li>速8</li>
4     <li>返老还童</li>
5     <li>战狼2</li>
6 </ol>
    View Code

    上面的ol的type属性可以有以下几个选择：

      ①.阿拉伯数字【1】

      ②.大小写英文字母【a或A】

      ③.罗马数字【i或I】

     start属性：表示这个列表是从几开始的，它的值就是阿拉伯数字！

    总结，属性值就这么几个[1/i/I/a/A],注意有些同学说老师，我这里用2可以代替1不，答案：不可以，必须这么写！

    下面还要讲到一个非常有用的标签：无序列表<ul><li></li></ul>：

       ul:UnOrdered List;              li:List Item；

     这个无序列表非常有用，经常在开发中使用！如下所示：

    1 <ul type="disc">
2     <li>橘子</li>
3     <li>苹果</li>
4     <li>香蕉</li>
5 </ul>
    View Code

    ul标签就一个属性type,该type属性值就有三个：disc[discircle,实心圆]、square[实心方框]、circle[空心圆]

    有很多的需求都是需要ul和li这种父子结构的，比如说：有一大功能都是由多个功能子项组成，而且每个功能子项基本上都是相同的，只不过内容可能是不同的，这很多的子项就组成了一个大功能,这样的功能我们尽量使用ul和li来展示，这更符合他天生的结构！比如一个书柜，都是由多个小隔间组成的，多个小隔间都是很类似的，只不过不同的隔间中装的内容不一样，这些隔间和大书柜之间的关系就和我们这里的ul及li差不多！再开发中最常用的和我们这个书柜差不多的功能就是导航栏、导航栏就是由很多菜单项组成，而每一个菜单项的功能结构都很类似，这不过内容不一样，功能和展现形式都差不多，这样的菜单项就组成了一个导航栏，这样的结构我们更加适合用ul和li来展示，因为他们的父子结构和ul及li的结构天生就很配！案例如下：

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7     *{
 8         margin:0px;
 9         padding:0px;    
10     }
11     ul{
12         list-style:none;
13     }
14     li{
15         margin:0px 10px;
16         float:left;
17         font-weight:bold;
18         color:#f40;
19         font-size:14px;
20         height:25px;
21         line-height:25px;    
22     }
23     
24     li:hover{
25         background-color:#f40;
26         color:#fff;
27         border-radius:10px;
28     }
29 </style>
30 </head>
31 <body>
32 <ul type="circle">
33     <li>天猫</li>
34     <li>聚划算</li>
35     <li>天猫超市</li>
36 </ul>
37 </body>
38 </html>
    View Code

    6.img加载图片的标签，img标签由几个属性：

        alt:表示当图片加载不出来的时候，显示的内容是啥，通常这里我们会给出一个提示信息,alt也被称为图片站位符！

        title:当鼠标移动到图片上面的时候，在图片上会有一个小角标提示，我们浏览网站的时候会偶尔看到这种功能，但

              凡是这种功能都是用title实现的,也被称为图片提示符！

        src：表示的是加载的图片的地址，该地址分为三种类型：

    　　   ①.url网络地址：

               ②.本地绝对路径

               ③.本地相对路径

     代码如下所示：

    1 <img alt="图片未加载完毕" src="http://edu-image.nosdn.127.net/a070eb60-eca4-463b-8cd5-8958897a37c8.jpg?imageView&quality=100"/>
2 <img alt="图片未加载完毕" src="C:UsersAdministratorDesktop1.png"/>
3 <img alt="图片未加载完毕" src="1.png"/>
    View Code

     7.a标签，该标签的属性介绍如下：

        href[全称HyperText Reference超文本引用/参考]:值为超链接要跳转或指向的地址

    1 <a href="http://www.baidu.com">www.baidu.com</a>
    View Code

    这个a标签的功能很强大，它可以嵌套任何标签，例如:在a标签内部嵌套一个图片，那么这个图片就有了被引用的功能，也就是只要你一点击到这个图片的任何一个地方，他都会跳转到a标签超链接对应的地址，当然a标签里面放别的也可以，例如放文字、图片、css样式都可以，所以a标签套谁都好使！

    1 <a href="http://www.baidu.com" style="100px;height:100px;background-color:red;display:block;"></a>
    View Code

    以上代码就是存放的CSS样式!

    当然a标签还有target属性，该属性规定在何处打开链接文档：可选值：

    • _blank
    • _parent
    • _self 

    所以a标签第一层含义是超链接，然后a标签还有一个功能是锚(anchor)的意思，也就是锚点的意思!举例：

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7     *{
 8         margin:0px;
 9         padding:0px;    
10     }
11     ul{
12         list-style:none;
13     }
14     li{
15         margin:0px 10px;
16         float:left;
17         font-weight:bold;
18         color:#f40;
19         font-size:14px;
20         height:25px;
21         line-height:25px;    
22     }
23     
24     li:hover{
25         background-color:#f40;
26         color:#fff;
27         border-radius:10px;
28     }
29 </style>
30 </head>
31 <body>
32     <div id="demo1" style=":100px;height:100px;background-color:red;">demo1</div>
33     <br>
34     <br>
35     <br>
36     <br>
37     <br>
38     <br>
39     <br>
40     <br>
41     <br>
42     <br>
43     <br>
44     <br>
45     <br><br><br><br>
46     <div id="demo2" style="100px;height:100px;background-color:green;"></div>
47     <br>
48     <br>
49     <br>
50     <br>
51     <br>
52     <br>
53     <br>
54     <br>
55     <br>
56     <br>
57     <br>
58     <br>
59     <br>
60     <br>
61     <br>
62     <br>
63     <br>
64     <br>
65     <br>
66     <br>
67     <br>
68     <br>
69     <br>
70     <br>
71     <br>
72     <br>
73     <br>
74     <br>
75     <br>
76     <br>
77     <br>
78     <br>
79     <br>
80     <br>
81     <br>
82     <a href="#demo1">find first div</a>
83     <a href="#demo2">find second div</a>
84 </body>
85 </html>
    View Code

    这个锚点在生活中我们浏览文章的时候最典型的应用就是：置顶！以及我们访问网页的时候，有的时候左边是一个目录，右边是目录各个章节的文字说明，我们点击哪个目录，然后鼠标就会直接跳转到该目录所对应的章节，这其实也是a标签锚点作用[文件连续页]！

    案例演示：

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7     *{
 8         margin:0px;
 9         padding:0px;    
10     }
11     ul{
12         list-style:none;
13     }
14     li{
15         margin:0px 10px;
16         float:left;
17         font-weight:bold;
18         color:#f40;
19         font-size:14px;
20         height:25px;
21         line-height:25px;    
22     }
23     
24     li:hover{
25         background-color:#f40;
26         color:#fff;
27         border-radius:10px;
28     }
29 </style>
30 </head>
31 <body>
32     <div id="demo1" style=":100px;height:100px;background-color:red;">demo1</div>
33     <br>
34     <br>
35     <br>
36     <br>
37     <br>
38     <br>
39     <br>
40     <br>
41     <br>
42     <br>
43     <br>
44     <br>
45     <br><br><br><br>
46     <div id="demo2" style="100px;height:100px;background-color:green;"></div>
47     <br>
48     <br>
49     <br>
50     <br>
51     <br>
52     <br>
53     <br>
54     <br>
55     <br>
56     <br>
57     <br>
58     <br>
59     <br>
60     <br>
61     <br>
62     <br>
63     <br>
64     <br>
65     <br>
66     <br>
67     <br>
68     <br>
69     <br>
70     <br>
71     <br>
72     <br>
73     <br>
74     <br>
75     <br>
76     <br>
77     <br>
78     <br>
79     <br>
80     <br>
81     <br>
82     <a  style="display:block;position:fixed;bottom:100px;right:100px; border: 1px solid black;height:50px;200px;background-color:#fcc;" href="#demo1">find first div</a>
83     <a style="display:block;position:fixed;bottom:150px;right:100px; border: 1px solid black;height:50px;200px;background-color:#ffc;" href="#demo2">find second div</a>
84 </body>
85 </html>
    View Code

    超链接的第三个功能,像美团，饿了么等外卖有一个电话的小图标，只要我们一点击就能将电话打出去，实际上也是靠a标签来实现的！如下所示：

    1 <a href="tel:18301099961">打电话！</a>
    View Code

    同理：a标签还可以用来发送邮件，如下所示：

    1 <a href="mailto:liuhui68888@163.com">邮箱！</a>
    View Code

    最后：a标签还有个功能：协议限定符，如下所示,下面这是个整人的东西，慎用：

    1 <a href="javascript:while(1){alert('叫你手欠')}">点我，come on 来啊</a>
    View Code

    我把协议限定符改为javascript:然后就可以在后面写javascript代码了,这个技术一般是黑客或者做标签标记的时候使用！

    所以，综上：a标签一共有四种功能：

    　　①.超链接

            ②.锚点

            ③.打电话、发邮件

            ④.协议限定符

    8.表单标签

     如下是一个登录框的书写：

     1 <form action="#">
 2     <p>
 3         username:<input type="text"  name="username" value="请输入用户名" style="color:#999"
 4                         onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" 
 5                         onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"/>
 6     </p>
 7     <p>
 8         password:<input type="text"  name="password"/>
 9     </p>
10     <input type="text" value="Login"/>
11 </form>
    View Code

     总结一下HTML标签：

    实际上在公司中开发将HTML标签主要分为三类:

    　　①.行级元素【内联、inline】　　

    　　　　  特点：

    　　　　　　  1.不独占一行，内容觉得所占位置大小

    　　　　　　  2.不可以通过CSS样式改变宽和高

                     常见的行级元素有：span、strong、em、del、a

            ②.块级元素【block】

     　　　　 特点：

    　　　　　　  1.独占一行

    　　　　　　  2.可以通过CSS样式改变宽和高

     　　        常见的块级元素有：div、ul、ol、p、form、address

            ③.行级块元素【inline-block】

    　　　　 特点：

                            1.内容绝对大小

                            2.可以改宽和高

    　　　　 常见的行级块元素：<img>标签

           实际上，上面的这三种标签本质还是由CSS属性控制的，在CSS中有个属性叫:display,该属性值为：inline、block、inline-block,

    　   所以从这里你应该就知道无论是行级元素、块级元素、以及行级块元素实际上都是有默认值的,如下所示：

    <style type="text/css">
	span{
		display: inline;/*行级元素默认属性值*/
	}
	div{
		display:block;/*块级元素默认属性值*/
	}
	img{
		display: inline-block;/*行级块元素默认属性值*/
	}
</style>

    　　再换句话说：难道你有自己的默认样式，我就不能给你改一下么？可以的，如下所示：

     1 <style type="text/css">
 2     span{
 3         display: block;
 4     }
 5 </style>
 6 </head>
 7 <body>    
 8     <span>124</span>
 9     <span>124</span>
10 </body>

    这样，就会看到我们也可以将span转换成了块级元素！当然也可以将一个块级元素转换为一个行级元素，转换之后再设置宽和高也不好使，如下所示：

     1 <style type="text/css">
 2     div{
 3         display: inline;
 4         width:100px;
 5         height:100px;
 6         background-color:red;
 7     }
 8 </style>
 9 </head>
10 <body>    
11     <div>123</div>
12     <div>123</div>
13 </body>
    View Code

    注意：去公司开发的时候，基本上有两种实现思路：

    　　第一种：先写html代码，每写一个html代码，就去将其对应的css样式设置好！【这种也被称为是小白级别的】

            第二种：先定义功能【在整个页面确定了就几种颜色或盒子大小的情况下，先定义CSS】，然后再写HTML代码

                            的时候用到谁就选谁组合一下就OK了，而且这种定义好的功能【CSS】除了自己用别人也可以用！

    如下所示：我们看一下第二种方式【公司基本上使用这种开发方式】：

    先定义好功能【写好CSS样式】:

    <style type="text/css">
	.red{
		background-color: red;
	}
	.green{
		background-color: green;
	}
	.gray{
		background-color: gray;
	}
	
	.size1{
		100px;
		height:100px;
	}
	.size2{
		200px;
		height:200px;
	}
	.size3{
		300px;
		height:300px;
	}
</style>

    如上所示，已经定义好了功能：然后我们就可以写HTML代码了，在用到CSS文件的时候，只需要引入相应的功能即可，如下所示：

    1 <body>    
2     <div class="red size1"></div>
3     <div class="green size2"></div>
4     <div class="gray size3"></div>
5 </body>

    这样我们在用到什么样式的时候，css文件中直接选择就可以了,可以任意选配各种CSS样式组合！而且还有个好处，比如有三个页面，这三个页面都用到了导航栏，你会发现成员A去开发导航栏1，成员B去开发导航栏B，成员C去开发导航栏C这样无一例外每个人都开发一个导航栏会耽误很多功夫，这时候技术经理就说了，成员A你去开发一个导航栏的CSS功能，其它成员如果想要开发导航栏功能，只需要将你写的这个写导航栏的CSS文件引入，引入完之后将对应的class样式加在自己的DIV【其它元素】上就OK了,而且我们可以在我们的页面中引入多个CSS文件，当然通常只有一个是自己的CSS文件主包【自定义的CSS文件】，剩下的那10多个CSS文件都是前人们写好的工具库，直接拿过来用就OK了！而且这符合团队开发、模块化开发的流程也就是：你写过的东西就不要让我再写了！

    再给大家强调一点：标签选择器除了可以选择相应的标签之外，更大的功能是将系统自带的标签进行一个初始化操作，也就是说我们不一定非要使用系统自带标签原来的含义，我们可以改变它原来的功能，例如em标签原意是斜体，但是我们可以将它的原意改成适合我们项目开发的标签，例如：我可以将系统自带的em标签改成如下所示：

     1 <style type="text/css">
 2     em{
 3         font-style: normal;
 4         color:#c00
 5     }
 6 </style>
 7 </head>
 8 <body>    
 9     <em>23</em>
10 </body>
    View Code

    这样23就不是斜体的了，而是红色、正常显示的字体了!与这个类似的是a标签【超链接】，现在大家见到的基本上都不是蓝颜色、有下滑线的a标签，而是a标签被修改了系统自带的值，如下所示：

     1 <style type="text/css">
 2     a{
 3         text-decoration: none;
 4         color:#424242;
 5     }
 6 </style>
 7 </head>
 8 <body>    
 9     <a href="#">超链接</a>
10 </body>
    View Code

    同样，系统ul本身自带的数字，间距、空格我们也可以改变，现在基本上是如下使用：

     1 <style type="text/css">
 2     ul{
 3         list-style: none;
 4         padding:0;
 5         margin:0;
 6     }
 7 </style>
 8 </head>
 9 <body>    
10     <ul>
11         <li>1</li>
12         <li>2</li>
13         <li>3</li>
14     </ul>
15 </body>
    View Code

    注意：list-style属性就ul标签和ol标签有，以上这几种形式，我们称之为初始化标签！

    再近一步，很多标签一出生就带来了很多的默认样式，例如：几乎所有的标签都会带着padding和margin属性，如ul 、p、div等都带有这些值，这些值不见得就是我们想要的，我们想要的东西可能我们可以自己去设置，而基本上所有的标签都带有这个东西，所以一开始我们基本上都给这些标签将他们的margin和padding都给去掉，怎么去呢？用分组选择器或者*[通配符]都可以！我们通常情况下使用的是*(通配符)选择器，因为通配符选择器的权重值为0,0就非常好，0代表我给你初始化好了，你随便写个选择器你就能更改，我的权重是0，你设置成啥就是啥，不会影响到你，而且设置的范围是所有的标签【范围广】，所以通配符选择器是初始化标签最好的一种方式！所以有的时候你经常会看到*通配符会这样写：

    1 <style type="text/css">
2     *{
3         padding:0;
4         margin:0;
5         text-decoration: none;
6         list-style: none;/*只有ol和ul有这个属性，别的标签本来就没有，设置了也没问题*/
7     }
8 </style>
    View Code

    而且在公司中开发的时候，一般css文件上边是初始化样式，下边是定义功能！

    　

    　

     

    　　
  • 相关阅读:
    webpack-dev-server报错
    npm run dev 报错 run `npm audit fix` to fix them, or `npm audit` for details
    vscode里使用.vue代码模板的方法
    console.log()中的%d,%s等代表的输出类型
    使用Babel将单独的js文件 中的 ES6转码为ES5
    jQuery选择什么版本 1.x? 2.x? 3.x?
    在线jquery.min.js、vue.min.js引用
    WebSocket对象的“readyState”属性记录连接过程中的状态值
    vue项目中，使用vue-awesome-swiper插件实现轮播图
    vue-cli 项目里屏幕自适应
  • 原文地址：https://www.cnblogs.com/python-machine/p/7953815.html
Copyright © 2011-2022 走看看