表格table标签 && form 表单标签 表格 table 表格table tr表示一行 td表示一个 <table border="1" align="center"> <tr> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> rowspan 纵向合并 <td rowspan="2">D2</td> </tr> <tr> <td>A3</td> <td>B3</td> <td>C3</td> </tr> <tr> <td>A4</td> <td>B4</td> colspan 横向合并单元格 <td colspan="2">C4</td> </tr> </table>长表格 头部 thead 主体 tbody 底部 tfoot th 表示头部的单元格 <table border="1" width="50%" align="center"> <thead> <tr> <th>日期</th> <th>日期</th> <th>日期</th> <th>日期</th> </tr> </thead> <tbody> <tr> <td>2000.1.1</td> <td>500</td> <td>500</td> <td>500</td> </tr> <tr> <td>2000.1.1</td> <td>500</td> <td>500</td> <td>500</td> </tr> <tr> <td>2000.1.1</td> <td>500</td> <td>500</td> <td>500</td> </tr> <tr> <td>2000.1.1</td> <td>500</td> <td>500</td> <td>500</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td>合计</td> <td>500</td> </tr> </tfoot> </table>表格样式 <style> table{ width: 50%; margin: 0 auto; border: 1px solid black; border-spacing: 指定边框之间的距离 border-spacing: 0px; border-collapse:collapse;设置边框的合并 border-collapse: collapse; } td{ border: 1px solid black; height: 100px; 默认情况下元素在td中是垂直居中的，可以通过veryical-align 来设置 vertical-align: middle; text-align: center; } 如果浏览器中没有使用tbody而是直接使用tr 那么浏览器会自动生成一个tbody，并且tr全部放到tbody中 tr不是table的资源 tbody > tr:nth-child(2n+1){ background-color: #bfa; } .box1{ width: 300px; height: 300px; background-color: orange; 将元素设置为单元格 td display: table-cell; vertical-align: middle; } .box2{ width: 100px; height: 100px; background-color: yellow; margin: 0 auto; } </style>表单 form 表单：form的属性 action 表单提交的服务器地址 <form action="target.html"> 文本框 input标签 type设置，需要设置一个name 文本框 <input type="text" name="username"> <br><br> 密码框<input type="password" name="password"> <br><br> 单选按钮 -像这种选择框，必须设置value 属性 checked 可以将单选框设置为默认值 单选框name属性必须填写一样 单选按钮<input type="radio" name="hello" value="a"> <input type="radio" name="hello" value="b" checked> <br><br> 多选按钮<input type="checkbox" name="test" value="1"> <input type="checkbox" name="test" value="2"> <input type="checkbox" name="test" value="2"> <br><br> 下拉列表 select标签 > option标签 selected 设置默认 <select name="haha" > <option value="i">选项一</option> <option selected value="ii">选项二</option> <option value="iii">选项三</option> </select> <br><br> 提交按钮，需要将type="submit" 修改名字value <input type="submit" value="注册"> autocomplete="off" 关闭自动补全 readonly 将表单设置为只读，数据会提交 disabled 将表单项设置为禁用 autofocus 设置表单自动获取焦点 <input type="text" name="username" value="hello" readonly> <br><br> <input type="text" name="a" disabled> <br><br> <input type="text" name="b" autofocus> <br><br> <input type="color" email tel 等> <input type="submit"> 重置按钮 <input type="reset"> 普通按钮 <input type="button" value="按钮"> <br><br> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">按钮</button> </form>

盒子模型--水平方向布局--垂直方向布局 水平方向布局元素的水平方向的布局　元素在其父元素中水平方向的位置由以下几个属性共同决定margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right一个元素在其父元素中，水平居中必须满足以下的等式　　　　margin-left 加 border-left 加 padding-left 加 width 加 padding-right 加 border-right 加 margin-right = 父元素内容区的宽度（必须满足） width为200px 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800 0 + 0 + 0 + 200 + 0 + 0 + 600=800 margin-left和width都为200，没有auto 200 + 0 + 0 +200 + 0 + 0 + 0 =800 200 + 0 + 0 +200 + 0 + 0 + 400 =800 以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整　　-调整的情况　　　　-如果这七个值中没有 auto 的情况，则浏览器会自动调整margin-right值以使等式　　　　　　　-这七个值中有三个值和设置为auto　　　　　　　　　　width　　　　　　　　　　margin-left　　　　　　　　　　margin-right　　　- 如果某个值为auto，则为自动调整auto的那个值以使等式成立0 + 0 + 0 + auto + 0 + 0 + 0 =800 auto=800 width : auto 0 + 0 + 0 + auto + 0 + 0 + 200 =800 auto=600 width : auto 200 + 0 + 0 + auto + 0 + 0 + 200 =800 auto=400 width :auto auto + 0 + 0 + 200 + 0 + 0 + auto =800 auto=300 margin-left 和 margin-right为auto　　- 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置auto的外边距会自动为0 　 - 如果将三个值都设置为auto，则外边距都是0，宽度最大　　- 如果将两个外边距设置auto，宽度固定值，则会将外边距设置为相同的值　　所以我们经常利用这个特点来使一个元素在其父元素中水平居中　　　示例：　　　　width：xxxpx；　　　　margin:0 auto;垂直方向布局 使用overflow属性来设置子元素溢出问题 　可选值：visible：默认值，正常溢出scroll：生成两个滚动条，通过滚动条来查看完整的你内容auto：根据需要生成滚动条 display 用来设置元素显示类型　　可选值inline 将元素设置为行内元素block 将元素设置为块元素inline-block 将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行table 将元素设置为一个表格none 元素不在页面中显示visibility 用来设置元的显示状态　　可选值：visible 默认值，元素在页面中正常显示hidden 元素在页面中隐藏 不显示,但是依然占据页面位置

盒子模型--边框--内边距--外边距 盒子模型：　　内容区（content）　　内边距（padding）　　边框（border）　　外边框（margin）border简写属性，通过该属性可以设置边框所有的相关样式，并且没有顺序要求　　border: 10px red solid ;内容区(content).　　内容由width 和 height 两个属性来设置　　width 设置内容区宽度　　height 设置内容区的高度边框:(border),边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部　边框的大小会影响整个盒子的大小　　要设置边框，需要至少设置三个样式：　　　边框的宽度：border-width　　　边框的颜色:border-color　　　边框的样式：border-style补充： 边框样式值 　 none：无边框　　hidden：隐藏边框 IE不支持 　dotted:在MAC平台上IE4+与windows和UNIX平台上IE5.5+为点线。否则为实线（常用）　 dashed：在MAC平台上IE4+与windows和unix平台上IE5.5+为虚线，否则为实线（常用）　 solid:实线边框（常用） 　double：双实线边框，两条单线与其间隔的和等于指定的booder-width值 　groove： 　ridge　 inset　 outset 内边距 内边距（padding）　　-内容区和边框之间的距离是内边距 　 -一共四个方向　　　　-padding-top　　　　-right　　　　-bottom　　　　-left　　-内边距的设置会影响到盒子的大小　　-背景颜色会延伸到内边距上一个盒子的可见框的大小，由内容区 内边框和边框共同决定盒子大小=内容区()+内边框(padding)+边框(border)外边距 外边距（margin）　　-外边距不会影响盒子可见框的大小　　-但是外边距会影响盒子的位置 　 -一共有四个方向的1外边距： margin-top　　-上外边距，设置一个正值，元素会向下移动 margin-right　　-默认情况下设置margin-right不会产生任何效果 margin-bottom 　　-下外边距，设置一个正值，其下边的元素会向下移动margin-left　　-左外边距，设置一个正，元素会向右移动　　-margin也可以设置负值，如果是负值则元素会向右移动　　-元素在页面中是按照自左向右的顺序排列的，　　所以默认情况下如果设置左和上边距则会移动元素自身　　而设置下和右边距会移动其他元素-margin的简写属性 margin 可以同时设置四个方向的外边距，用法和padding（内边距）一样margin会影响到盒子实际占用空间

meta标签 meta标签主要设置一些元数据，元数据不是给用户看的charset ：指定网页的字符集，如 charset="utf-8" name :指定的数据的名称 content ：指定数据的内容 keywords 表示网站的关键字 description 指定网站的描述 refresh : 刷新用法：<meta name="keywords" content="HTML5,CSS3,前端"> <meta name="description" content="这是小熊猫熟悉的第一个标签">重定向：将页面设置多长时间跳转到另一个页面<meta http-equiv="refresh" content="3;url=http://blog.32yunbk.cn">

html标签参考 html基础标签标签描述<!Doctype>定义文档类型<html>定义HTML文档<head>定义关于文档信息<title>定义网页标题<body>定义网页主题<h1>到<h6>定义文章标题<p>定义段落br换行hr水平线<!--...-->注释{message type="success" content="注意：br和hr没有结束标签，其他都有结束标签"/}