ruorbb自用|前端学习2——html

一、表格标签（1~4）

表格：展示数据

1、表格标签的基本使用

 <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
        <tr><!--<tr>定义表格中的行。<td>定义表格中的单元格-->
             <!-- <th>表头单元格：里面的文字会居中加粗 -->
            <th>name</th> 
            <th>sex</th> 
            <th>age</th>
        </tr>
        <tr>
            <td>shr</td> 
            <td>f</td> 
            <td>22</td>
        </tr>
    </table>

2、表格属性

align border cellpadding(单元格内容和单元边沿之间的距离) cellspacing（单元格和单元格之间的距离）

不常用 ，通常使用CSS设置

注意：这些属性要写在表格标签table上

3、表格结构标签

将表格分割为表格头部和表格主体两大部分。

使用场景：在表格很长的情况下，更好地表示表格的语义。

<thead>表格头部区域，用于定义表格的头部，内部必须有<tr>标签

【 <th>是表格头部区域内的单元格，使单元格中的内容居中加粗】

<tbody>用于定义表格的主体，主要存放数据本体

    <table align="center" border="1" cellpadding="0" cellspacing="0">
        <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>西游记</td>
            <td><img src="up.jpg"/></td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">tieba</a> <a href="#">pitcure</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>西游</td>
            <td><img src="down.jpg"/></td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">tieba</a> <a href="#">pitcure</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>游记</td>
            <td><img src="up.jpg"/></td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">tieba</a> <a href="#">pitcure</a></td>
        </tr>
    </tbody>
    </table>

4、合并单元格

跨行合并：rowspan="合并单元格个数"；

跨列合并： colspan="合并单元格个数"。

目标单元格的确定：如果是跨行合并，则目标单元格为最上面的那个单元格；

                                如果是跨列合并，则目标单元格为最左边的那个单元格。

合并单元格三部曲：1.先确定跨行还是跨列

                                 2.找到目标单元格，写上<td rowspan=""2>

                                 3.删除多余的单元格

 <table width="500" height="250" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
            
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
    
            <td></td>
            <td></td>
        </tr>
    </table>

 二、列表标签（1~3）

列表用来布局（自由、方便）

1、无序列表（重点）

有自己的样式属性，但是在实际使用时，我们会使用CSS来设置

<ul></ul>里只能存放<li></li>,<li>里面可以放任何元素

    <ul>
        <li>peach</li>
        <li>apple</li>
        <li>watermelon</li>
    </ul>

2、有序列表（理解）

有自己的样式属性，但是在实际使用时，我们会使用CSS来设置

<ol></ol>里只能存放<li></li>,<li>里面可以放任何元素

    <ol>
        <li>Bob 100w</li>
        <li>Amy 98w</li>
        <li>heruo 1w</li>
    </ol>

3、自定义列表（重点）

适用场景：对术语或名词进行解释和描述。

自定义列表的列表项前没有任何项目符号

<dl></dl>里只能存放<dt></dt>&<dd></dd>,<dt></dt>&<dd></dd>个数无限制

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

三、表单标签

表单：收集用户信息

表单组成：表单域、表单控件（表单元素）【按钮、文本框】、提示信息

1、表单域

现阶段，表单域就是<form >标签

<form>会把它范围内的表单元素信息提交给服务器

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

2、表单控件（表单元素）

(1)input

<input type=" text / password等属性值"/>，输入，收集用户信息

name属性：当前表单的名字，用于区分不同的表单。

<input>里的name和value的值是每个表单元素都有的属性值，主要给后台人员的使用；

                    name表单元素的名字，要求 单选按钮radio和复选框checkbox要有相同的name值；

                    checked主要针对于单选按钮和复选框，即一打开页面，就默认选择某个表单元素；

                    maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。

 <form>
        name:<input type="text" name="username" maxlength="6"> <br>
        password:<input type="password" name="password"><br>
        <!-- name是表单元素名字，这里性别单选必须有相同的名字name，才可以实现多选一 -->
        <!-- 单选按钮和复选框可以设置checked属性，当页面打开时就可以默认选中这个按钮 -->
        sex:  Man<input type="radio" name="sex" value="man"> Female<input type="radio" name="sex" value="female" checked="checked"><br>
        <!-- checkbox 复选框 可以实现多选 -->
        hobby:  eat<input type="checkbox" name="hobby" value="eat" checked="checked"> sleep<input type="checkbox" name="hobby" value="sleep" checked="checked">
    </form>

        <form action="xxx.php" method="get">
        <!-- 点击了提交按钮，可以把表单域form里面的表单元素里面的值，提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写">
        <!-- button普通按钮，后期结合js搭配使用 -->
        <input type="button" value="获取短信验证码">
        <!-- 文件域，上传文件使用的 -->
        上传头像：<input type="file">
        </form>

 (2)label

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

 <label for="text">name:</label>

    <input type="text" id="text">

绑定，for和id的值必须一样

    <label for="text">name:</label>
    <input type="text" id="text">
    <input type="radio" id="man"><label for="man">man</label>

（3）select

有多个选项让用户选择时，想要节约空间，就用<select>定义下拉列表

默认选中:selected="selected",如果没有，默认显示第一个元素

    籍贯：
    <select>
        <option>北京</option>
        <option selected="selected">河南</option>
        <option>浙江</option>
    </select>

（4）textarea

可以输入更多的文字，该控件常见于留言板，评论。

    <form>
        今日反馈：
        <textarea></textarea>
    </form>

学习总结：<table>不需要加br，否则格式不对