一、HTML表格

1、基本结构

table :表格
tr :行
td :列
thead：表格的头（放表格的表头）tr>th*n
tbody：表格的主体（放数据的本体）tr>td*n
tfoot ：表格的脚（放表格的脚注）tr>td*n

2、基本操作

width（px / %）：规定表格的宽度。
align（left / center / right）：表格相对周围元素的对齐方式。
border（px）：规定表格边框的宽度。
bgcolor（rgb(x,x,x) / #xxxxxx / colorname）：表格的背景颜色。
cellpadding（px /%）：单元边沿和内容之间的空白。
cellspacing（px /%）：单元格之间的空白。

html学习笔记（2）

frame（属性值）：规定外侧边框的哪个部分是可见的。

①void ：不显示外侧边框

②above：显示上部外侧边框

③below：显示下部的外侧边框

④hsides：显示上下部

⑤vsides：显示左右

⑥lhs ：显示左边

⑦rhs ：显示右边

⑧box ：显示所有四个边

⑨border：显示四个边

2. rules（属性值）：规定内测边框的哪个部分是可见的。

①none ：没有线条。

②groups：位于行组和列组之间的线条。

③rows ：位于行之间的线条。

④cols ：位于列之间的线条。

⑤all ：位于行和列之间的线条。

<table border="1" width="400px"  cellpadding="1" cellspacing="2" 
       align="center" align="center">

3、表格属性

tr标签的属性

①align ： left center right justify char 单元格内容的水平对齐方式

②valign：top middle bottom baseline 单元格内容的垂直对齐方式

③bgcolor ：rgb(x,x,x) #xxxxxx colorname 单元格的背景颜色

⑴colorname：规定颜色的名称比如;red yellow blue green pink

⑵#xxxxxx / #xxx：16进制表示方式：x∈0~f

⑶rgb(x,x,x)：规定rgb代码的字体颜色：x∈0~255

④width ：px % 单元格的宽度

⑤height：px % 单元格的高度

<tr bgcolor="pink" align="center" width="200px">
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
</tr>

2. td,th标签属性

①align ： left center right justify char 单元格内容的水平对齐方式

②valign：top middle bottom baseline 单元格内容的垂直对齐方式

③bgcolor ：rgb(x,x,x) #xxxxxx colorname 单元格的背景颜色

④width ：px % 单元格的宽度

⑤height：px % 单元格的高度

<tr>
            <td bgcolor="pink">语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
    </tr>

3. thead,tbody,tfoot属性

①align ： left center right justify char 单元格内容的水平对齐方式

②valign：top middle bottom baseline 单元格内容的垂直对齐方式

4、表格跨行跨列

colspan:列合并
rowspan:行合并

<caption>课程表</caption>
        <tr bgcolor="pink">
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr align="center">
            <td rowspan="2">语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <!-- <td>语文</td> -->
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <td colspan="5">课间活动</td><!-- 
            <td>课间活动</td>
            <td>课间活动</td>
            <td>课间活动</td>
            <td>课间活动</td> -->
        </tr>

html学习笔记（2）

5、表格嵌套

<!DOCTYPE html>
<html>

<head>
    <title>表格属性</title>
    <meta charset="utf-8">
</head>

<body>
    <!-- 在以下表格标签中添加相应代码 -->
    <table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">
        <caption>课程表</caption>
        <tr bgcolor="orange" align="center">
            <th>星期一</th>
            <th>星期二</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr align="center">
            <td rowspan ="2">语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <td colspan="4">课间活动</td>
        </tr>
        <tr align="center">
            <td rowspan="2" >
                <table border="1"  cellspacing="0" cellpadding="5px" align="center">
                    <tr>
                        <td>前半节</td>
                        <td>后半节</td>
                    </tr>
                    <tr>
                        <td>诗词</td>
                        <td>古文</td>
                    </tr>
                </table>
            </td>
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
    </table>
</body>
</html>

html学习笔记（2）

二、HTML表单

1.表单的定义

用于收集用户的信息，进行人机交互的操作。

包含元素：文本框、单选、复选、隐藏域、列表框、图片框。统一称为：控件。

人机交互:收集数据之后将其传递给后台，后台处理完再次返回响应到前台的过程。

