HTML标签参考(二)

一些重要的标签

• ol li javascript

<ol><li></li></ol>这是一组标签,它们两者都是成对出现的,每个标签单独出现都是没有意义的事情。css

这一组标签叫作有序列表,ol是外面的列表框,li是里面的子项,而且每个li子项的前面都会带有序号。html

• ol有一个属性叫作type属性,这个属性的做用是用来设置每个子项前面的显示内容的。默认状况下按照数字来排序的,咱们能够改为type=”a” ,这样前面序号是按照小写字母来排序的。前端

一样的,type的属性值还能够设置成A–>按照大写字母来排序;i—>按照i的个数来排序(罗马数字?);I—>大写I的个数来排序,除此以外,设置成其余的属性都是错误的,而错误的状况下ol会按照默认的数字来排序,2和b等都算是错误的值哟~java

• ol的第二个属性叫作reversed属性,当咱们给ol加上reversed=”reversed”的时候,子项就会变成倒序来排列。这个属性直接写reversed也是能够的,不过我一样认为reversed=”reversed”才是规范的写法。浏览器

• ol的第三个属性叫作start属性,这个属性的意思是咱们让子项从第几个序号开始显示,当咱们写start=”2″的时候,前面的序号就会变成二、三、4 而不是默认的一、二、3,字母也是一样的道理。服务器

可是有一个很重要的问题就是,咱们在哪一个网页看到文字前面有这些什么数字啊字母啊的序号吗?网络

因此最后的结果就是,咱们基本不多用到ol、li标签哟~异步

 

 ul li布局

<ul><li></li></ul>

这一组标签是无序列表,除了前面的序号都变成了点(• )以外,其余的和有序列表基本同样。

• ul一样有一个type属性,这个属性的值设置的是每个子项前面显示的符号的形式,默认的值是disc圆点,当值是square的时候,前面显示的就是小方块,值是circle 的时候前面显示的就是空心圆圈。

可是一样的道理,咱们也没有在哪一个网页上看到文字前面带有这些恶心的圆点方块之类的,所以咱们在使用ul、li标签的时候,都会先把ul的默认样式list-style改为none,list-style: none;不过这已经属于css的部分了~

无序列表通常用来当作导航栏之类的,里面的结构样式都同样的部分,像淘宝什么的网页的导航栏就都是用ul、li来写的。

 

• a

<a></a>标签是一个很是重要的标签,它有一个必须写的属性叫作href —> hyperText reference 超文本连接,里面写的是地址。

a的英文单词是anchor锚点的意思,所以这个标签的做用主要有两点:

1.定点跳转咱们指定的id的元素位置。这个用法须要咱们在href中写上id的值  <a href=”#clickme”>点击我跳转</a>这样就会跳转到那个id是clickme的元素的位置

2.超连接。咱们自href中写一个本地的或者网上的连接,好比www.baidu.com ,这样咱们点击的时候就会跳转到这个网页上去了。

3.协议限定符。在href中咱们能够写javascript代码,好比href=”javascript:while(1){alert(‘你中毒了’)}”,当咱们写上这行代码的时候,咱们点击这个a标签以后浏览器就会一直弹出对话框。

一般在移动端咱们都用a标签来调用接口,好比:href=”phoneto:12234512345″ 调用手机的拨号功能来拨打电话,像美团外卖之类的就是用的这个功能。

• a标签默认的是蓝色的字体而且带有下划线,咱们在页面初始化的时候一般也习惯与将a标签的颜色和下划线的默认属性都去掉。

 

   • img

<img></img>标签是image图片的意思,它有一个必备的属性叫作src –->source,这个src属性的值就是咱们的图片的地址。通常来讲咱们给src填写两种值:

1.网上的连接

2.本地的连接

说道本地的连接就不得不提到本地连接的书写形式。本地连接分为两种:相对地址和绝对地址。而绝对地址咱们一般是不用的,由于当文件上传到服务器上的时候,凡是用绝对地址写的连接通通都会失效的,所以咱们都要选择相对地址。

相对地址中 ../的意思是返回当前文件的上一层目录 ,./的意思是当前文件所在的目录,好比说咱们有一张图片和这个html文件在同一个文件夹下面,那么咱们就能够写<img src=”./tupian.png”></img>

同时这个图片标签还有两个属性。

1.alt属性。这个属性是为其设置图片占位符,也就是说当图片由于网速或者连接错误等缘由加载不出来的时候,就会显示alt里面咱们设置的值。

2.title属性。图片提示符。当咱们鼠标移入图片的时候,在鼠标旁边会出现一个黄色的小方块来显示这个title属性里面设置的值。

以上就是几个比较重要的标签的介绍了,还有一个不太常见也不过重要可是须要了解的标签,table标签

 

 table

<table></table>是一个三级结构标签,它要搭配<tr><td></td></tr>这两个标签一块儿使用才能够。

table是表格的意思,<table><table>这个标签就是设置外层的表格,而后tr是表格的行,td是表格的数据单元,咱们能够理解为列。

<table>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

table标签的大概结构是这个样子的,同时td还有几个属性。

1.cellpadding内边距属性,咱们能够为每个单元格都设置内边距 cellpadding=”10px”;

2.cellspacing 属性,这个属性的做用规定单元之间的空间,当咱们设置为0的时候就能够去掉边线了。

3.colspan属性,这个属性规定了这一个td占了几个单位,默认的一个td占一个单位,相似于excel中的合并单元格的做用。

