学习html5+css3（2）

HTML中的标签
 1.表格标签

  1.1表头单元格标签

<th>标签表示HTML表格的表头部分（table head的缩写）

   <table>

        <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>

        <tr><td>易烊千玺</td> <td>男</td> <td>21</td></tr>

        <tr><td>刘北山</td> <td>男</td> <td>19</td></tr>

        <tr><td>韦一航</td> <td>男</td> <td>20</td></tr>

        <tr><td>伍万里</td> <td>男</td> <td>18</td></tr>

    </table>

 1.2表格属性

 <!-- 这些属性要写到表格标签table里面去 -->

    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249" >

        <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>

        <tr><td>易烊千玺</td> <td>男</td> <td>21</td></tr>

        <tr><td>刘北山</td> <td>男</td> <td>19</td></tr>

        <tr><td>韦一航</td> <td>男</td> <td>20</td></tr>

        <tr><td>伍万里</td> <td>男</td> <td>18</td></tr>

    </table>

1.3表格结构标签

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

<thead>标签  表格的头部区域     <tbody>标签  表格的主体区域

<table>  

   <thead>

        <tr>

            <th>排名</th>

            <th>关键词</th>

            <th>趋势</th>

            <th>今日搜索</th>

            <th>最近七日</th>

            <th>相关链接</th>

        </tr>

   </thead>

   <tbody>

        <tr>

            <td>1</td>

            <td>鬼吹灯</td>

            <td>↓</td>

            <td>345</td>

            <td>123</td>

            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>

        </tr>

   </tbody>

</table>

 1.4合并单元格

跨行：最上侧单元格为目标单元格 写合并代码

跨列：最左侧单元格为目标单元格 写合并代码

 2.列表标签：无序列表、有序列表和自定义列表。

2.1无序列表（重点）

 

2.2有序列表（理解）

 2.3自定义列表（重点）：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何符号。

 

 3.表单标签

3.1表单的组成

3.2 表单域：是一个包含表单元素的区域。

在HTML中，<form>标签用来定义表单域，<form>会把它范围内的表单元素信息提交给服务器。

 3.3表单控件（表单元素）

 3.3.1<input>输入表单元素（写表单元素之前先写表单域）

 

 

    <form action="xxx.php" method="get">

        <!-- text 文本框 用户可以里面输入任何文字 -->

        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6" /> <br />

        <!-- password 密码框 用户看不见输入的密码 -->

        密码：<input type="password" name="pwd" /> <br />

        <!-- radio 单选按钮 可以实现多选一 -->

        <!-- name 是表单元素名字  这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->

        <!-- 单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮 -->

        性别：男<input type="radio" name="sex" value="男" />  女<input type="radio" name="sex" value="女" checked="checked" /> <br />

        <!-- checkbox 复选框 可以实现多选 -->

        爱好：吃饭<input type="checkbox" name="hobby" value="吃饭" /> 睡觉<input type="checkbox" name="hobby" value="睡觉" /> 打豆豆<input type="checkbox" name="hobby" value="打豆豆" checked="checked"/><br />

        <!-- 点击了提交按钮，可以把 表单域form 里面的表单元素里面的值提交给后台服务器 -->

        <input type="submit" value="免费注册" />

        <!-- 重置按钮可以还原表单元素初始的默认状态 -->

        <input type="reset" value="重新填写" />

        <!-- 普通按钮 button 后期结合js搭配使用 -->

        <input type="button" value="获取短信验证码" /><br />

        <!-- 文件域 使用场景：上传文件使用的 -->

        上传头像：<input type="file" />

    </form>

<label>标签

<label>标签为input元素定义标注（标签）

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点

（光标）转到或者选择对应的表单元素上，用来增加用户体验。

语法：

性别：<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>

核心：<label>标签的for属性应当与相关元素的id属性相同。

 3.3.2<select>表单元素：下拉列表

语法：

<form>

    籍贯：

    <select>

        <option>山东</option>

        <option selected="selected">河北</option>

        <option>天津</option>

        <option>北京</option>

        <option>湖南</option>

    </select>

</form>

注：1.<select>中至少包含一对<option>。

2.在<option>中定义select="selected"时，当前项即为默认选中项。

3.3.3textarea表单元素：文本域

<textarea>标签是用于定义多行输入的控件，该控件常见于留言板、评论。

语法：

<textarea rows="3"  cols="20">

文本内容

</textarea>

（rows="显示的行数"，cols="每行中的字符数"）

 4.查阅文档

百度：百度一下，你就知道

W3school：w3school 在线教程

MDN：https://developer.mozilla.org/zh-CN/