a标签

属性

1. herf

herf的取值

1.1 网址

google.com
google.com
//google.com

1.2 路径

绝对路径：a/b/c
相对路径：index.html及./index.html

1.3 伪协议

javascript:代码;
mailto:邮箱
tel:手机号

1.4 id

herf=#xxx,意思就是可以跳转到id名为xxx的标签

    <p id="xxx">555</p>
    <a href="https://google.com" target="_blank">超链接</a>
    <a href="a/b/c.html">c.html</a>
    <a href="./index.html">index.html</a>
    <a href="javascript:alert(1);">javascript伪协议</a>
    <a href="javascript:;">查看</a>
    <a href="#xxx">查看xxx</a>
    <a href="mailto:132@qq.com">发邮件给132</a>
    <a href="tel:12345674567">打电话给我</a>

2.target

target的取值

内置名字
1. -blank 在空白页面打开
2. -self 在当前页面打开
3. -top 在顶部页面打开
4. -parent 在父级页面打开

top和parent适用于有iframe内嵌窗口的情况

白色为红色的top，红色为绿色的parent

程序员命名
1. window的name target="xxx"，如果有个窗口叫xxx，就用它，否则就新建一个叫xxx的窗口
2. iframe的name 比如做个古德百网站，这个页面可以集成百度和谷歌

   <a href="https://baidu.com" target="xxx">百度xxx</a>
   <a href="https://google.com" target="yyy">googleyyy</a>
   <hr>
   <iframe src="" name="xxx" frameborder="0"></iframe>
   <hr>
   <iframe src="" name="yyy" frameborder="0"></iframe>

3.download

作用

不是打开页面，而是下载页面

问题

不是所有浏览器都支持

a标签的作用

跳转到外部页面
跳转到内部锚点
跳转到邮箱或者电话

iframe标签

内嵌窗口，现在已经很少使用了

table标签

完整的table标签包含的元素有

thead
- tr table row 一行
- th table head 表头
tbody
- tr table row
  - td table data 数据
tfoot
- tr table row
  - td table data 数据

<table>
        <thead>
            <tr>
                <th>英语</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>
                <td>超级</td>
            </tr>
            <tr>
                <td>target</td>
                <td>目标</td>
            </tr>
            <tr>
                <td>reference</td>
                <td>引用</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>空</td>
                <td>空</td>
            </tr>
        </tfoot>
    </table>

效果如下图

两个表头如何实现

如图所示，这里有两个表头，分别是小红小明小颖这一行和数学语文英语这一列

表头都用

数据都用

<table>
        <thead>
            <tr>
                <th></th>
                <th>小红</th>
                <th>小明</th>
                <th>小强</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
            <tr>
                <th>语文</th>
                <td>79</td>
                <td>82</td>
                <td>92</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>100</td>
                <td>91</td>
                <td>86</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>200</td>
                <td>200</td>
                <td>200</td>
            </tr>
        </tfoot>
    </table>

table相关的样式

table-layout
- table-layout: auto; auto表示根据内容自动计算宽度
- table-layout: fixed; fixed表示尽量让每列等宽
border-collapse和border-spacing 用来调整表格border的间隔，一般设置为：

table {
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 0;
        }

设置前：

设置后：

img标签

作用

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

属性

src: 图片地址
alt: 如果图片加载不出，就会显示alt属性里的内容，作为备用
height: 高度，只写高度，宽度就自适应
width: 宽度，只写宽度，高度就自适应

如果不按比例设置高和宽，会导致图片变形，是大忌！

事件

onload: 监听事件，事件成功
onerror: 监听事件，事件失败，可以换另一张图补上（补救措施）

响应式

max-width: 100% 这样图片可以自适应不同屏幕大小

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        img {
            max-width: 100%;
        }
    </style>
<body>
    <img id="xxx" width="400" src="下载.jpg" alt="蕉太狼">
    <script>
        xxx.onload = function(){
            console.log("图片加载成功");
        };
        xxx.onerror = function(){
            console.log("图片加载失败");
            xxx.src = "/404.png";
        };
    </script>
</body>

form标签

作用

发出get和post请求，然后刷新页面

属性

action：控制请求哪个页面
method：控制是用get还是post来请求
autocomplete：是否自动填充，值可取"on"和"off"
- on：浏览器能够根据用户之前在表单里输入的值来给出提示
- off：浏览器没有提示
target：同a标签，告诉浏览器要提交到哪个页面，哪个页面要刷新

事件

onsubmit

input的submit和button的submit有什么区别

input标签里不能有其他标签

button标签里可以有其他标签

 <form action="/xxx" method="GET" autocomplete="on">
        <input type="text" name="username" id="">
        <input type="submit" value="input提交">
        <button type="submit">
            <strong>button提交</strong>
        </button>
 </form>

效果如下

一个表单必须有一个type=submit的东西，要么是Input要么是button,否则就不能提交

input标签

作用

让用户输入

属性

类型type：

text：文本
color：颜色
password：密码，不展示输入内容，以.代替
radio：单选，二选一：让两个input的name相同，可以实现

 <input type="radio" name="gender"> 男
 <input type="radio" name="gender"> 女

checkbox: 多选，同样的让input的name相同，就知道这几个选项为一组

<input type="checkbox" name="hobby" id="">唱
<input type="checkbox" name="hobby" id="">跳
<input type="checkbox" name="hobby" id="">rap
<input type="checkbox" name="hobby" id="">篮球

file：上传文件

        <input type="file">上传单个文件
        <input type="file" multiple>上传多个文件

hidden：看不见的输入，一般用来给机器自动输入

        看不见我吧：<input type="hidden">

textarea：多行文本输入，可用CSS来固定文本框的大小

        <textarea style="resize: none; width: 50%; height: 300px"></textarea>

select：选择，一般搭配option使用

        <select>
            <option value="">请选择</option>
            <option value="1">星期一</option>
            <option value="2">星期二</option>
        </select>

还有number/tel/button等等

其他：

name/autofocus/checked/disabled/value等等

事件

onchange：当用户输入改变时，触发的事件
onfocus：当用户把鼠标集中在它身上时，触发的事件
onblur：当用户用鼠标从里面出来时，触发的事件

验证器

HTML5新增功能

如后面加required，就是必须输入

        <input name="username" type="text" required>

注意事项

一般不监听input的click事件
form里面的input要有name
form里要放一个type=submit，才能触发submit事件

[资料来源：饥人谷]

HTML常用标签

a标签

属性