html结构知识

<img src="pic.jpg"/>  pic.jpg -!路径！

<img />

<a><a/>

<ul type="disco">  <li></li></ul> 默认值实心圆    Type类型
<ul type="circle"> <li></li></ul> 空心圆
<ul type="aquare"> <li></li></ul>  实心方块
<ul type="none"> <li></li></ul>   没有

<ol type="1"  start="3"> <li></li></ol> 从第三个阿拉伯数字3开始   
<ol type="A"  start="5"> <li></li></ol> 从第五个大写字母E开始
<ol type="I"  start="5"> <li></li> </ol> 从V开始
<ol type="i"  start="6"> <li></li> </ol> 从vi开始    
type="1/A/a/I/i" start-定义开始位置，属性值必须是数字 
罗马数字或罗马小写

<dl>  
<dt>自定义内容可以是图片可以是文字</dt>
<dd>对内容的详细描述</dd>
</dl>
<dd></dd>可以有很多个 describtion
<dt></dt>一般情况下只有一个

页面布局:<div> 我是用来划分页面区域的 </div>
区域和模块的划分用 div
<div>我是头部</div>
<div>我是导航</div>
<div>我是内容区域</div>
<div>我是尾部</div>
独立的一部分文本：<span>我是内容</span>
小部分独立内容用 span
<span>10-15K</span>
<p>自带间距</p>  可以用margin:0;清掉
以上标签没有固定的格式表现，当对它应用CSS样式时，它才会产生视觉上的变化。
其余标签：
上标：<sup></sup>   8<sup>2</sup>
下标：<sub></sub>  O<sub>2</sub>
删除线：<del></del>  原价<del>899</del>
下划线：<u></u>      现价<u>199</u>

空格 -  
版权 - ©
已经注册 - ®
商标 - ™
小于号 - <
大于号 - >

1、自定义描述<dl> <dt></dt><dd></dd>   </dl> 
2、<div> <img src="">  <p></p>  </div> 描述

<div></div> 圈起来

<!-- 创建表单 form -->
<!-- form属性 method-定义表单提交的方法；属性值有get\post-->
<!-- get是获取，从服务器上获取数据，在数据传送过程中，用户可以在地址栏上看到过程，为默认传递方式；安全性比较低-->
<!-- post是传送数据，向服务器传送数据，在传送过程中，用户在地址栏上看不到；安全性较高-->
<!-- action 设置数据传递之后给谁？-->
<form  method="post" action="某个服务器的接受位置">
<!-- 表单控件 -->
<!-- 1、输入框 input -->
<!-- input属性 type-类型 name-名字（主要是为了提交的时候让计算机知道提交的是谁） -->
<!-- value-值(用来显示内容的) placeholder-设置提示信息的 -->
     <input type="text" name="123" value="" placeholder="我是账号"> 请输入账户
     <input type="password" name="456" value="" placeholder="我是密码"> 请输入密码
     <input type="submit" name="123" value="登录"> 提交按钮
</form>

<form>
    <!-- 其他表单控件 -->
    <button>提交按钮</button>
    <!-- 单选按钮 type="radio" name:-->
    <br/>- 换行
    性别
    男<input type="radio" name="sex" value="男">
    <!-- checked 表示已经选中（属性=属性值）-->
    女<input type="radio" name="sex" value="女" checked="checked" >
    上厕所
    是<input type="radio" name="ce" value="是">
    否<input type="radio" name="ce" value="否">
    !!单选按钮 name 必须添加，且同组的属性值必须一样；不同组的属性值不一样！！
    <!-- 多选按钮 type="checkbox"-->
    爱好
    打游戏<input type="checkbox" name="love" value="打游戏">
    <!-- disabled 禁选-->
    玩黑色沙漠<input type="checkbox" name="love" value="玩黑色沙漠" disabled="disabled">
    玩LOL<input type="checkbox" name="love" value="玩LOL">
    玩吃鸡<input type="checkbox" name="love" value="玩吃鸡">
    type="radio"
    type="checkbox"
    value的作用是定义与输入相关的值（告诉机器：是谁在干什么事，并且选的具体是什么）
</form>

<!-- 单纯的按钮 没有提交功能-->
  <input type="button" value="获取验证码">
<!--下拉菜单 selected="selected" 设置为默认展示-->
  <select>
    <option>居民身份证</option>
    <option>港澳台证件</option>
    <option>临时身份证</option>
    <option selected="selected">军人证</option>
  </select>
<!-- 文本域 -->
  <textarea></textarea>

作用-用来展示数据
优点-整体结构罗列清楚，划分明确；数据展示整齐、可读性强
表格相关标签和属性：
HTML标签 - - 创建表格-告诉机器这是一个表格 <table></table>  行 <tr></tr>  
    单元格 <td></td>或<th></th>
            <th></th>有加粗和水平居中的效果
<!-- 单位都是像素 -->
HTML属性 - - 宽度 <width> 高度 <height> 边框 <border> 边框颜色 <bordercolor> 背景颜色 <bgcolor>
            对齐方式-- 水平对齐align="center/right/left" 垂直对齐valign="top/middle/bottom"
            间距设置 必须给table标签 -- cellspacing(单元格和单元格之间的间距) cellpadding（单元格和内容之间的空隙）
        单元格合并 必须给td标签 -- 合并列colspan="所要合并单元格的列数"  合并行rowspan="所要合并单元格的行数"  ！注意！合并之后需要把多余的单元格删除

表格标题：<caption></caption>
行分组： 表头<thead></thead>  表体<tbody></tbody>  表尾<tfoot></tfoot>
列分组： <colgroup span="数字"></colgroup>  <col span="数字"/>
  col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组 span属性显示指定相邻几列组成一组，span属性值默认为1 
<!-- 如果你写的数字是2.就认为两列为一组；如果是3，就是三列为一组 -->
添加组分隔线： 必须给table标签添加属性  rules="groups/rows/cols/all/none"
注意点：想要rules="groups"组分割线生效的话，需要进行列分组的时候，用colgroup，col是不可以的

图片向下撑大3px,解决方法：
A、给img设置display:block; (转换成块元素)
B、给img设置vertical-align:top;(设置垂直靠上对齐)

HTML常识：
HTML标签可以分类为块元素、行内元素、行内块元素
图片属于行内快元素
行内块垂直方向上，默认是相对于基线对齐