表格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文档定义关于文档信息定义网页标题定义网页主题到定义文章标题定义段落br换行hr水平线注释{message type="success" content="注意：br和hr没有结束标签，其他都有结束标签"/}