HTML-表格、表单和CSS初识，选择器，书写规范

１.　表格标签

１.１创建表格

表格标签是一种用来处理，显示表格式数据的常用标签。

注意：

１.　tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

２.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

html 复制代码

<body>

    <!-- 表格创建 -->
    <!-- 
        table 定义表
        th 定义表头
        tr 定义行
        td 定义单元格 
    -->

    <!-- 表格属性 -->
    <!-- 
        align 设置对其方式 center 水平方向对其 left 左对齐 right右对齐
        cellpadding 设置单元格内容与单元格边框之间的空白间距
        cellspacing 设置单元格到边框之间的空白间距
        border 设置边框
        width 设置表格宽度
         -->

    <!-- 表格标题 -->
    <!--
        caption 定义表格的标题
        1. caption标签只存在表格里面，必须紧随 table 标签之后。
        2. 只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
     -->


    <table cellpadding="10" cellspacing="0" width="500" align="center" border="1">
        <!-- 定义标题 -->
        <caption>信息表</caption>
        <!-- 定义表头 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>
</body>

1.2 表格合并

跨行合并：rowspan

跨列合并：colspan

合并单元格思想：将多个内容合并的时候，就会有多余的东西，把它删除，例如：把3个td合并，那就多余了2个td，需要删除。

公式：删除的个数=合并的个数-1

合并的顺序：先上后下先左后右

先确定是跨行还是跨列合并
根据先上后下先左后右的顺序找到目标单元格
删除单元格删除的个数=合并的个数-1

html 复制代码

<body>
    <table cellpadding="10" cellspacing="0" align="center" width="500" border="1">
        <tr>
            <!-- 跨列合并 -->
            <th colspan="3">学生信息</th>
            <th colspan="2">成绩</th>
        </tr>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>专业</th>
            <th>课程</th>
            <th>分数</th>
        </tr>
        <tr align="center">
            <td>张三</td>
            <td>男</td>
            <!-- 跨行合并 -->
            <td rowspan="2">计算机</td>
            <td>java</td>
            <td>98</td>
        </tr>
        <tr align="center">
            <td>李芳</td>
            <td>女</td>
            <td>mysql</td>
            <td>96</td>
        </tr>
    </table>
</body>

2. 表单标签

2.1 表单的作用

表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

应用场景：主要应用于数据的提交，比如点击按钮向服务端发送数据。

2.3 表单中常用控件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" width="500" border="1" cellspacing="0" cellpadding="4">
        <caption><h2>人员信息录入表</h2></caption>
        <hr>
        <!--
            表单创建：form用于定义表单域
            action="url" 将数据提交到哪里，一般是后端提供的接口路由
            method="请求方式" 一般为get或post
                get:明文传输，相对不安全，传递数量较少，但是效率较高，一般用于向服务器索要数据
                post: 请求体传输（非明文），相对安全，传递数量较多，但是效率低，一般用于给服务器发送数据
            name="表单名"

            当我们提交表单时，会携带表单内容输入的数据进行传递
            传递方式：action路由?name=value&name=value...
        -->
        <form action="" method="get" name="information">
            <!-- input 用户输入控件 
                name ： 控件名称
                value ： 默认值
                type ：输入类型

                hidden 隐藏域
            -->
            <input type="hidden" name="id" value="">

            <tr>
                <td>
                    <!-- label 无语义标签 可以在点击的时候，在对应id的输入框获取焦点 -->
                    <label for="a">用户名:</label>
                </td>
                <td>
                    <!-- 普通文本输入框
                        placeholder 提示信息
                    -->
                    <input  id="a" placeholder="请输入用户名" type="text" name="username" value="">
                </td>
            </tr>

            <tr>
                <td><label for="b">密码:</label></td>
                <!-- 密码输入框 -->
                <td><input id="b" placeholder="请输入密码" type="password" name="password"></td>
            </tr>

            <tr>
                <td>性别:</td>
                <td>
                    <!-- 
                        单选框，多个单选框时name必须保持一致
                        checked 默认选项 
                    -->
                    <input checked type="radio" name="sex" value="男">男
                    <input type="radio" name="sex" value="女">女
                </td>
            </tr>

            <tr>
                <td>爱好:</td>
                <!-- 
                    复选框 
                    checked 默认选项
                -->
                <td>
                    <input type="checkbox" name="likes" value="唱">唱
                    <input type="checkbox" name="likes" value="跳">跳
                    <input type="checkbox" name="likes" value="篮球">篮球
                    <input checked type="checkbox" name="likes" value="学习">学习
                </td>
            </tr>

            <tr>
                <!-- 文件上传使用 -->
                <td>头像:</td>
                <td>
                    <input type="file">
                </td>
            </tr>

            <tr>
                <!-- 下拉框 select的传递方式
                select的value=选中的option的value -->
                <td>学历:</td>
                <td>
                    <select name="edu" id="">
                        <option value="小学">小学</option>
                        <option value="中学">中学</option>
                        <option value="大学">大学</option>
                    </select>
                </td>
            </tr>

            <tr>
                <!-- 多行文本域 -->
                <td>自我介绍:</td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>

            <tr>
                <!-- 按钮 -->
                <td colspan="2">
                    <input type="button" value="普通按钮">
                    <input type="submit" value="提交按钮">
                    <input type="reset" value="重置按钮">
                    <button>button按钮-可提交</button>
                </td>
            </tr>
        </form>       
    </table>