2.常用属性与标签

name :指定控件的名称，可重复 -- 给后台获取数据使用
id :指定标签的唯一识别（类似身份证）
value :输入的控件的值（收集，设置） -- 用于传递到后台使用的
checked :复选框（单选）默认被选中的项目

<form action="form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have a car
</form>

5. selected :列表框默认被选中的项目

<select>
  <!-- select用于定义下拉菜单 -->
  <option>Volvo</option>
  <option selected="selected">Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

6. src :图片框的图片来源

7. onclick :鼠标的单击事件 -- JavaScript脚本的事件

8. disabled :禁用该控件

9. multiple :允许多选（适用于普通列表框）

10. action :传递到后台的，收集数据传递到后台进行响应 -- 相对路径，绝对路径地址或者文件

<form action="form_action.asp" method="get">

11.method

①post ：表示隐式的提交，对安全信息保护的比较好

②get ：表示显示的提交，对信息的保护不是特别好，会将数据显示在url地址上

<form action="" method="post">

12.label

①此标签可以放置纯文本，专门用于显示文字使用的，和不加此标签效果一样；

②后期可以对此文本进行css样式的设置

<label>请输入姓名：</label>

13. radio(单选按钮)的name属性

①name是一样的话会被认为是一组单选框，意味着只能选中一个；

②name值不一样，表示他们不是一组，可以同时选中；

<label>性别：</label>
        <label>
            <input type="radio" name="sex" value="1">男
            <!-- type="radio"表示单选，设置name值相同可以保证一组操作只能选一个，value值用于后台 -->
        </label>
        <label>
            <input type="radio" name="sex" value="0">女
        </label>

14. button标签：定义一个按钮；普通按钮会和后面的JavaScript联动使用

<input type="button" name="" value="普通按钮">

15. submit标签：具有提交的功能

<input type="submit" name="" value="提交功能">

16. 下拉列表框

<label>列表：</label><br/>
        <select size="3" multiple="">
            <!-- 可选项数为3,可以多选 -->
            <option value="1" selected>苹果</option>
            <!-- option用于定义菜单中的选项，selected为默认选项 -->
            <option value="2">香蕉</option>
            <option value="3">橙子</option>
            <option value="4">葡萄</option>
            <option value="5">西瓜</option>
</select>

17. 隐藏域：虽然是隐藏的，但是主要作为前台不方便被其他人看到，但是需要传递到后台的数据

<input type="hidden" name="" id="">

18. 多行文本域: 用于论坛发帖，长文档的输入

<textarea name="" id="" cols="100" rows="10">请输入：</textarea>

三、HTML综合

placeholder：文本框提示信息

<input type="text" name="" placeholder="请输入用户名"/>

optgroup ：分组下拉菜单

<select name="city" size="5" multiple="">
        <option>~请选择~</option>
        <optgroup label="华北">
            <option value="1">北京</option>
            <option value="2">天津</option>
            <option value="3">河北</option>
        <optgroup label="华南">
            <option value="1">上海</option>
            <option value="2">福建</option>
            <option value="3">厦门</option>
        </optgroup>
</select>

div:区块容器标记（使用时会换行），可以包裹段落、表格、图片等各种html元素。

span：没有实际意义，为了应用样式（使用时不会换行）

块级标签：div, ul, ol, li, dl, dd, h1~h6, p, form, hr（占据一行，换行）

行级标签：b, em, img, input, a, sup, sub, textarea, span（在一行，不换行）

标签嵌套：（在一行，不换行）

①无序列表

<ul>
    <li></li>
</ul>

②定义列表

<dl>
    <dt></dt>
      <dd></dd>    
      <dd></dd>
  <dt></dt>
      <dd></dd>
      <dd></dd>
</dl>

标签嵌套规则

1、块级标签可以包含行级标签（行内元素）和某些块级元素。

2、行内元素不能包含块级元素，只能包含其他行内元素。

3、块级元素不能放在p标签内。

4、特殊的块级元素只能包含行内元素，不能在包含块级元素。如：h1~h6；p；dt

5、块级元素和块级元素并列，行级元素和行级元素并列，行级标签与块级标签不并列。

html学习笔记（2）

一、HTML表格

二、HTML表单

三、HTML综合

相关推荐