HTML入门笔记2

2019-08-21 本文已影响7人郑馋师

今天学习HTML更加复杂的标签，应该做一篇blog记录一下。

重点标签

今天要分享的标签大概如下。

    <a href=""></a>
    <table></table>
    <img src="" alt="">
    <form action=""></form>

<a href=""></a>

先来分享a标签，平时可以通过这个用来附上一些链接，但是一般都是在原网页打开，那怎么可以在新网页打开？
<a href="" target="-blank"></a>这样即可。

a标签的路径

网址

https://
http://
//
注意这个是无协议网址，容错率最高，也就是无论是www还是https什么形式都可以打开，非常舒服。

路径

/a/b/c
这里虽然是绝对路径，但是html默认你这种路径的根目录都是打开的那个文件夹，比如我在名字为demo的文件夹打开的html，那么这个demo的文件夹就是根目录。
a/b/c

伪协议

JavaScript
<a href="Javascript:;"></a>这样可以整个空的，用于设置这样的效果：在网页中点了，网页无反应的情况。
tel
<a href="tel:1374589125"></a>就会自动拨号。打电话给你。

<a href="#xxx"></a>就会自动寻找id为xxx的。并且网址会从http://127.0.0.1:8080/a-herf.html变成http://127.0.0.1:8080/a-herf.html#xxx。
Tips：

只有#和id有用，class和与之对应的.xxx或者[xxx]都不可有这个功能。

mailto
<a href="mailto:123456@qq.com"></a>就会自动发邮件。

target的类型

-self
<a href="" target="-self"></a>当前页面打开。页面嵌套多个页面的情况
c中打开-self，网页会在c页面打开。
-blank
新开一个页面打开。
-top
在这里的顶级页面打开。c中打开top会在a中打开网页。
-parent
父级页面打开。c中打开parent会在b中打开。
name
<a href="" target="xxx"></a>会新开一个名字是xxx的窗口，如果已经有了这个为名字的窗口，则网页会覆盖这个窗口的页面。

table

主体构成

1. thead
表头
2. tbody
表身
3. tfoot
表尾

tr
表的一行
th
一行表的开头
td
表的数据。
Tips：

样式一般会有

<style>
      table {
        table-layout: auto;
      }
    </style>

auto就是自动调节表格每个格子的宽度，随字数变化而变大变小，fixed就是固定的。

        border-collapse: collapse;
        border-spacing: 0ch;

通过这个消除格子的间距，让他产生如下变化。

消除格子间的间距

img

发送一个get请求展示图片。

属性

alt
就是让他失败加载不出来的时候出现的话。

故意整一个错的地址

404了

width/height
宽高，一般来说只会设置其中一个防止他比例扭曲。
手机页面的时候让他相应放大缩小只需要

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
        max-width: 100%;
      }
    </style>

就可了。

form

发一个get/post请求后刷新页面。

  <form action="" method="POST"></form>

在这里面用method设置是post还是get。

action

设置路径。就是form往哪里发起这个input。

target

和a中用法相同，这里是看看是不是在新页面进行form的发起。

input

input是输入，里面一般要设置input type

input type

submit
自动可以把input识别成我们的文字。
text
文本框
color
password
会像密码框一样遮挡你的内容。
checkbox
多选，要表示他们是同一组checkbox，让他们名字相同。
file
文件，需要多选文件就<input type="file" multiple />
hidden
给机器输的，而非人类，可以自动获取所需要的东西。
radio
单选，但是如果有两个框，需要name一样才可以单选其中一个。
textarea
多行文字编辑，但是框框可以拖动大小，如果不想他被拖动就

      <input type="textarea" style="resize: none">

input其他一些属性

value
给input那个东西改名字，比如你不想让他叫提交就可以这样改名字
<input type="text" value="上个屁" />就可。
autocomplete
<input type="text" value="上个屁" autocomplete="on" inputmode="email"/>
这样就是打开这个提示输入的属性，提示输入的是emai。
botton
botton中间可以加入其他来修饰bottom，input不可以。

   <button>
        <strong></strong>
      </button>

这样可以修饰button。

select

     <select>
          <option value="111">周一</option>
        </select>

这样就是实际上选择了111，但是用户看只能看到周一。
这次分享就这么多，希望可以继续努力学习继续分享。