HTML常用标签

我是一条小咸鱼
182 阅读4分钟

本文主要用来记录学习HTML的过程及自我纠错和复习，还处在萌新学习阶段，难免有不对之处，还望指出。


注意事项1：

“//”最高级，它会自动适配是用”http”还是”https”，以后写网址直接”//网址”，如：//google.com。




常用HTML标签

一、<a>标签

<a>有哪些属性

（1）href

href是hyper reference的缩写，根据href的值不同，a标签又以下几种功能。

在预览自己html文件的时候建议使用

http-server
-c-1

然后在推荐域名后加想要打开的html文件路径，根目录即http-server打开的目录比如 http://127.0.0.1:8081/index.html

①网址

<a href="//baidu.com">超链接</a>

用//baidu.com可以让浏览器自行选择http或者https协议，不容易出问题

②路径

比如相对路径a/b/c，又或者/a/b/c,此时/a不代表根目录而代表代表http-server的打开目录。比如

a/b/c/index.html

③伪协议

  • javascript:代表可以连接到js
  • mailto：链接到发送邮件
  • tel：拨号
  • id：可以连接到指定id的标签位置比如

<a href="#123">跳到123</a>

（2）target

target标签代表点击此链接后打开新页面的位置，有一下几个值

①_blank

代表在新窗口打开链接

②_top

top属性比较复杂，一般在有iframe标签的时候使用比如

<a href="//baidu.com">baidu</a>    
<div>      
<iframe src="a-iframe.html" frameborder="0"></iframe>   
 </div>

iframe标签可以实现在原网页上再新开一个小窗口，他的source指向另一个html，当他引用的html中有a标签时，就可以选择top属性如

<body bgcolor="red">

我是iframe

<a href="//baidu.com" target="_top">top</a>  
<iframe src="a-iframe2.html" frameborder="0">1</iframe>
</body>

③_self

target设置为self属性则会在原窗口打开链接而不会新建窗口

④_parent

parent属性与top属性类似，只不过会用在多级iframe引用的时候，子级iframe的链接会在他的上一级窗口打开，而top则是在最外层即顶级窗口打开。

⑤ xxx

xxx代表一个确定的name可以是任意的只要不保留字冲突，如果两个两个a标签的target是同一个，则会在同一个窗口打开链接而不会另外新建窗口

⑥iframe-name

如果target的属性是iframe的name属性则会在相应的iframe中打开链接

二、<table>标签

（1）<table>标签的基本结构

<table border="1">    
  <thead>    
    <tr>     
     <th>表头1</th>     
   </tr>    
  </thead>   
   <tbody>     
   <tr>       
   <td>1</td>    
    </tr>    
  </tbody>  
    <tfoot>     
   <tr>       
   <td>2</td>     
   </tr>    
  </tfoot>   
 </table>  
  <hr />

基本结构有4部分、<table>、<thead>、<tbody>、<tfoot>，用<tr>标签代表table-row也就是行，每行中如果是表头部分则用<th>标签，代表的是table-head，其余则用<td>代表的是table-data。

（2）<table>的属性

① table-layout

  • auto 代表单元格大小随内容大小变化
  • fixed 代表尽量让单元格大小等大

② border-collapse

这个代表的是让单元格两条边框合并为一条或者分开，有collapse和separate两个值

<table border-collapse:collapse>

③ border-spacing

指的是单元格边框的距离，一般在border-collapse为separate的时候使用 当border-collapse为0的时候也可以实现边框合并的效果

三、<img>

（1） 作用

<img src="" alt="" height="" width="" >

使用img标签会发出get请求获取src中的图片

（2）属性

属性有以下几个

  1. src (source)用于指示图片的引用路径可以
  2. alt (alternative)当图片加载失败的时候可以显示的内容，可以是文字也可以是其他图片
  3. width 宽度
  4. height 高度

（3）跟img有关的事件

onload/onerror<img id="123" src="1.img" alt=""
><script>  
 123.onerror=function{       
 console.log("加载成功")    
}
</script>

可以被js调用

（4）响应式布局

可以在css中设置

<style>  
  img{    
    max-width:100%;  
  }<style>

四、input

（1） 作用

发送get请求，展示一张图片




访问image，然后image发送请求，访问dog.png（发一个请求，请求到了就去访问）。

（2）属性

Height：高度（只写高度，宽度会自适性）

width：宽度（只写宽度，高度会自适性）

忠告：永远不要把你的图片变细

src：引用该图像的文件的的绝对路径或相对路径 

alt：用于图片加载失败后显示





（3）事件

onload/onerror: 你的图片是否加载成功，如果加载成功，加载onload。如果没有成功，加载onerror。



（4）响应式


max-width:100%(加上这一句你的手机也可以正常浏览):最大宽度是百分之百


五、form

1.作用：发送get/post请求，然后刷新页面


通过这种修改源代码的方式搞清楚（用来控制是哪个页面），“xxx”写什么，就会请求到哪个页面



2.属性：action/autocomplete（自动填充）/method/target

3.事件：onsubmit


avatar
文章
阅读
粉丝