HTML百宝箱（1从0开始）

标准格式（XHTML）

l 元素必须正确嵌套

l 元素必须始终关闭

l 元素名和属性名必须小写

l 文档必须有且仅有一个根元素

l 属性值必须使用双引号括起来

l 声明文档为标准的HTML格式，需在文档开头加入【<!DOCTYPE html>】

标签属性相关：

<标签名  属性名=“属性值”>……</标签名>

特有属性：

<html>标签

【lang="en"】设置文档为英文，此时会一般浏览器会自动进行翻译

<a>标签

【href=”https://www......”】打开网络或本地链接地址

【target="_blank"】打开的网页位置，新窗口，其它值有本窗口“_self”；结合内联标签的父窗口"_parent"；结合内联标签的最开始窗口 "_top"

【name=”dong”】或者【id=”dong”】页内跳转

<a href="#dong">跳转</a>
<a name="dong">将跳转到此处</a>

<img>标签

【src=”https://www......”】显示网络或本地图片

【width="104px" height="142px"】宽高设置

【title="东小东"】鼠标放置时文字提示

【alt="dongxiaodong"】图片显示错误时显示的文字

<body>标签：

【bgcolor="#00FF00"】背景颜色

【background="img/bj.jpg"】设置背景图片

【marginheight="100px" marginwidth="10px"】上下、左右的内边距

【topmargin="100px" bottommargin="100px" leftmargin="100px" rightmargin="100px"】上、下、左、右，各边距分别设置

公共属性：

【style=” ”】设置样式如CSS样式

【align="center"】确定内容位置，其它值有right、left，适用于行标签，如<h1>、<p>、<div>

【class=” ”】确定所属类

【id=” ”】确定唯一id

文字格式化标签

文字加粗：<b>、斜体文字：<i>、小号字体：<small>、大号字体：<big>、下标字：<sub>、上标字：<sup>、插入字(下划线)：<ins>、删除字：<del>

实体（特殊字符）

表格（<table>）

特有属性：

【cellpadding="10px"】单元格间内边距

【cellspacing="10px"】单元格间外边距

【colspan="2"】合并两列格子，写在开始合并列

【rowspan="2"】合并两行格子

 <table border="1" cellpadding="10px">
     <caption>表格名称</caption>
     <!--表格头-->
     <thead>
         <tr>
           <th>id</th>
           <th>用户名</th>
           <th>昵称</th>
         </tr>
      </thead>
      <!--表格内容-->
      <tbody>
         <tr><!--第一行-->
           <td>1</td>
           <td>东小东</td>
           <td>昵称信息</td>
         </tr>
         <tr><!--第二行...-->
            <td>....</td>
         </tr>
      </tbody>
 </table>

列表

无序列表

属性：type=” disc”,参数有disc（实体圆点）、square（实体方块）、circle（空心圆）

 <ul type="circle">
     <li>东小东1</li>
     <li>东小东2</li>
     <li>东小东3</li>
 </ul>

有序列表

属性：type=”1”,参数有1、A、a、I（大写字母）、i

 <ol type="I">
     <li>东小东1</li>
     <li>东小东2</li>
     <li>东小东3</li>
 </ol>

缩进列表

 <dl>
     <dt>标题1</dt>
     <dd>内容一</dd>
     <dd>内容二</dd>
     <dt>标题2</dt>
     <dd>内容二一</dd>
 </dl>

表单(form)

特有属性：

【disabled="true"】禁用，提交表单时不携带

【readonly="readonly"】只读，提交表单时自动携带

【placeholder="请输入"】提示输入

【autofocus="autofocus"】自动获取光标

【autocomplete="off"】关闭浏览器提示信息

【enctype="multipart/form-data"】提交文件时必须在<form>中添加

简单的表单：

 <form action="lai.php" method="post">
     <!--实现点击文字，输入框也会得到光标-->
     <label for="userid">用 户：</label>
     <input id="userid" type="text" name="user">
     <br/>
     <label for="passwdid">密 码：</label>
     <input id="passwdid" type="password" name="passwd">
     <br/>
     <input type="submit" value="提交">
     <input type="reset" value="重置">
 </form>

文本域:

js操作时，操作的属性是value

<textarea cols="30" rows="30" name="donglist">默认文字</textarea>

单选框：

以普通方式提交radx,后台PHP可以获取到value值

<input type="radio" name="radx" value="1" >男
<input type="radio" name="radx" value="2" >女
<input type="radio" name="radx" value="3" >谁

复选框：

提交的是数组boxd,后台PHP通过（$_POST["boxd"]）如果数组不存在则说明无选中，数组存在则可以得到选中的value值

 <div id="divbox">
 <input type="checkbox" name="boxd[]" value="1xx" >选项1
 <input type="checkbox" name="boxd[]" value="xx2" checked>选项2
 <input type="checkbox" name="boxd[]" value="3dong">选项3
 </div>
 <button onClick="butallc()">全选</button>
 <button onClick="butcancel()">取消</button>
 <button onClick="buttrallc()">反选</button>

js实现多选等操作：

 <script>
 //得到所有的孩子对象
 divobjx=document.getElementById("divbox");
 checkchildsx=divobjx.children;
 //全选
 function butallc(){
     for(var i=0;i<checkchildsx.length;i++){
         //var xx=checkchildsx[i].checked; //获取值
         checkchildsx[i].checked=true;//修改值
     }
 }
 //取消
 function butcancel(){
     for(var i=0;i<checkchildsx.length;i++){
         //var xx=checkchildsx[i].checked; //获取值
         checkchildsx[i].checked=false;//修改值
     }
 }
 //反选
 function buttrallc(){
     for(var i=0;i<checkchildsx.length;i++){
         var xx=checkchildsx[i].checked; //获取值
         if(xx){checkchildsx[i].checked=false;}//修改值
         else checkchildsx[i].checked=true;
     }
 }
 </script>

Jquery实现多选等操作

 <script src="jquery-3.3.1.min.js"></script>
 <script>
 //得到所有的孩子对象
 divobjx=document.getElementById("divbox");
 checkchildsx=divobjx.children;
 //全选
 function butallc(){
     $('[type="checkbox"]').prop("checked",true);
 }
 //取消
 function butcancel(){
       $('[type="checkbox"]').prop("checked",false);
 }
 //反选
 function buttrallc(){
     $('[type="checkbox"]').each(function(){//循环操作
          //方法一
         //if(this.checked) this.checked=false;
         //else this.checked=true;
         //方法二
         if($(this).prop("checked")) $(this).prop("checked",false);
         else $(this).prop("checked",true);
     });
 }
 </script>

下拉列表：

PHP后台可以直接通过donglist得到值，<select>标签中添加属性【multiple】则可实现多选

 <select name="donglist">
         <option>dongxiaodong 1</option>
         <option>dongxiaodong 2</option>
         <option>dongxiaodong 3</option>
 </select>

内容包裹

 <fieldset>
     <legend>东小东小标题</legend>
     ......
     <br/>
     东小东内容
     <br/>
     ......
 </fieldset>

内联框架：

其中frameborder="0"为去掉外边框

 <body bgcolor="FFFF00" marginwidth="0px">
 <h1>东小东内联框架的使用</h1>
 <iframe src="https://www.baidu.com"  frameborder="0" width="100%" height="900px">
 
 </iframe>
 </body>