</body>
</html>

页面显示

3. CSS初识

3.1 CSS介绍

CSS(Cascading Style Sheets) 主要用于美化样式。

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

3.2 样式表

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 
        内部样式表
        可以控制当前页面的所有样式，但是并没有完全和html分离
    -->
    <style>
        /* 编写CSS代码 */
        /* 选择器：找到要操作的标签
        选择器｛属性:值;属性:值;...｝ */
        h1{
            color: blueviolet;
        }
    </style>

    <!-- 
        外部样式表
        会重新创建一个后缀为.css的文件，存放CSS代码
        可以控制整个站点，只要能找到这个CSS文件
        内容和样式也是完全分离的
        缺点：需要link导入
    -->
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <h1>标题一</h1>
    <!-- 
        行内样式表
        通过标签的style属性进行CSS编码，只能影响一个标签
        和HTML完全混淆在一起，但是权重高
    -->
    <p style="color: blue;"></p>
</body>
</html>

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

3.3 CSS基础选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            标签选择器
            每一个标签名就是一个标签选择器
            用于选择页面中所用相同的标签，设置相同的样式
        */
        p{
            color: blue;
        }

        /* 
            类选择器
            每一个标签都有class属性
            选择所有class值相同的标签，设置相同的样式
            class用.表示
            .class值{属性:值;...}      
        */
        .one{
            color: red;
        }

        /* 
            ID选择器
            每个标签都有ID属性
            ID一般代表唯一性，适合对页面中某个特定的标签设置单独的样式
            ID选择器使用#表示
            #id值{属性:值;...} 
        */
        #two{
            color: purple;
        }

        /* 
            通配符
            选择页面中所有标签，对所有标签设置相同的样式
            一般用于清理标签的默认内外边距
        */
        *{
            color: green;
        }

        /* 
            优先级：* < 标签 < 类 < id 
         */
    </style>

</head>
<body>
    <h1 class="one">标题1</h1>
    <h2 id="two">标题2</h2>
    <h3>标题3</h3>
    <p class="one">段落1</p>
    <p>段落2</p>
</body>
</html>

页面显示

3.4 CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

3.4.1 交集选择器

