HTML+CSS(次日)

时间 2019-12-09

标签 html+css html css 次日栏目 CSS 繁體版

原文原文链接

表格（如今已经不使用表格进行布局，多用来处理和显示表格数据）

基本语法（表格中没有列的概念，只有行tr和单元格td）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <table width="500" border="1">
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>电话</td>
            </tr>
            <tr>
                <td>小王</td>
                <td>女</td>
                <td>11</td>
                <td>120</td>
            </tr>
    </table>
    
</body>
</html>

<table></table>中只能嵌套<tr></tr>
<tr></tr>中只能嵌套<td></td>
<td></td>只是一个盒子能够嵌套任何元素
表格属性
1. align:设置整个表格在网页中水平对齐方式（center,left,right）
  1. 若是给table设置align表示给整个表格设置在网页中的水平对齐方式
  2. 若是给tr设置align表示给该行的单元格内容设置在单元格内的水平对齐方式
  3. 若是给td设置align表示给该单元格内容设置在该单元格内的水平对齐方式
2. border:设置表格边框（包括内边框）
3. cellspacing:设置单元格和单元格边框之间的距离
4. cellpadding:设置单元格内容和单元格边框的距离
5. 三参为0（通常咱们须要设置）border,cellspacing,cellpadding都为0
表头标签
1. 表头单元格通常是位于表格的第一行或者第一列，其文本加粗居中显示
2. <th></th>替代<td></td>

表格标题

用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <!--cell-->
    <table width="500" border="1" align="center">
        <caption>我是表格标题</caption>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>电话</td>
            </tr>
            <tr>
                <td>小王</td>

                <td>女</td>
                <td>11</td>
                <td>120</td>
            </tr>
    </table>
    
</body>
</html>

caption标签只能用于table标签内，并且每一个table标签只能有一个caption

实现代码

表格结构
1. 在使用表格进行布局时，咱们通常将表格划分为表头，主体和页脚（页脚兼容性有问题通常不使用）
2. <thead></thead>
3. <tbody></tbody>
4. 2,3的两个标签是划分表格内容的，不包含表格标题
合并单元格
1. 跨行合并 rowspan
2. 跨列合并 colspan
3. 处理原则
  1. 先肯定跨行仍是跨列
  2. 先上后下，先左后右定位到单元格的位置
  3. 删除的个数=合并的个数-1

表单（收集用户信息）

在html中,一个表单控件是由三部分组成:表单控件，提示信息，表单域（该区域做为一个总体信息提交到候台）

input控件

<input />标签为单标签,
type属性为最基本的属性，值有不少用于指定不一样的表单控件类型
其余经常使用的属性还有name,value,size(通常是由css来设置的),checked,maxlength
单行文本输入框
1. type="text"
2. 设置默认值:value="北京"
密码输入框
1. type="password"

单选按钮

type="radio"
设置checked属性值为checked,默认选中
单选按钮以组为单位，同一组内必须给他们设置相同的name,这样才能够多选一

例子

<tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" />男
                    <input type="radio" name="sex" />女
                    <input type="radio" name="sex" />人妖
                </td>
            </tr>

复选框

type="checkbox"
设置checked属性值为checked,默认选中

例子

<tr>
                <td>喜欢类型</td>
                <td>
                    <input type="checkbox" name="love">妩媚
                    <input type="checkbox" name="love">气质
                    <input type="checkbox" name="love">可爱
                </td>
            </tr>

按钮

普通按钮
1. type="button"
重置按钮
1. type="reset"
提交按钮
1. type="submit"

例子

<td>
                    <input type="button" value="注册">
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </td>

图片形式的提交按钮
1. type="image"
2. 设置图片的路径 src属性
3. 例子
```
<input type="image" src="btn.png">
```

文件域

type="file"

例子

</tr>
                <tr>
                <td>
                    <input type="file">
                </td>
        </tr>

label标签

label标签是为input标签服务的
用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会得到焦点

例子

</tr>                
                <td>
                    <label>用户名：<input type="text" ></label>
                    <hr/>
                    <label for="pass">
                        用户名：<input type="text" id="name">
                        密码：<input type="password" id="pass" />
                    </label>
                </td>
            </tr>

文本域（textarea控件）

