HTML标签

介绍

说起HTML标签,很多人都觉得很简单,比如我刚开始学的时候就是写网页不会的就去W3C school里去查标签,属性。每次都是查完就忘了,而且那个网页还特丑,访问还特慢,不如这次就好好的总结一下常用的HTML标签吧。

语义化

以前总是喜欢

,用这两个东西写遍天下的网页。后来在知乎逛多了才知道语义的重要性,简单来说就是能用有字面意思的标签就用字面意思的标签,如
表示主要内容,
表示每个区块,这样别人看自己的HTML代码的时候就会一目了然。

下面给出常用的语义化标签

主要内容
区块1
区块2

主要标题


次要标题

第一自然段

第二自然段

次要标题

第一自然段

第二自然段

版权所有

可替换标签

CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的 外部对象。

比如常用的,浏览器会先下载图片,然后用图片将这个标签替换掉。

一起用

在iframe里指定name,在a里指定target,这个target指向iframe里的name,这样就可以将a里面链接的内容投射到iframe里了。


Baidu
QQ

注意:

  • 用iframe很卡,相当于新打开一个网页
  • frameborder就是iframe的边框宽度,太丑了,一般设置为0

这个标签可能我们都很熟悉,就是跳转页面的,但是还可以发送GET请求。

target

target属性是每用一次查一次,这里就简单总结一下

  • target="" 默认为_blank,会在新窗口里打开
  • target = "_blank" 新打开一个新的窗口,并打开
  • target = "_self" 在当前窗口打开,如果嵌在别的页面的iframe里,则在iframe里打开: index1 -> index2,打开index2
  • target = "_parent" 如果嵌在别的页面的iframe元素里,则不在iframe元素里打开,而是那个窗口打开: 如果index1 -> index2,打开index1
  • target = "_top" 在顶层窗口打开,如果 index1 -> index2 -> index3 ,一个套一个,那么在index1里点击,则会在index1打开
  • target="xxx" 在name="xxx"`的iframe里打开网页

download

  • download属性,下载src里的内容

href

  • href="qq.com" -> 会变成相对路径,不能正常访问qq.com,应该写成https://ww.qq.com,//qq.com(使用当前页面的协议)
  • href="xxx.html" -> /xxx.html,以当前目录为基准
  • href="#iiiii"直接加到 index.html 后面 -> index.html#iiii,只做页面内的跳转,不发起Get请求
  • href="?name=hi"浏览器自动判断意思,将查询放到index.html后面 -> index.html?name=hi,自动发起Get请求
  • href="javascript: alert('hi')"伪协议,可以写JS代码,直接执行JS代码。以前想点一个东西就执行代码,不写onclick事件。用法:javascript:; -> 点击一个a标签,但是不跳转

form的作用一般是展示一个表单,而一般用来发送POST请求。并而只能发送GET和POST请求,RESTful的其他请求都不能发送。

示例


        
      

提交

一般来说要加上method="POST"来发送POST请求,一般不发送GET请求,需要submit按钮来提交去发送POST请求。

注意:如果用HTTP协议来发送请求,那么数据将以明文形式传给服务器,如果想加密,那么必须用HTTPS来发送POST请求。

x-www-form-urlencoded

如果打开Chrome的Network会看到发请求的格式(Content-Type)是x-www-form-urlencoded,这就表示发请求的数据是用UTF-8来表示字符的,如:“你”就变成了%E4%BD%A0,其中E4 BD A0就是“你”。

target

其实很多人也不知道还有这个target属性的,这个target属性和标签里的target值是一样的,也是控制在哪个地方打开新的网页。

这个标签可以让我们点击文本的时候同时选中里的内容。不过一般人会这么写



但是这样要写个ID,我们都知道一般不会给HTML元素起ID的,所以可以用标签包裹元素


radio / checkbox

其实刚开始学radio或者checkbox的时候,总会发现怎么没有了这个field的数据,其实我们都比较容易忘记加上name属性啦,所以正确打开方式是

你喜欢的水果



爱我?


button / submit

我们经常会遇到这样的情况,有时候加,button标签,那么会自动升级为submit

  • 如果按钮的写了type ,而不会变成submit
  • 如果写了一个,那么也是不能提交的,因为这只是一个普通的button
  • 如果写了,那么点击就可以提交