交集选择器由两个选择器构成，其中一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 所有class为a的标签 */
        .a {
            color: red;
        }

        /* class为a的p标签 */
        p.a{
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p class="a">段落1</p>
    <p>段落2</p>
    <h3 class="a">标题3</h3>
</body>
</html>

3.4.2 并集选择器

并集选择器（CSS选择器分组）是各个选择器通过<strong style="color:#f00">逗号</strong>连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            并集选择器
            用于对多个选择器设置相同的格式    
        */
        p,div{
            color: blue;
        }
    </style>
</head>
<body>
    <p>段落</p>
    <div>文本</div>
</body>
</html>

3.4.3 子元素和后代选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个进行连接，注意，符号左右两侧各保留一个空格。

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            直接子代 使用> 
            格式：选择器>选择器>选择器...{}
        */
        div>a{
            color: red;
        }

        /* 
            空格表示后代 可以是子代，也可以是子代的子代
            格式：选择器 选择器 选择器...{}
        */
        div a{
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <a href="">div子代</a>
        <p><a href="">div子代p的子代</a></p>
    </div>
</body>
</html>

3.4.4 伪类选择器

伪类选择器用于向某些选择器添加特殊效果。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未访问状态 */
        a:link{
            color: red;
            text-decoration: none;
        }

        /* 已访问状态 */
        a:visited{
            color: #888;
        }

        /* 鼠标移入状态 */
        a:hover{
            color: blue;
            text-decoration: underline;
        }

        /* 选定状态，鼠标按下不松开 */
        a:active{
            color: aqua;
        }
    </style>
</head>
<body>
    <a href="#1">按钮</a>
</body>
</html>

3.4.5 属性选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器[属性] 获取选择器中某个有指定属性的标签 */
        /* 获取有id属性的input */
        input[id]{
            color: red;
        }

        /* 选择器[属性=值] 获取选择器中某个有指定属性和值标签 */
        input[type=text]{
            color: aqua;
        }

        /* ^=以什么开头  $=以什么结尾 */
        a[href^='http']{
            color: red;
        }

        a[href$='com']{
            font-size: 40px;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="button" value="按钮" id="">
    <a href="http://baidu.com">百度一下，你就知道</a>
    <a href="taobao.com">淘宝</a>
</body>
</html>

4. CSS字体样式属性

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            /* 字体大小 */
            font-size: 50px;
            /* 字体粗细 */
            font-weight: 900;
            /* 字体倾斜 */
            font-style: oblique;
            /* 字体 */
            font-family: SimSun;
        }

        div{
            /* 综合写法 ： 风格 粗细 大小 字体 
                大小和字体必须要加，否则不生效
            */
            font: oblique 500 30px SimSun ;

        }
    </style>
</head>
<body>
    <p>文本内容1</p>
    <div>文本内容2</div>
</body>
</html>

5. CSS外观属性

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 字体颜色 */
            color: blue;
            /* 字体大小和样式 */
            font: 30px SimSun;
            /* 背景颜色 */
            background-color: rgb(229, 228, 165);
            /* 边框 1px 实线 黑色*/
            border: 1px solid black;
            /* 文本水平方向对齐 左中右 */
            text-align: center;
            /* 高度 */
            height: 100px;
            /* 行高 当行高和高度一致时，垂直居中*/
            line-height: 100px;
            /* 文本修饰：下划线 */
            text-decoration: underline;
            /* 鼠标样式 */
            cursor: pointer;
        }

        a{
            /* 去除文本修饰 */
            text-decoration: none;
        }
    </style>
</head>
<body>
        <a href="">静夜思</a>
        <div>床前明月光</div>
        <div>疑是地上霜</div>
        <div>举头望明月</div>
        <div>低头思故乡</div>
</body>
</html>

6.CSS颜色属性

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* 英文单词 */
            color: red;

            /* 
                三位十六进制整形值
                由高到低分别代表红、绿、蓝
                0为最小值，f为最大值
            */
            color: #333;

            /* 
                六位十六进制整形值
                每两位分别代表红、绿、蓝
             */
            color: #ff5547;

            /* 
                使用rgb函数，填写百分比
                分别为红、绿、蓝所占比
            */
            color: rgb(50%, 50%, 50%);

            /* 
                使用rgb函数，填写0------255数字
            */
            color: rgb(23, 166, 88);

            /* 
                使用rgba函数
                前三位与上两种相同，第四位为透明度设置，0-1的小数
                0 为完全透明，1为不透明
            */
            color: rgba(0, 0, 0, 0.5);   
        }
    </style>
</head>
<body>
    <p>文本颜色</p>
</body>
</html>

7. CSS书写规范

7.1 空格规范

【强制】选择器与{之间必须包含空格.

html 复制代码

/* 示例 */
select {}

【强制】属性名与之后的：之间不允许包含空格，: 与属性值之间必须包含空格

html 复制代码

/* 示例 */
font-size: 10px;

7.2 选择器规范

【强制】当一个rule包含多个selector时，每个选择器声明必须独占一行。

html 复制代码

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}
/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建议】选择器的嵌套层级应不到于3级，位置靠后的限定条件应尽可能精确。

html 复制代码

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

7.3 属性规范

【强制】属性定义必须另起一行。

html 复制代码

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【强制】属性定义后必须以分号结尾。

HTML-表格、表单和CSS初识，选择器，书写规范

１. 表格标签

１.１创建表格

1.2 表格合并

2. 表单标签

2.1 表单的作用

2.3 表单中常用控件

3. CSS初识

3.1 CSS介绍

3.2 样式表

3.3 CSS基础选择器

3.4 CSS复合选择器

4. CSS字体样式属性

5. CSS外观属性

6.CSS颜色属性

7. CSS书写规范

7.1 空格规范

7.2 选择器规范

7.3 属性规范

１.　表格标签