text只能输入一行文本
textarea能够输入多行文本
默认值不是经过value来设置
文本域的宽和高须要CSS设置

例子

<td>
                    <textarea name="文本输入" cols="17" rows="7" >
                        不支持富文本
                    </textarea>
                </td>

下拉菜单
1. 语法格式
  <select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
  </select>css
2. <select></select>中至少包含一对儿<option></option>
3. 下拉菜单默认选中option中的第一项
4. 在option中定义selected="selected"时，当前项为默认选中项
表单域
1. form标签被用于定义表单域，建立一个表单，实现用户信息的传递和收集
2. 基本语法
  <form action="url地址" method="提交方式" name="表单名称">
  各类表单控件
  </form>html
3. action:用于指定接收处理表单数据的服务器程序的Url地址
4. method:设置表单数据的提交方式:get或者post
5. name:用于指定表单的名称，来区分同一个页面的多个表单
6. submit按钮点击就会将填写的表单信息提交到指定的url地址，reset按钮点击就会将用户填写的信息清空

CSS(美化网页)

引入css样式表的位

内部样式表

将css代码集中写在HTML的head标签内,通常牢牢挨着</head>
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>浏览器

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        caption{
            color: skyblue;
        }
    </style>
</head>
<body>
    <table  border="0" cellspacing="0" cellpadding="0" width="600" align="center">
        <caption >青春不常在，抓紧谈恋爱</caption>
        <thead>
        </thead>
        <tbody>    
        </tbody>
    </table>    
</body>
</html>

外部样式表

将一个或者多个以.css为扩展名的外部样式文件经过Link标签连接到html文件中
语法格式
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>服务器
link是但标签
link必须放在head标签内

link标签必须指定三个属性

href:定义连接外部样式表文件的Url,能够是相对路径也能够是绝对路径
rel:定义当前文档和被连接文档之间的关系，这里须要值为stylesheet
type:定义所连接文档的类型这里值为text/css

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css" />
        
    </style>">
</head>
<body>
    <table  border="0" cellspacing="0" cellpadding="0" width="600" align="center">
        <caption >青春不常在，抓紧谈恋爱</caption>
        <thead>
        </thead>
        <tbody>    
        </tbody>
    </table>    
</body>
</html>

行内样式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
又称为内联样式,行内样式,行间样式,内嵌样式

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <table  border="0" cellspacing="0" cellpadding="0" width="600" align="center">
        <caption  style="color: pink; font-size: 18px;">青春不常在，抓紧谈恋爱</caption>
        <thead>
        </thead>
        <tbody>    
        </tbody>
    </table>
    
</body>
</html>

总结

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

CSS语法规则
1. 选择器{属性名1：属性值；属性2：属性值；}

CSS基础选择器

标签选择器（元素选择器）
1. 能够将某一类标签所有选择出来
2. 不能差别化样式
类选择器
1. 语法规则:
  1. 给须要设置样式的标签添加Class属性 class="类名"
  2. .类名{属性名:属性值;属性名:属性值;}
2. 类名命名遵循的基本规则
  1. 长名词或者词组使用中横线来链接
  2. 不建议使用"_"来命名
    1. 浏览器兼容问题（好比_tips在IE6中是无效的）
    2. js变量命名通常使用_，用于区分
  3. 尽可能使用英文不使用中文和数字

多类名选择器

一个标签能够设置多个类名
语法规则：class="类名1 类名2"
样式显示效果和HTML元素的类名前后是没有关系的，受CSS样式书写的上下顺序有关

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
        .red{
            color: red
        }

        .font20{
            font-size: 18;
            color:blue;
        }
    
    </style>
</head>
<body>
    <div class="red font20">我是一个盒子</div>    
</body>
</html>

id选择器

语法规则 #id名{属性名：值1} <标签名 id="id名"></标签名>
id选择器比如人的身份证，全国惟一，不能重复使用
类选择器比如人的名字，能够重复使用屡次

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        #hezi{
            color: red;
            font-size: 19;
        }
    </style>
</head>
<body>
    <div id="hezi">
        我是盒子
    </div>
</body>
</html>

通配符选择器

语法规则 *{属性1：属性值1;属性2:属性值2}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        
    </style>
</head>
<body>
    
</body>
</html>