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

１.　表格标签

１.１创建表格

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

注意：

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

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


<body>
 
    
    
 
    
    
 
    
    
 
 
    <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>18td>
                <td>男td>
            tr>
            <tr>
                <td>李四td>
                <td>19td>
                <td>女td>
            tr>
        tbody>
    table>
body>

1.2 表格合并

跨行合并：rowspan

跨列合并：colspan

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

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

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

1. 先确定是跨行还是跨列合并

2. 根据先上后下先左后右的顺序找到目标单元格

3. 删除单元格删除的个数=合并的个数-1


<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>javatd>
            <td>98td>
        tr>
        <tr align="center">
            <td>李芳td>
            <td>女td>
            <td>mysqltd>
            <td>96td>
        tr>
    table>
body>

2. 表单标签

2.1 表单的作用

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

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

2.3 表单中常用控件


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <table align="center" width="500" border="1" cellspacing="0" cellpadding="4">
        <caption><h2>人员信息录入表h2>caption>
        <hr>
        
        <form action="" method="get" name="information">
            
            <input type="hidden" name="id" value="">
 
            <tr>
                <td>
                    
                    <label for="a">用户名:label>
                td>
                <td>
                    
                    <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>
                    
                    <input checked type="radio" name="sex" value="男">男
                    <input type="radio" name="sex" value="女">女
                td>
            tr>
 
            <tr>
                <td>爱好:td>
                
                <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>
                
                <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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
 
    
    <style>
        /* 编写CSS代码 */
        /* 选择器：找到要操作的标签
        选择器｛属性:值;属性:值;...｝ */
        h1{
            color: blueviolet;
        }
    style>
 
    
    <link rel="stylesheet" href="./test.css">
head>
<body>
    <h1>标题一h1>
    
    <p style="color: blue;">p>
body>
html>

三种样式表总结

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

3.3 CSS基础选择器


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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">标题1h1>
    <h2 id="two">标题2h2>
    <h3>标题3h3>
    <p class="one">段落1p>
    <p>段落2p>
body>
html>

页面显示

3.4 CSS复合选择器

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

3.4.1 交集选择器

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


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* 所有class为a的标签 */
        .a {
            color: red;
        }
 
        /* class为a的p标签 */
        p.a{
            font-size: 40px;
        }
    style>
head>
<body>
    <p class="a">段落1p>
    <p>段落2p>
    <h3 class="a">标题3h3>
body>
html>

3.4.2 并集选择器

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


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

3.4.3 子元素和后代选择器

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

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


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        p {
            /* 字体大小 */
            font-size: 50px;
            /* 字体粗细 */
            font-weight: 900;
            /* 字体倾斜 */
            font-style: oblique;
            /* 字体 */
            font-family: SimSun;
        }
 
        div{
            /* 综合写法 ： 风格 粗细 大小 字体 
                大小和字体必须要加，否则不生效
            */
            font: oblique 500 30px SimSun ;
 
        }
    style>
head>
<body>
    <p>文本内容1p>
    <div>文本内容2div>
body>
html>

5. CSS外观属性


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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 空格规范

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


/* 示例 */
select {}

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


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

7.2 选择器规范

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


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

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


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

7.3 属性规范

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


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

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

相关阅读:
FFplay文档解读-45-视频过滤器二十
 【ARFoundation学习笔记】平面检测
 STC 51单片机50——中断问题演示
 操作系统——内存管理
 RestTemplate上传、下载文件
 毕业论文中的数据分析无从下手？
vue3 mouse.js 鼠标的位置
 JAVA设计模式6：代理模式，用于控制对目标对象的访问
 C#语言入门详解第十七讲（字段、属性、索引器、常量）
保姆级JAVA 性能指标、压测入门
原文地址：https://blog.csdn.net/apple_59745077/article/details/136330487