表格标签
-
表格的基本标签
<table> <tr> <td>姓名</td> <td>成绩</td> <td>评语</td> </tr> <tr> <td>A</td> <td>100分</td> <td>勤奋好学</td> </tr> <tr> <td>B</td> <td>80分</td> <td>聪明但不努力</td> </tr> <tr> <td>C</td> <td>95分</td> <td>未来可期</td> </tr> </table>*效果： *
没有横格线，为了添加横格线，需要给表格添加相关属性
-
表格相关属性
<table border="1"> <tr> <td>姓名</td> <td>成绩</td> <td>评语</td> </tr> <tr> <td>A</td> <td>100分</td> <td>勤奋好学</td> </tr> <tr> <td>B</td> <td>80分</td> <td>聪明但不努力</td> </tr> <tr> <td>C</td> <td>95分</td> <td>未来可期</td> </tr> </table> -
表格标题和表头单元格标签
<table border="1"> <caption><strong>学生成绩单</strong></caption> <tr> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> <tr> <td>A</td> <td>100分</td> <td>勤奋好学</td> </tr> <tr> <td>B</td> <td>80分</td> <td>聪明但不努力</td> </tr> <tr> <td>C</td> <td>95分</td> <td>未来可期</td> </tr> </table>*效果： *
-
表格的结构标签（了解）
代码往后缩进用TAB，往前缩进用SHIFT+TAB
<table border="1"> <caption><strong>学生成绩单</strong></caption> <thead> <tr> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> </thead> <tbody> <tr> <td>A</td> <td>100分</td> <td>勤奋好学</td> </tr> <tr> <td>B</td> <td>80分</td> <td>聪明但不努力</td> </tr> <tr> <td>C</td> <td>95分</td> <td>未来可期</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td>教学成果取得阶段性胜利</td> <td>教学成果取得阶段性胜利</td> </tr> </tfoot> </table>
效果：与之前没有区别
作用：提高浏览器的执行效率
-
合并单元格
<tbody> <tr> <td>A</td> <td rowspan="2">100分</td> <td>勤奋好学</td> </tr> <tr> <td>B</td> <td>聪明但不努力</td> </tr> <tr> <td>C</td> <td>95分</td> <td>未来可期</td> </tr> </tbody>效果：
表单标签
-
input系列标签
<body> <!-- 写什么就显示什么 --> 文本框：<input type="text"> <br> <br> <!-- 书写的内容都会变成点点显示 --> 密码框：<input type="password"> <br> <br> 单选框：<input type="radio"> <br> <br> 多选框：<input type="checkbox"> <br> <br> 文件选择：<input type="file"> </body>效果：
*注： *勾选同意此条款时所用的框是多选框
文本框：<input type="text" placeholder="请输入用户名"> <br> <br> <!-- 书写的内容都会变成点点显示 --> 密码框：<input type="password" placeholder="请输入密码">效果：
<body> 性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女 </body>*效果： *
（此时限定只能选一个) 默认选中用checked（多选框也可以用)
<body> <input type="file" multiple> </body>（CTRL+A 全选）
value可以给按钮重命名
<body> <form action=""> 用户名: <input type="text"> <br> <br> 密码：<input type="password"> <br> <br> <!-- 按钮 --> <input type="submit"> <input type="reset"> <input type="button" value="普通按钮"> </form> </body>*效果： *
<body> <form action=""> 用户名: <input type="text"> <br> <br> 密码：<input type="password"> <br> <br> <!-- 按钮 --> <input type="submit" value="免费注册"> <input type="reset"> <input type="button" value="普通按钮"> </form> </body>*效果： *
-
button按钮标签
<body> <button>我是按钮</button> <button type="submit">提交按钮</button> <button type="reset">重置按钮</button> <button type="button">普通按钮，没有任何功能</button> </body>*效果： *
-
select下拉菜单标签
若不设置默认选中，那默认选中的就是第一个option标签里的内容
<body> <select name="" id=""> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> </select> </body>*效果： *
<body> <select name="" id=""> <option value="">北京</option> <option value="">上海</option> <option value="" selected>广州</option> </select> </body>效果：
-
textarea文本域标签
<body> <textarea name="" id="" cols="30" rows="10"></textarea> </body> -
label标签
法一：
<body> 性别： <!-- id引号里的内容要和for引号里内容一致 --> <input type="radio" name="sex" id="nan"> <label for="nan">男</label> <input type="radio" name="sex" id="nv"> <label for="nv">女</label> </body>法二：
<body> 性别： <label><input type="radio" name="sex">男</label> <label><input type="radio" name="sex">女</label> </body>当使用label标签时，不点单选文本框，点男或女也是可以选中的
语义化标签
-
没有语义的布局标签
<body> <div>这是div标签</div> <div>这是div标签</div> <span>这是span标签</span> <span>这是span标签</span> </body>效果：
-
有语义的布局标签（了解）
注：做手机端网页时用的标签
字符实体
-
HTML中的空格合并现象
网页不认识多个空格
-
常见字符实体
空格
