盒子
盒子
文章目录
  1. 一、 iframe 的学习
  2. 二、a标签的学习
  3. 一定要记得a标签可以发起get请求
  4. 三、form标签的学习
  5. 四、input button标签的学习
  6. 五、下拉框
  7. 六、table标签的学习
  8. 七、空元素
  9. 八、可替换标签
  10. 九、全局属性
  11. 十、display不止三种

HTML重点学习

通过重点标签的学习前进

一、 iframe 的学习

iframe通俗的的理解就是,可以在页面里面嵌套新的页面
它的使用会使页面变卡,一般会有一个固定的尺寸,默认的。他也属于可替换元素行列。我们可以通过CSS来改变尺寸
frameborder消除边框
name属性与a标签结合

<!-- <iframe name=iframe src="http://qq.com" ></iframe> -->

<iframe name="000" src="" ></iframe>
<a target="000" href="http://qq.com">aaaa</a>

a标签的链接会在iframe的内嵌窗口里面打开

二、a标签的学习

a标签四种常见的target

1
2
3
4
<a href="http://qq.com" target="_blank">topQQ</a> //在新的页面打开链接
<a href="http://qq.com" target="_self">topQQ</a> //在当前窗口打开链接
<a href="http://qq.com" target="_parent">parentQQ</a> //在父级
<a href="http://qq.com" target="_top">topQQ</a> // 在顶级

a标签可以设置download属性,使其不打开链接。而是下载当前页面的HTML。

也可以把你当前目录下的文件下载

1
2
<a href="http://qq.com" download>下载</a>
<a href="222/分配的ip地址.xls" download>下载文件</a>

a标签会自动添加当前页面的协议。例如以下例子,如果不写http协议,会根据当前页面的协议自动加上,如果当前页面是http协议(通过下面的http-server模拟),那么就打开qq.com,如果只是本地的HTML,那么协议时file协议,不会下载

1
<a href="//qq.com" download>下载</a>
1
<a href="//qq.com" download>下载</a>

a标签会在地址栏后加上锚点,即#开始的那串字符串

1
<a href="#kkkk" download>下载文件</a>

a标签会在地址栏后加上?name=wushao

一定要记得a标签可以发起get请求

1
<a href="?name=wushao" download>下载文件</a>

a标签可以使用伪协议,这是历史遗留问题,以前的前端想在a标签里面直接打开js代码。现在常用于一些奇葩需求。
如果,你不想这个a标签,有任何动作,无法点击,就用伪协议。

1
2
<a href="javaScript:;" target="_top">topQQ</a> //无法操作了
<a href="javaScript:alert(1);" target="_top">topQQ</a>

反之如果你只是加锚点,那么会定位到开始位置。
如果你href=" ",那么会刷新页面。
综上所述,如果你对a标签什么也不想做,就用伪协议


小型服务器 npm i -g http-server
它会安装在npm目录下,把bin目录添加到~/.bashrc脚本配置文件里面,在文件的最后一行加上

1
export PATH="http-server的绝对路径:$PATH"

配置好path之后,就可以直接使用了。
在你想模拟http协议环境的时候,在那个目录下打开http-server就可以用了


三、form标签的学习

form a 标签最大的区别就是form标签是post提交,虽然你可以修改成get,但是没有人蛋疼的这么做。

  • 默认的get方法演示
    1
    2
    3
    4
    5
    6
    7
    <form action="users" >
    用户:<input type="text" name="name"><br>
    密码:<input type="text" name="password"><br>
    <!-- <input type="submit" value="提交"> -->
    <input type="button" name="button" value="button">
    <button type="submit">提交</button>
    </form>

form默认的get方法.png

以上是智障的写法,下面是优雅的写法

  • 注意form必须要用一个type=submit的input不然无法提交数据!!!!
    1
    2
    3
    4
    5
    6
    <form action="users"  method="post">
    用户:<input type="text" name="name"><br>
    密码:<input type="text" name="password"><br>
    <input type="submit" value="提交">
    <input type="button" name="button" value="button">
    </form>

type是submit和button.png
form方法post的方法.png

  • 以前我们在请求里面只能看见前三个部分,有了form标签之后,终于能看到第四部分,form data啦
    post解析.png
  • 如果你的form表单里面没有一个type=submit的input,可以使用type=submit的button的标签,也可以使用
