块级标签
1. 标题标签
占满一整行,自带换行效果
标题标签: h1 -- h6 ( 1-6是指标题等级,大小不同)
2. 列表标签
列表又分为三种，有序列表ol，无序列表ul和定义列表dl。其中ol和ul必须结合li标签使用，而dl则必须结合dt,dd使用。
<!--无序列表--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--属性type:disc(默认实心圆)square(实心方形)circle(空心圆) one(不显示样式)--> <ul type="disc"> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> <ul type="square"> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> <ul type="circle"> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> <ul type="none"> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> </body> </html>
<!--dl定义列表--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <dl> <dt>巴塞罗那</dt> <!--表示标题--> <dd>里奥梅西</dd> <!--表示内容--> <dd>伊涅斯塔</dd> <dd>苏亚雷斯</dd> </dl> </body> </html>
<!--有序列表--> 属性type:1(默认)a(小写字母)A(大写字母)I(大写罗马数字)i(小写罗马数字) 属性start:设置开始位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--默认显示1,2,3序号,可以指定开始的值--> <ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> <!--设置根据a,b,c显示,可以指定开始的值--> <ol type="a" start="c"> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> <!--设置根据A,B,C显示,可以指定开始的值--> <ol type="A"> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> <!--设置根据大写罗马数字,可以指定开始的值--> <ol type="I"> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> <!--设置根据小写罗马数字,可以指定开始的值--> <ol type="i"> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> </body> </html>
3. 表格标签
表格标签用<table>表示。 一个表格<table>是由表头<thead>和表格内容<tbody>组成的。其中的每一行又是由<tr>组成的，每行中的每一格是由<td>组成的
border="1":加边框,数值越大,外边框越粗 cellpadding="10px":元素与边框之间的距离 cellspacing="20px":边框与边框之间的距离 colspan：横向合并。colspan="2"表示当前单元格在水平方向占据两个单元格的位置(数字表示合并单元格个数) rowspan：纵向合并。rowspan="2"表示当前单元格在垂直方向占据两个单元格的位置(合并必须删掉其中一个单元格的值) align：表格的水平对齐方式。属性值可以填：left right center。 注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置） <!--表头可以省略-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" cellpadding="10px" cellspacing="20"> <thead> <tr> <th>第一列</th> <!--表头标题--> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <!--第一行--> <td rowspan="2">1-1</td> 合并第一列的前两个单元格 <td>2-1</td> <td>3-1</td> </tr> <tr> <!--第二行--> <!--<td>1-2</td>--> 删除这个数据,将第一列的前两个单元格合并 <td>2-2</td> <td>3-2</td> </tr> <tr> <!--第三行--> <td>1-3</td> <td rowspan="2">2-3</td> <!--<td>3-3</td>--> 删除这个数据,将第二列的最后一个单元与第三列的最后一个单元合并 </tr> </tbody> </table> </body> </html>
4. 排版标签
p:段落标签,会自动在段落上下加上空白来分开段落,p标签是一个文本级标签,内部不可以再嵌套块级元素
div:什么样式都没有的块级标签 -- 用的最多
hr:单闭合边前,显示一条分割线
center:居中显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>这是第一段的内容</p> <!--上下有空白部分--> <p>这是第二段的内容</p> <center>居中在分割线上方</center> <hr> <div>我在上面</div> <div>中间没有空白</div> <div>我在下面</div> </body> </html>
5. form表单
作用:
-
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
-
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
-
表单还可以包含t
extarea、select、fieldset和label标签。
基本概念： HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理： 访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
<input>：输入标签（文本框）（内联标签）
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框（不显示明文） | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" name='x' /> |
| radio | 单选框 | <input type="radio" name='x' /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> 发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新 |
| reset | 重置按钮 | <input type="reset" value="重置" /> 页面不会刷新，将所有输入的内容清空 |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
<!--form:表单标签--> action:提交到的地址,把表单中的数据提交到对应的地址上 input: type种类:text,password,radio,checkbox,submit,reset,hidden,button,file,date namevalue:把数据提交到后台的,提交的是input标签的name值和value值 对于选择框: checked :表示默认选中 readonly :对于输入框的禁止修改 可以提交 disabled :对于所有元素不能修改 也不能提交 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://127.0.0.1:9000"> <input type="text" name="username" placeholder="手机号/邮箱"> <input type="password" name="password"> <!-- 注意:如果设置了readonly,只能给输入框的模式设置,那么不能修改,可以提交--> <!-- 注意:如果设置了disabled,可以给索引的表单元素设置,那么不能修改,也不能提交--> <input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="2">女 <input type="checkbox" name="hobby" value="a">音乐 <input type="checkbox" name="hobby" value="b" checked>足球 <input type="checkbox" name="hobby" value="c">电影 <input type="submit" value="点我提交"> <button>提交按钮</button> <!-- 注意:如果input的submit和button放在form表单中都表示提交--> <hr> <input type="hidden"> <input type="reset"> <input type="button" value="我只一个小按钮"> <input type="file"> <input type="date"> </form> <input type="submit"> <button>提交按钮</button> <!--注意:如果submit和button放在form表单外面,就是普通的按钮--> </body> </html>
<!--label--> for属性,点击lable中的内容,让for标示的id对应的元素获得焦点 <label for="user">姓名:</label> <input type="text" name="username" id="user"> <!--textarea-->:文本框 <textarea name="" id="" cols="30" rows="10"></textarea> <!--select--> select选择框: multiple:设置多选框 size:选择框显示大小 option选项: selected:默认选中 <select name="city" id="" size="3"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">天津</option> </select> <select name="" id="" multiple> <option value="" selected>北京</option> <option value="">上海</option> <option value="">天津</option> </select> <!--注意:默认是单选--> <!--注意:使用multiple属性设置为多选:按住鼠标下拉,按住ctrl选,按住shift选-->