这里只写a标签、img标签、table标签、form标签和input标签的用法。

1. a标签

a标签常用属性有：href、target。

1.1 a标签的href取值

1.1.1 网址

以谷歌的网址为例：google.com

<a href="https://google.com" > 链接</a>
<a href="http://google.com" > 链接</a>
<a href="//google.com/" > 链接</a>

以上三个均是访问谷歌，但是最后一种写法较为推荐，因为会自动切换成https协议或http协议。

1.1.2 路径

<a href="/a/b/c.html">访问</a>
<a href="a/b/c.html">访问</a>
<a href="index.html">html</a>

第一种写法里的 “/” 由于http协议是指http的根目录。以上写法均可。

1.1.3 伪协议

1. javascript:代码;——里面的代码是可以被执行的。 现在一般这个协议来测试空的伪协议，例如

<a href="javescript:;">空的伪协议</a>
<!--只有这样写才会什么都不做，不刷新也不滚到顶部-->

但是

 <a href="">空的伪协议</a><!--这样的a标签只会刷新页面-->

2. id （href=#xxx）

<a href="#xxx">查看xxx</a>

3. 发邮件（mailto:邮箱）

<a href="mailto:邮箱">发邮件</a>

4. 打电话 （tel：手机号）

<a href="tel:手机号">打电话</a>

1.2 a的target取值

1. _blank、_self、_top和_parent

<a href="//google.com/" target="_blank"> 在新页面打开链接</a>
<a href="//google.com/" target="_self">在当前页面打开链接（默认值）</a>
<a href="//google.com/" target="_top">在最顶层打开链接</a>
<a href="//google.com/" target="_parent">在上一级打开链接</a>

2. 命名窗口

• window + name :在开发者工具里，查看窗口名字。
• iframe的name：可以命名该窗口（iframe标签——内嵌窗口）

<iframe src="" name="yyy"></iframe>

2. table标签

2.1 table相关标签

table只有以下三个标签：thead（表头）、tbody（表身）、tfoot（表尾部）。

在这三个标签中又有：tr（行）、th（表头）、td（table data）。

thead包含tr、th；tbody 包含 th 、td。

2.2 table相关的样式

1. table-layout:值; 值有两种：

（1）auto（自动计算表格宽度）

（2）fixed（表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。）

fixed较为平均；具体可看MDN

2. border-collapse 和 border-spacing 由于表格默认每个格子之间相互分离，所以表格会设置border-collapse 和 border-spacing 使表格合并表现。

<style>
        table{
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 0;
        }
 </style>

3. img标签

img标签：发出get请求，展示一张图片。

3.1 img标签属性

1. alt （图片加载失败时显示的内容）

<img src="叶s.jpeg" alt="额">//当图片加载失败，页面出现一个 额 字

2. width （宽度）和 height （高度）

<img id="xxx" width="400" src="叶.jpeg" alt="">

当 width 和 height 其中一项设定好，另外一项会自动适应。 目前不要两方都设定，会导致图片严重变形。

3. src （图片地址）

3.2 img标签事件

onload （加载成功）onerror（加载失败）。 当图片加载完成后，需要有所反馈显示成功与否。

<script>
        xxx.onload = function(){
            console.log("图片加载成功")//加载成功会在页面显示 图片加载成功
        }
        xxx.onerror = function(){
            console.log("图片加载失败")//加载失败会在页面显示 图片加载失败
            xxx.src = '/time.jpg'   
        }
</script>
    <!--xxx.src = '/time.jpg' 
    这一行不是必须要写的，是在图片加载失败时用此图片来挽救-->

3.3 响应式

响应式与手机页面有关，可以使图片适应手机屏幕。需要：max-width: 100%;

img{max-width: 100%;}
<!-- max-width: 100%; 响应式（手机页面）-->

开发者工具中可选择手机型号来观察图片显示效果。

4.form标签

form（表单）：发出get或者post请求，刷新页面。

4.1 form标签属性

action="后台路径" ；autocomplete 自动填充 ；method 决定发出get请求还是post请求；target——参考 a 标签中的target。

<form action="/xxx" method="POST" autocomplete="on" target="_blank">
        <!--form里target跟在a标签的target一样——在哪里打开页面 -->
        <!-- form内加上autocomplete（自动填充属性）-->
        <input name="username" type="text">
        <!-- name填写自动填充的内容 （这里用 用户名 举例）-->
        <input type="submit">
</form>

上述例子使得 input 自动可填充用户名，autocomplete也可以关掉为“off”。

4.2 事件（onsubmit）

form标签里必须有 type="submit ；

type="submit"会是浏览器根据情况写“提交”等字样，可以更改，例如将 提交 更改为 搞起。

<form action="/xxx">
     <input type="text">
     <input type="submit" value="搞起">
 或者
     <button type="submit"><strong>搞起</strong> </button>
</form>

button 、input 的区别就是input无法有其他标签，但是button可以。（例如上方的strong标签）

5.input标签

input标签: 使用户输入内容。

5.1 input标签常用属性

text——文字 ；color——颜色 ；password——使输入的内容变成小圆点 ； radio——单选（圆形） ；checkbox——多选（方框） ；file——文件 ；hidden——给看不见的标签提供 js 里的字符串、id等。

textarea——输入多行内容 ；select——下拉多选。

分别以radio、checkbox 、textarea、select、textarea、file示例。

• checkbox：（方框勾选） 如何使几个方框成为一组？——相同的 name 值。

<!--如何使多选是一组呢？如下，name值-->
        <input type="checkbox" name="hobby">唱歌
        <input type="checkbox" name="hobby">唱跳舞
        <input type="checkbox" name="hobby">飞翔

新版里对于 input 标签的 checkbox 属性，无论 checkbox 是false还是true，都是方框被勾上的。

	<input type="checkbox" >       // 方框没勾上
	<input type="checkbox" checked >  //方框勾上了
	<input type="checkbox" checked ="false">   //方框勾上了
	<input type="checkbox" checked ="true">   //方框勾上了

• radio（圆形勾选）

<input name="gender" type="radio">男
<input name="gender" type="radio">女
<!--gender代表性别，两个相等，成2选1的单选-->

• textarea（多行内容） <textarea></textarea>—— 可输入多行内容的输入框；

但是此输入框可以改变大小，以下示例可以固定输入框大小；

<textarea></textarea>
 <!--但是上面的输入框可拖动扩大缩小-->
 <textarea style="resize: none;"></textarea>
 <!--可输入多行内容且输入框不可拖动大小-->
 <textarea style="resize: none; width：50%；height：300px"></textarea>

• select

<select><!--下拉多选-->
            <option value="">-请选择-</option><!--value="" ——指默认 -->
            <option value="1">星期一</option>
            <option value="2">星期二</option>
</select>

• file： 上传一个文件：<input type="file"> ； 上传选择多个文件：<input type="file" multiple>。

5.2 验证器

验证器 —— HTML5 新增功能。 比如自带的验证器：

<input type="text" required /> 
// 如果用户没有填写进 input 标签，页面会有 请填写 的提示。

注意事项：

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