常用块标签

块标签：一般在垂直方向划分页面区域 独自占据一行

1.div:分割，它没有什么特殊的语义，可以作为容器使用 有分割的意思

2.p：不能嵌套块标签，浏览器解析会出错 段落标签

注意：不要在p标签中嵌套其它块级标签

3.h1~h6：六个级别 表示的重要程度不一样

4.列表：

  1.         ul 无序 只能嵌套li，li中可以嵌套任意标签 unorder list<br />            ol 有序 只能嵌套li，li中可以嵌套任意标签 order list<br />            dl 自定义 只能嵌套dt,dd  通常一个dt对应多个dd define list<br />         dt: define title 表示列表标题<br />            dd: 表示列表项

常用行标签

行标签：一般从水平方向划分页面区域

span 文本标签 跨度的含义
strong 用来强调某些文本内容
b 用来强调某些文本内容
em 斜体文本
del 删除文本
sup 上标
sub 下标

a标签

a标签属于行标签，可以实现页面间的跳转
href属性：定义链接地址
target属性：目标 以何种形式跳转到目标页面
_self:默认值，在当前窗口打开目标页面
_blank:在新窗口打开目标页面

可以实现锚点定位

步骤：
1.给定位的目标标签设置 id属性，比如：h1 id=”t1”
2.给a标签的 href 属性赋值 ‘#id名’，比如：a href=”#t1”
注意：id 具有唯一标识性， 一个页面 一个id名 只能出现一次，不能重复出现。

img标签

img标签属于 行内块标签

1.img标签 单标签 用表示页面中的图片标签

  1.       src：source 资源  指定图片资源所在的路径<br />          alt: alter 替换 <br />          作用：(1)当图片无法正常显示时，显示相应的文本信息<br />                     (2)为搜索引擎提供关键字信息。<br />          title: 标题 当鼠标悬停在img上时，显示提示性的文本信息。

2.相对路径 和 绝对路径

  1.     相对路径：相对于当前html文件 ，图片资源所在的路径 （./  表示当前目录）<br />        ../ 表示后退一级

3.给 img 设置大小时，建议只设置width 或者 只设置height

  1.     目的：让图片保持等比例缩放，防止图片失真

table标签

表格的作用：展示数据

  1.     1.table： 定义表格<br />        2.tr：table row 定义表格中的行<br />        3.td: table data 定义表格中的单元格

表格中的相关属性：

  1.         border: 边框<br />            cellspacing: 单元格与单元格之间的间隔<br />            cellpadding: 内容与边框之间的间隔<br />            align：表格居中<br />            width height: 表格的宽 和 高

单元格合并的步骤：

  1.         1.先分析是行合并（rowspan），还是列合并(colspan)<br />            2.找到要合并的单元格，设置属性 rowspan="num" 或者 colspan="num"<br />            3.删除多余单元格

表格的结构标签

thead：表格头部 th 表示表格头部的单元格
tbody: 表格主体
tfoot: 表格尾部
caption: 表格标题

与表格相关的css样式

border: 边框宽度 边框样式 边框颜色
合并边框 collapse：合并 separate:分离

  1. table{
  2.              border: 1px solid black;
  3.              border-collapse: collapse;
  4.             /* 设置表格的宽高 */
  5.              width: 400px;
  6.              height: 200px;
  7.              /* 设置文本对齐方式 center：居中 */
  8.              text-align: center;
  9.          }
  10.          td{
  11.             border: 1pxsolidblack;
  12.          }
  13.          th{
  14.             border: 1pxsolidblack;
  15.          }

form表单

1.form: 用来收集用户信息，并发送给服务端
action属性：指定表单将收集的数据提交给哪个服务器，即指定服务器IP地址
method属性：发送请求的方式 get post
2.name属性：服务器收集用户信息时，是根据表单元素的name属性收集的
3.input标签
type属性：定义input的功能

  1.         type="text"： 普通文本输入框<br />     value 属性：用户输入的内容<br />            placeholder 属性： 占位符信息，表示提示性信息<br />            type="password"：密码输入框<br />            type="radio": 单选按钮  <br />            注意： 单选按钮必须加相同的name属性值，形成互斥状态。<br />            type="checkbox"：多选按钮<br />            checked属性：设置某些选项的选中状态<br />            type="submit": 提交按钮<br />            value属性: 定义按钮的标题

select标签

下拉框
option：下拉框中的选项
value属性是让编程人员使用的，用户是看不到的。
optgroup: 分组标签，label属性 定义每一组的标题（名称）
selected属性： 设置某一个选项的选中状态

label标签

将 label标签的 for属性，与对应表单元素的 id属性 绑定在一起
可以扩大表单元素的选中区域

textarea标签

cols: 每一行能够输入多少个字符
rows: 能输入几行

  1. textarea{
  2.             /* 禁止用户改变文本域的大小 */
  3.             resize: none;
  4.         }