1
2
3
4
5
6
7
8
<form action="users" >
用户:<input type="text" name="name"><br>
密码:<input type="text" name="password"><br>
<!-- <input type="submit" value="提交"> -->
<input type="button" name="button" value="button">
<button type="submit">提交</button>
//等价于 <button >提交</button>
</form>

form表单有且只有两个方法,你不规定method那么就是get,你就是智障;所以你规定method=”post”,你不智障;如果你写了这两种之外的方法,那么还是按照get方法提交,你是智障中的战斗机。


四、input button标签的学习

  • input button 标签的最大区别就是input标签是空标签。
  • input 标签的type有很多种
    而且input必须有name属性,因为你提交的数据要用,组成name=value。
1
2
3
4
5
<input id="POST-name" type="text" name="name"> //普通文本
<input id="POST-name" type="password" name="password"> //密码
<input id="POST-name" type="submit" value="提交"> //提交
<input id="POST-name" type="checkbox" name="name"> //复选框
<input id="POST-name" type="radio" name="name"> //单选框
  • 复选框和单选框的小练习
1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="users" method="post">
用户:<input type="text" name="name"><br>
密码:<input type="text" name="password"><br>
<!-- <input type="submit" value="提交"> -->
<input type="button" name="button" value="button">
<button type="submit">提交</button>
<br>
<input id="love" type="checkbox" name="loveme"> <label for="love">爱我 </label>
<input id="eat" type="checkbox" name="loveme"> <label for="eat">馒头 </label>
<input id="play" type="checkbox" name="loveme" checked> <label for="play">篮球 </label>
<input id="apple" type="radio" name="name" checked="checked"><label for="apple">苹果 </label>
<input id="orange" type="radio" name="name"><label for="orange">橘子 </label>
</form>

checkbox和radio.png

checked=”checked” 与 直接书写 checked 一样的效果

  • 注意以上的代码中,包含的 label标签,有时候我们为了人性化的需求,只要鼠标点中文字的一部分就算选中了,所以用 label标签的for属性与input的id属性关联。
1
<input id="play" type="checkbox" name="loveme" checked> <label for="play">篮球 </label>
  • 当然了,你身为一个老司机,应该这么写
1
<label ><input type="checkbox" name="loveme" checked> 篮球 </label>
  • 省了两个属性,简洁优雅。
    button标签也有很多type
1
2
3
4
<button name="button" type="button"> Click me </button> 
//仅表示按钮,没有任何作用.它可以有与元素事件相关的客户端脚本,当事件出现时可触发,与js结合使用
<button name="button" type="submit"> Click me </button>
//此按钮提交表单数据给服务器
  • input 也可以实现滑动的效果
1
<input type="range" name="" value="">

range.png

五、下拉框

1
2
3
4
5
<select>
<option value="1">湖人</option>
<option value="2" selected>凯尔特人人</option>
<option value="3">马刺</option>
</select>

凯尔特人人是默认勾选的

六、table标签的学习

table在古代用来做布局,现在基本不用了。
只有四个元素,thead、tbody、tfoot、colgroup。即使你不写tbody你也有这个标签,而且可以不止一个。thead里面有tr、th,tbody里面有tr、td,tfoot里面有tr、td,colgroup里面有col,用来控制列的宽度,基本不使用了。我现在维护的网页,用的table 布局,修改很麻烦

tr table row
th table header
td table data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
//即使写在这里。浏览器也会把他放到底部去
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
//可以包含多个tbody

noscript标签表示如果用户禁用了js,就显示该标签里面的内容


七、空元素

就是里面不能有内容的标签

八、可替换标签

CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有
<img> <object> <video> 和 表单元素,如<textarea> <input> 。 某些元素只在一些特殊情况下表现为可替换元素,例如<audio><canvas>
上面是MDN的原话,反正我看的云里雾里。用图片解释一下吧。
可替换元素.png
img标签的尺寸其实是由src决定的,但只是第三级的重要性,你可以用width修改,你也可以用CSS来修改。

九、全局属性

十、display不止三种

不仅仅有 none inline block inline-block 还有很多
常见的display默认的是block的有divp 、form 和HTML5中的新元素: header 、 footer 、 section。我们不需要特别关心display的,因为这个主要由CSS修改