a标签的用法
- 属性
- href :包含超链接指向的 URL 或 URL 片段.
可以进行的取值有- 网址：为什么会选用// ？因为其最高级，会自动选择使用http还是https。
可以通过点击文本访问百度页面。<a href="https:// baidu.com" >baidu</a>
输出为
- 路径：可以直接去/a/b/c中去;最开始的/不是根目录，而是http的目录
- 伪协议：
- JavaScript：代码；————冒号和分号不能少，现在时候用该取值的意义是点击之后没有动作的标签；如果需要一个a标签，但是却不让它做任何动作，只有取值为"JavaScript:;"可以做到
<a href="javascript:;">空的伪协议</a>
- mailto:邮箱；————只要点击发邮件则会进行发邮件；
<a href="mailto:1043292898@qq.com;">发邮件</a>
- tel:手机号；—————直接点击打电话，则会进行电话呼叫
<a href="tel:13000000000;">打电话</a>- ID:href=#xxx
<p></p> <p id="xxx"></p> <p></p> <p></p> <p></p> <p></p> <a href="javascript:alert(1)";>JavaScript伪协议</a> <a href="javascript:;">空的伪协议</a> <a href="#xxx;">查看xxx</a>
- target：该属性指定在何处显示链接的资源。一般后面都会接blank就是在空白页面打开；其取值有：
- 内置名字：_blank/_top/_parent/_self
<a href="http://google.com" target="_self">google</a>
<a href="http://baidu.com" target="_blank">baidu</a>
如图：
_top的效果与_self的区别，需要引用iframe属性
<div>
<iframe src="a-target-iframe.html" frameborder="0"></iframe>
</div>
在新建的一个标签"iframe"，将背景弄成红色好区分，内容为
<body style="background: red;">
我是 iframe
里面有一个a标签
<a href="//baidu.com" target="_self">self</a>
</body>
如下图，点击self，那么网页会在,小的窗口打开，如果都修改为top这网页会在外边的白色窗口打开。则会在白色区域打开网页!
parent.png
_parent是我的父级窗口，则如上图中，红色区域的父级窗口是白色区域
<a href="//baidu.com" target="_self">self</a>
parent与top之间的区别
1. _top就是在顶级窗口打开
2. _parent就是在当前窗口的上级窗口打开
当target="xxx"时，意味着，html会创建一个窗口叫做xxx，则在该窗口代开页面，存在多个连接的target="xxx",打开窗口是后一个覆盖前一个窗口，重复的利用同一个窗口来打开界面。
- 程序员：iframe里面在弄一个iframe的标签；可以做一个双窗口页面，但是iframe标签已经不使用了，不需过多纠结。
<body>
<a href="http://google.com" target="xxx">google</a>
<a href="http://baidu.com" target="yyy">baidu</a>
<iframe src="" name="xxx"></iframe>
<hr>
<iframe src="" name="yyy"></iframe>
goodbye页面.png
- download：很多浏览器不支持这个方式，理论上是下载这个网页
- rel=noopener：为了防止一个bug,当学会了css之后会有涉及
- a标签的作用
- 跳转外部页面
- 跳转内部锚点
- 跳转到邮箱或电话等
img标签
- 作用：发出一个get请求，展示一张图片。————需要使用开发者工具查看；{在html中写入img会默认src}
- 属性：
- alt:当图片加载失败时，出现文字提示用户；
- height/width：图片的高度和宽度，如果只写宽度/高度，另一个为注明的属性会自适应；如果两个同时写，那么图片就会变形，这还绝对不允许的，不可以改变他的比例。
- src：一般是图片的地址（可以是相对路径也可以是绝对路径）。
- onload/onerror:用来测试，同时在图片失败的时候进行挽救；
- 首先制作挽救的图片，编辑进去，当失败是会出现，给用户更好的体验；
- 响应式：一般都会默认在手机上可以看到的 —————只需要加上这句好就成为了其他的适应尺寸： max-width:100%
<style> * {margin : 0; padding: 0; box-sizing: border-box; } img {max-width: 100%; } </style>
table标签
table标签目前常用的就三个标签thead、tbody、。后面不能直接接其他的标签。这三个里面可以接其他的标签。tr：表格中的一行,th：表头，每行中的第一个；td:表中数据
- thead：是表的头部（可以没有这个标签）、tbody：表身、tfoot：表底（这个也可以没有），这些顺序写错没有任何关系，html会超强的自动纠错；
<thead> <tr> <th>英语</th> <th>翻译</th> </tr> </thead> <tbody> <tr> <td>hyper</td> <>td>超级</td> </tr> <tr> <td>target</td> <>td>目标</td> </tr> </tbody>
得出的效果如图；
table.png
如果有两个表头要怎么操作呢？如下：
<body>
<table>
<thead>
<tr>
<th></th>
<th>小明</th>
<th>小红</th>
<th>小小</th>
</tr>
<tr>
<th>语文</th>
<td>69</td>
<td>98</td>
<td>67</td>
</tr>
<tr>
<th>数学</th>
<td>79</td>
<td>89</td>
<td>88</td>
</tr>
<tr>
<th>英语</th>
<td>87</td>
<td>78</td>
<td>89</td>
</tr>
</thead>
<tfoot>
<tr>
<th>总分</th>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
</tfoot>
</table>
</body>
table2.png
- 相关的样式
- table-layout：属性，有不同的属性，一般使用auto，会根据表内容进行调整表宽和高。
- border-spacing：每一个格子的大小
- border-collapse：使格子之间没有缝隙，连接起来的
这些是在HTML文件的head内进行添加，从而来规定表的格式；一般在写数据时最好将这三个属性提前写。
<style> table { width: 600px; table-layout: auto; border-spacing: 0; border-collapse: collapse;} td,th{ border: 1px solid red; } </style>
结合上图后得出的效果图
其他值得注意的标签
form标签
作用：发get或者post请求，然后刷新页面
属性：
-
action:请求哪一个页面
<form action="/xxx"> <input type="text"> <input type="submit"> </form>
-
autocomplete：是否自动填充，只有两个值：on/off,on会自动建议一些用户名。
<form action="/xxx" method="POST" autocomplete="on"> <input type="text"> <input type="submit"> </form>
- target:将哪一个页面从xxx窗口打开
<form action="/xxx" method="POST" autocomplete="on" target="_blank">
<input type="text">
<input type="submit">
</form>
- 事件：onsubmit:当用户点击提交时就会提交，浏览器会跟你你当前的语言自动变成你认识的两个字可以通过value来更改如下：
<form action="/xxx" method="POST" autocomplete="on" target="_blank">
<input type="text">
<input type="submit" value="搞起“>
</form>
- 还有另外一种方式就是使用button；
<form action="/xxx" method="POST" autocomplete="on" target="_blank">
<input type="text">
<input type="submit">
<button type="submit">搞起
</button>
</form>
- 二者之间的区别:input里面不能再有内容,只能是纯文本；button里面可以有任何东西；
<form action="/xxx" method="POST" autocomplete="on" target="_blank">
<input type="text">
<input type="submit">
<button type="submit">
<strong>搞起</strong>
</button>
</form>
- form里面必须要有type="submit"，如果不填写，则默认的就是submit，如果不是submit，而是其他的内容则不能进行提交
- input出来的是password出来的效果是不显示密码，显示的是小圆点。
<form action="/xxx" method="POST" autocomplete="on" target="_blank">
<input type="password">
<input type="submit" value="搞起">
</form>
- radio：勾选的地方形状的圆形
<form action="/xxx" method="POST" autocomplete="on" target="_blank">
<input type="radio">男
<input type="radio" value="搞起">女
</form>
男女可以同时选择，怎么才能选一个呢？如下
<form action="/xxx" method="POST" autocomplete="on" target="_blank">
<input name=gender type="radio">男
<input name=gender type="radio" value="搞起">女
</form>
就可以二选一了。
- 如何进行多选呢？checkbox，用同一个name，就可以知道他们为一组的
<form action="/xxx" method="POST" autocomplete="on" target="_blank">
<input name= hobby type="checkbox">跳
<input name= hobby type="checkbox" value="搞起">唱
<input name= hobby type="checkbox" value="搞起">rap
<input name= hobby type="checkbox" value="搞起">玩
</form>
- 选择文件时用file，实现多选小添加multiple
<form action="/xxx" method="POST" autocomplete="on" target="_blank">
<input type="file" multiple>
</form>
- textarea:用来有个文本框给用户填写内容，为了固定其大小，则需要进行设置；
<textarea style="resize: none; width: 100%; height:300px">
</textarea>
- select:可以选择东西内容
<select>
<option value="0">-请选择-</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
</select>
- 注意
- form里要放一个type=submit才能出发submit事件
- 一般不监听input的click事件
- form里面的input要有name
