HTML标签参考（二）

最新推荐文章于 2024-03-17 11:55:14 发布

chiniue1759

最新推荐文章于 2024-03-17 11:55:14 发布

阅读量94

点赞数

文章标签： javascript 前端人工智能 ViewUI

原文链接：https://my.oschina.net/u/3953786/blog/2962973

版权

一些重要的标签

• ol li

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

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

• ol有一个属性叫做type属性，这个属性的作用是用来设置每一个子项前面的显示内容的。默认情况下按照数字来排序的，我们可以改成type=”a” ，这样前面序号是按照小写字母来排序的。

同样的，type的属性值还可以设置成A–>按照大写字母来排序；i—>按照i的个数来排序（罗马数字？）；I—>大写I的个数来排序，除此之外，设置成其他的属性都是错误的，而错误的情况下ol会按照默认的数字来排序，2和b等都算是错误的值哟~

• ol的第二个属性叫做reversed属性，当我们给ol加上reversed=”reversed”的时候，子项就会变成倒序来排列。这个属性直接写reversed也是可以的，不过我同样认为reversed=”reversed”才是规范的写法。

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

但是有一个很重要的问题就是，我们在哪个网页看到文字前面有这些什么数字啊字母啊的序号吗？

所以最后的结果就是，我们基本很少用到ol、li标签哟~

• ul li

这一组标签是无序列表，除了前面的序号都变成了点（• ）之外，其他的和有序列表基本一样。

• 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>

</tr>

<tr>

</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>

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

那么我所总结的比较常用的重要的标签主要就有以上几种了，希望对大家有帮助哟~