【前端入门】HTML5学习入门笔记_02

一、表格标签

表格标签十分常用

1.1 主要作用

主要用于展示、显示数据，可以使数据显示规整、可读性好。

1.2 表格基本语法

<table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

<!--例如:-->
    <table>
        <tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
        <tr><td>李四</td><td>男</td><td>40</td></tr>
        <tr><td>张三</td><td>女</td><td>18</td></tr>
    </table>

1. table标签:声明一个表格
2. tr标签：声明一行
3. td标签:单元格标签,基本单位

表格标签没有列的概念，而是单元格

1.3 表头单元格标签

table head 表头单元格th标签的文字会居中加粗显示,常用于第一行突出重要性

<table>
    <tr><th>表头</th></tr>
</table>

<!--例如-->
    <table>
        <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
        <tr><td>李四</td><td>男</td><td>40</td></tr>
        <tr><td>张三</td><td>女</td><td>18</td></tr>
    </table>

1.4 表格属性

实际开发不常用，以后通过CSS来设置

学习目的:

1. 记住英语单词，方便CSS使用
2. 直观感受表格形态

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示无边框
cellpadding	像素值	规定单元格边沿与其内容之间的空白默认1像素
cellspacing	像素值	规定单元格之间的空白默认2 像素
width	像素值或百分比	规定表格的宽度

<!--例如-->
	<table align="center" border="1" cellpadding = "20" cellspacing = "0" width = "500">
        <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
        <tr><td>李四</td><td>男</td><td>40</td></tr>
        <tr><td>张三</td><td>女</td><td>18</td></tr>
    </table>

1.5 表格结构标签

场景:表格非常长

表格结构标签:可将表格分割成头部区域和主体区域

        <thead>
		...头部<!--必须包含<tr></tr>标签-->
        </thead>

        <tbody>
		...
        </tbody>

1.6 合并单元格

把多个单元格合并，只会最简单的就行

1.合并单元格的方式

跨行合并(上下合并):rowspan=“合并单元格的个数”

跨列合并(左右合并):colspan=“合并单元格个数”

2.目标单元格

• 跨行:最上侧单元格为目标单元格，写合并代码
• 跨列:最左侧单元格为目标单元格，写合并代码

3.合并单元格的步骤

• 先确定跨行还是跨列

• 找到目标单元格，写上合并方式=合并单元格的数量 例如:

  <td colspan = "2"> </td>
  

• 删除多余单元格

        <tr>
            <td>   </td>
            <td>   </td>
            <td>   </td>
        </tr>

<!--合并后-->
        <tr>
            <td>   </td>
            <td colspan="2">   </td>

        </tr>

二、列表标签

列表用于布局页面，分为无序列表、有序列表和自定义列表,可以整齐有序的布局页面

2.1 无序列表(重点)

   <h4>您最喜欢的食物?</h4>
   <ul>
       <li>香蕉牛奶</li>
       <li>红烧肉</li>
       <li>
           <p>鲱鱼罐头</p>
           <p>榴莲</p>
       </li>

   </ul>

• ul标签为无序列表里面只能放li标签，li标签为无序列表每一项的容器，li里面可以放任何元素和标签
• 无序列表自带样式属性，实际使用时会用CSS来设置

2.2 有序列表(了解)

   <h4>粉丝排行榜</h4> 
   <ol>
       <li>本尊</li>
       <li>猪猪侠</li>
   </ol>

• 类似于无序列表，但会为每一项添加序号，实际开发中也用CSS来设置其样式属性

2.3 自定义列表(重点)

场景:对属性或名词进行解释和描述，定义列表的列表项前无任何项目符号

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

• dl里只能出现dt或dd
• dl里可以出现一组或多组dt和dd
• dt和dd里可以放任何标签

三、表单标签

表单:顾名思义，收集用户信息,需要用户填写一些内容的东西,例如注册qq号码等表单

3.1 表单的组成

由表单域、表单控件(也称为表单元素)和提示信息三大部分组成

3.2 表单域

• 一个包含表单元素的区域，使用form标签定义
• 作用:把标签范围内的表单元素信息提交给服务器

<form action = "url地址" method="提交方式" name = "表单域名称">
    各种表单元素控件
</form>

常用属性:

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get和post
name	名称	用于指定 表单名称，以区分同一页面中的多个表单域

例如:

    <form action="demo.php" method="POST" name="name1">
        
    </form>

3.3 表单元素（表单控件）

1.input输入表单元素

用于输入信息、单标签

<input type="属性值" >

    <form action="xxx.php" method="get">
        <!-- text 文本框 用户可以输入任何文字 value为默认值 -->
        <!-- maxlength为限制最大长度 -->
       用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"><br>
       <!-- password 密码 -->
       密码:<input type="password" name="pwd"><br/>
       <!-- ratio 单选按钮 多个按钮起同一个名字可以实现多选一  value为选该选项传递到后台的值-->
       <!-- 单选按钮和复选框可以设置checked属性，当页面打开时默认勾选 -->
       性别:男<input type="radio" name="gender" value="man" checked = "checked"> 女 <input type="radio"name="gender" value="woman"><br>
       <!-- checkbox 复选框 可以实现多选 -->
       爱好:吃饭<input type="checkbox" name="hobby" value="eat"> 睡觉<input type="checkbox" name="hobby" value="sleep"> 打豆豆<input type="checkbox"name="hobby" value="hitdou"><br>
       <!-- submit 提交按钮 把表单元素的值发送给后台  -->
       <input type="submit" value = "免费注册 ">
       <!-- reset 重置按钮，还原表单元素初始默认状态 -->
       <input type="reset" value="重置信息"><br>
        <!-- button 设置一个普通按钮 后期搭配js使用，启动脚本等功能 -->
       <input type="button" value="获取短信验证码"><br>
        <!-- file 文件域 用于上传文件 -->
       上传头像:<input type="file">
    </form>

1. name和value是每个表单元素都有的属性值，主要给后台人员使用
2. name表单元素的名字，要求单选按钮和复选框要有相同的name值
3. checked属性主要针对于单选按钮和复选框，主要作用为打开页面默认选中某个表单元素
4. maxlength是限制表单元素最大输入字符数一般较少使用

2.lable标签

lable标签为input元素定义标注(标签)

lable标签用于绑定一个表单元素，当点击lable标签内的文本时，浏览器就会自动将光标转到或者选择对应的表单元素上，增加用户体验

<lable for="sex">男</lable>
<input type="radio" name = "sex" id="sex">

核心:lable标签的for属性要和相关元素的id属性相同

3.select下拉表单元素

同一选项中包含多个选项，可使用select标签控件定义下拉列表

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
    <option>选项5</option>
    ...
</select>

• select里至少包含一个option
• 在option中定义 selected = "selected"时，当前项即为默认选中项

3.textarea文本域元素

当用户输入内容较多的时候，可以使用textarea标签，例如留言板之类的功能

<textarea rows="3" cols="20">
文本内容
</textarea>

• rows设置行 cols设置宽