HTML复习

温故之HTML

简述：重新整理了一下当初学习html的笔记，那些一看就会的就没有写入此文中，只将自己比较容易遗漏的知识点或较重要的知识点在此记录

路径问题：(可安装Path Intellisense插件路径智能提示)

1. 同级路径：直接引用图片<img src="1-1.png" />
   

2. 下一级路径：需要一个 /，即同一级文件（包含图片）的下一个
   <img src="images/1-2.png" />
   

3. 上一级路径：../ 同理上上级 ../../<img src="../images/1-3.jpg" />
   

自定义列表：

dl：自定义列表
dt：列表项的标题
dd：列表项描述
dl包含dt、dd; dt不包含dd

  <dl>
      <dt>北京</dt>
      <dd>潮阳区</dd>
      <dd>海淀区</dd>
      <dt>广西</dt>
      <dt>广东</dt>
      <dd>广州</dd>
      <dd>深圳</dd>
      <dd>揭阳</dd> 
    </dl>

效果图：

input元素

1. 单选框name属性相同的才有单选功能
   

2. input的type为image时为图像提交按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。

3. input的type为file属性时可以上传文件，使用 accept 属性规定控件能选择的文件类型
   
   

form表单

1. Form表单的name属性用于指定表单名称以区分一个页面的多个表单域
   form表单域里的input元素只有设置了name的才会提交到服务器
   不加name:
   
   
   加name:
   

2.提交单选框或复选框时要在value里写上要提交的内容，因为只是勾选没有value值的话后台得不到对应的值,如下若勾选女则提交：sex=女

  性别：   <input type="radio" name="sex" value="男">男
          <input type="radio" name="sex"  value="女">女
          <input type="radio" name="sex"  value="保密">保密

性别： 男 女 保密


3.form的action属性：处理表单提交的 URL。这个值可以被 <button>、<input type="submit"> 或 <input type="image"> 元素上的formaction属性覆盖。

form的method属性:

浏览器使用这种HTTP方式来提交表单。常用的值：get、 post

get：
格式数据会附加在action属性的 URL 中，并以 '?' 作为使用分隔符；本质上时一个URL的字符串拼接，将input的name里的字符串提取出来+'='+input里的value
使用场景：多用于向后台请求数据，如查找文章、资料等
post：
表单数据会包含在表单中然后发送给服务器。URL不会发生变化（比get方法更安全）且不会像get方法若参数过多导致字符串太长被浏览器截断，post的字符长度不会受浏览器地址栏字符长度限制
使用场景：多用于向后台传数据、修改数据，多用于评论、表单提交等
PS: 登陆注册等表单信息要对整齐可以用form里添加表格实现，将input写在td里面

<form action="" method="post">
<table width="600" align="center" cellspacing="15">
	<tr> <td><strong>添加注册信息</strong></td>   <td></td>   </tr>
	<tr> <td align="right">邮箱：</td>   <td><input type="text" name="username" /></td>   </tr>
	<tr> <td align="right">密码：</td>   <td><input type="password"  name="pwd"/></td>   </tr>
	<tr> <td align="right"> 确认密码：</td>   <td> <input type="password" name="repwd" /></td>   </tr>
</table>
</form>

参考资料

MDN input属性
MDN form表单