咱们如今通常都不用table标签了,这是一个结构化标签,之前用这个标签来给页面进行布局,可是如今咱们直接用div + css来对页面进行布局。

 

那么为何咱们要弃用table标签呢?

说道这里咱们就不得不提一下异步和同步的概念。

在生活中,咱们常说的异步是指顺序的干两件事情,好比先吃饭,再玩游戏;同步的意思是同时干,一边吃饭一边打游戏。

可是在计算机领域中,异步指的是生活中的同步,同时加载的意思,同步则是生活中的顺序加载的意思。

这个概念必定要搞清楚。

table的缺点在于服务器把代码加载到本地服务器的过程当中,原本是加载一行执行一行,可是table标签是里面的东西全都下载完以后才会显示出来,那么若是图片不少的话就会致使网页一直加载不出来,除非全部的图片和内容都加载完。之前的手机网速慢,厂家重视内容的展示而不是样式的展示,因此那个时候用table,而如今网速很快,你们都重视用户体验,当咱们浏览淘宝店铺的时候,若是要等到全部的图片全都加载完以后才显示出来的话那也太蠢了,因此table标签如今咱们基本放弃使用了。

可是基本不使用不表明不使用,有些状况下仍是能够用table标签的哟~

 

最后咱们再来介绍一个很是重要的标签——表单

<form></form>表单元素,这个元素可让咱们实现前端和后台的数据交互。

咱们经过form表单向后台发送数据,数据都是由两部分组成的:数据名+数据内容。

表单都是成组出现的,里面有各类各样的元素。

咱们先介绍一下form表单元素拥有的属性:

1.action属性 填写服务器地址,这个属性的意思是咱们把数据传递到那个服务器。

2.method属性 传输方法,咱们在这里填写经过什么方式来传输数据,通常填写的都是POST/GET这两种中的一个,虽然有其余的方式可是用的韩少,而post和get的区别咱们在网络篇会有介绍,这里咱们暂时都先写get方法吧。

 

介绍完属性以后,咱们再介绍一下表单拥有的子元素:

   • input标签 这个标签是一个单标签,不须要闭合。

这个标签有一个type属性,而这个属性的值决定了这个input标签的类型是什么。

1.text  若是type=”text”的话,这个input标签就是一个输入框,咱们能够在里面输入文字信息。

2.password 若是type=”password “的话,这个input标签就是一个密码框,咱们在里面输入的文字信息都会以隐藏的形式展示出来。

3.submit 若是type=”submit “的话,这个input标签就是一个提交按钮,咱们点击这个提交按钮以后就会把整个表单的数据发送到后台服务器上了。

咱们刚才提到了发送数据必定要有数据名和数据内容,数据内容就是咱们给input标签设置的value属性的值,而数据名咱们就须要在input标签里面写一个name属性来告诉浏览器咱们这个数据的名字是什么了。

 

这里咱们写一个简单的用户提交的表单:

在浏览器上的显示内容是这个样子的:

当咱们随便写一个用户名和密码以后点击提交按钮,咱们会发现咱们的网页地址上后面出现了咱们所传递的数据的信息。

?username=123&password=123 这里咱们很容易就能够看出来数据的名字和数据的内容了。

 

同时,input还有其余的数据形式:

   • type=”radio”

   • type=”checkbox”

radio是单选框的意思,当咱们给一个input设置radio的type以后,它就会变成一个圆点,咱们能够选择这个圆点,可是咱们写不少的单选框的时候,他们彷佛均可以被选中,并无单选的做用。这里是由于咱们尚未为这一组单选框设置名字,当咱们给几个radio都设置了同一个name的时候,它们就会变得只能选择一个了的单选框了。

checkbox是复选框的意思,当input的type值设置成这个以后,和radio同样的道理,设置好数据的名字,咱们能够同时选择不少的选项。

   • 当咱们开发的时候,咱们实际上是须要为每一项属性都设置一个默认的值的,像sex这种单选框,咱们设置一个默认值以后,就会有一半的用户不须要去更改这个选项,会极大地提升用户体验。

   • 设置这个默认的值的方法就是添加一个checked=”checked”属性,咱们在哪个input标签里面设置了这个属性,那么哪个选项就是默认被选择的状态

最后咱们还有一个下拉列表的标签<select></select>

<select>

<option>山东</option>

<option>黑龙江</option>

<option>北京</option>

</select>

下拉列表的name属性是写在<select>标签上的,里面option中间填写的内容就是默认的数据值,可是若是咱们给每个option都加一个value属性的话,那么option中间添加的文字则不做为传递的数据的值,value的值做为传递的数据的值,同时下拉列表的默认选中的是第一个选项,若是咱们要改变默认选项的话,要添加的属性是selected=”selected”而不是上面的checked。

那么我所总结的比较经常使用的重要的标签主要就有以上几种了,但愿对你们有帮助哟~

 

标签的分类

html的标签主要分为两类:

1.行级/内联/行内元素 display: inline;

这一类元素的特色是:

   • 不沾满整行,元素所占空间彻底由内容所控制

   • 不能够改变宽高

标签表明有:a em br select span strong

2.块级元素 display: block;

这一类元素的特色是:

   • 占满整行,不管内容多仍是少

   • 能够改变宽高

标签表明有:address div form h1-h6 p ul ol li table

其实还有第三种标签,这一类标签既不属于行级元素也不属于块级元素,它们既不独占一行,又能够随意改变宽高,好比<img><input >标签。

相关文章
相关标签/搜索