web前端开发从学会了到学废了日记2-CSDN博客

本文链接：https://blog.csdn.net/zkd1094692863/article/details/127554469

二十、表格标签和表格属性

1、表格标签

<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题

注：之间是有嵌套关系的，要符合嵌套规范。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
       <table>
       <caption>天气预报</caption>
       <tHead>
       <tr>
           <th>日期</th>
           <th>天气情况</th>
           <th>出行情况</th>   
       </tr>
       </tHead>
       <tBody>
       <tr>
           <td>2019年1月1日</td>
           <td><img src="./22270319.jpg"></td>
           <td>天气晴朗，适合出行</td>
       </tr>
       <body>
       </table>

2、语义化标签：<tHead>、<tBody>、<tFoot>。

注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。

3、表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式（left、center、right）
valign：上下对齐方式（top、middle、bottom）

二十一、表单标签

<form>：表单的最外层容器
<input>：标签用于搜集用户信息，根据不同的type数值，展示不同的控件，如输入框、密码框、复选框等

（input的）type属性               含义
     text                   普通的文本输入框
   password                    密码输入框
   checkbox                      复选框
    radio                        单选框
    file                        上传文件
    submit                      提交按钮
    reset                       重置按钮

代码及效果展示：

<form action="提交的地址">
    <h2>输入框：</h2>
    <input type="text">
    <h2>密码框</h2>
    <input type="password">
    <h2>复选框</h2>
    <input type="checkbox">苹果
    <input type="checkbox">香蕉
    <input type="checkbox">葡萄
    <h2>单选框</h2>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h2>上传文件</h2>
    <input type="file">
    <h2>提交按钮和重置按钮</h2>
    <input type="submit">
    <input type="reset">
</form>

在这里插入图片描述

其他与表单相关的标签：

<textarea>：多行文本框
<select>、<option>：下拉菜单
<label>：辅助表单

<h2>多行文本框</h2>
<textarea cols="30"rows="10"></textarea>

二十二、表格表单的组合使用

1、表格表单之间可以互相组合形成数据展示效果（表格有嵌套规范，表单没有，所以再正常情况下我们优先写表单）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <table border="1" cellpadding="30">
            <tBody>
            <tr align="center">
                <td rowspan="4">总体信息</td>
                <td colspan="2">用户注册</td>
            </tr>
            <tr align="right">
                <td>用户名：</td>
                <td><input type="text" placeholder="请输入用户名"></td>
            </tr>
            <tr align="right">
                <td>密码：</td>
                <td><input type="password" placeholder="请输入密码"></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset">
                </td>
            </tr>
        </tBody>
        </table>
    </form>
</body>
</html>

在这里插入图片描述

二十三、div与span

1、div（块）

div全称为division，"分割、分区"意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、表格、标题、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

2、span（内联）

用来修饰文字的，div与span都是没有任何默认样式的，需配合CSS才行。

<body>
  <div>这是一个块</div>
  <span>这是一个内联</span>
</body>

接下来是新的开篇（CSS篇）

一、CSS基础语法

1、

基础格式

选择器 { 属性1 ： 值1 ；属性2 ： 值2；}

单位：px→像素（pixel）、%→百分比
基本样式：width、height、background-color
CSS注释：/* CSS注释的内容 */
例：

<head>
    <style>
    div {width:100px;height:100;background-color: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>

二、CSS基本样式

1、基本样式

width:宽 height:高 background-color:背景色

CSS的注释：/* 内容 */ 快捷键分别是shift+alt+a与ctrl+/

2、内联样式与内部样式

内联（行内、行间）样式
在html标签上添加style属性来实现的

<body>
     <div style="width:100px;height:100px;background-color:red">这是一个块</div>
     <div>这又是一个块</div>

内部样式
在

<style>
div{ width:100px;height:100px;background-color:red"}
</style>

3、外部样式及两种样式

1、通过<link>标签：

rel属性指定资源跟页面的关系。
href属性是资源的地址。

标签：rel、href

rel属性值：
      值                           描述
   alternate          文档的替代版本（比如打印页、翻译或镜像）
  stylesheet                  文档的外部样式表
    start                   集合中的第一个文档
     next                   集合中的下一个文档
     prev                   集合中的上一个文档
   contents                     文档的目录
    index                       文档的索引
   glossary            在文档中使用的词汇术语表（解释）
   copyright                包含版权信息的文档
   chapter                       文档的章
   section                       文档的节
  subsection                    文档的小节
  appendix                      文档的附录
    help                         帮助文档
  bookmark                       相关文档

2、通过@import：

利用<style>标签，格式为：

@import url('目标路径')

三、CSS中的颜色表示法

1.单词表示法。

red、blue、green、yellow…

2.十六进制表示法。

#000000、#ffffff
十进制：0 1 2 3 4 5 6 7 8 9
二进制：0 1
十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f

3.rgb三原色表示法.

rgb(255,255,255);
取值范围 0~255

4.获取颜色的工具。

提取颜色的下载地址：https://www.baidufe.com/fehelper
photoshop工具

四、CSS背景样式

1、background-color ：背景颜色
2、background-image ：背景图片
url(背景地址)
默认：会水平垂直都铺满背景图
3、background-repeat ：背景图片的平铺方式
repeat-x：x轴平铺
repeat-y：y轴平铺
repeat：x，y都进行平铺（默认值）
no-repeat：都不平铺
4、background-position ：背景图片的位置
x y：number(px、%)或单词
x：left、center、right
y：top、center、bottom
5、background-attachment ：背景图随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed （背景位置是按照浏览器进行偏移的）

<style>
        body{ height: 2000px ;}               滚动条
        div {width:300px;height:300px;background-color: red;}
             background-image: url（图片路径）
             background-repeat: no-repeat;
             background-position: 100px 50px;（50% 50%）
        background-attachment: scroll；      滚动条
        }
</style>

五、背景实现视觉差的效果

<head>
<style>
#div1{width:1440px;height:800px;background-image:url(图片路径）;}
</style>
</head>
<body>
<div id="div1"></div>
</body>

六、CSS边框样式

border-style：样式：solid实线，dashed虚线，dotted点线
border-width：大小（px）
border-color：颜色：这里可以参考css中的颜色表示法，只特殊记录transparent：透明色
边框也可以针对某一条边进行单独设置：
例：border-left-style
中间是方向:left、right、top、bottom

<style>
       div{width:300px;height:300px;border-style: solid;border-color:red;border-width: 1px;}
       div{width: 300px;height: 300px;border-right-style:dashed;border-color:red;border-width: 30px;}
 div{width: 300px;height: 300px;border-right-style: dotted;border-right-width:10px;border-right-color: green;}  /* 针对不同的边可以分别更改样式 */
    </style>

七、利用边框实现三角形

width:0px;height:0px
颜色：透明文字 transparent
注：隐藏的边框要与背景色同色
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body{background-color: green;}
    div{ width:0px; height:0px;
        border-top-color:transparent;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color:red;
        border-right-style: solid;
        border-right-width: 30px; 
        border-bottom-color:transparent;
        border-bottom-style: solid;
        border-bottom-width: 30px; 
        border-left-color:transparent;
        border-left-style: solid;
        border-left-width: 30px;
    }
    
    </style>
</head>
<body>
    <div></div>
</body>
</html>

八、CSS文字样式

1、font-family：字体类型

英文字体：Arial , ‘Times New Roman’ …
中文字体：微软雅黑，宋体 …
中文字体的英文名称：
微软雅黑：‘Microsoft Yahei’
宋体：SimSun
例：

  <style>
        div{font-family: 宋体;}
    </style>

衬线体与非衬线体
衬线体：端点有棱角，如宋体
非衬线体：字体平滑，如微软雅黑
非衬线体采用了扁平化设计，简单直观。

注意事项：
设置多字体方式
引号的问题（引号添加的目的）

2、fort-size：字体大小

两种模式：
正常：normal 加粗：bold
写法：

                 属性数值                                字体大小
                 xx-small                                 最小
                 x-small                                  较小
                  small                                    小
                 medium                                正常（默认值）
                  large                                    大
                 x-large                                  较大
                 xx-large                                 最大

3、font-weight：字体粗细

模式：正常（normal）加粗（bold）
写法：单词（normal、bold）或 number（100-900，100到500都是正常的，600到900都是加粗的）

4、font-style：字体样式

两种模式：
正常（normal）斜体（italic）
写法：
单词（normal、italic）
注：oblique也表示斜体，但用的比较少，一般了解即可
区别：
1、italic：带有倾斜属性的字体才可以设置倾斜
2、oblique：没有倾斜属性的字体也可以设置倾斜操作

5、color：字体颜色

例：

<head>
    <style>
        div{font-size:30px;font-weight: bold;font-style: italic;color:red}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>

九、CSS段落样式

1、text-decoration：文本修饰

下划线：underline
上划线：overline
删除线：line-through
不添加任何装饰：none
注：添加多个文本修饰：在不同修饰之间用空格隔开

2、text-transform：文本大小写（针对英文）

lowercase：小写
uppercase：大写
capitalize：只针对首字母大写

3、text-indent：文本缩进

首行缩进（缩进两个：默认32px，要根据像素修改）
em单位：相对单位，1em永远都是跟字体大小相同

4、text-align：文本对齐方式

left（左对齐）（默认）
right（右对齐）
center（居中）
justify（两端对齐）

5、文本的行高

line-height：定义行高
定义：行高由上边距，、字体大小、下边距组成，上下边距是等价关系
默认：默认行高不是固定值，而是变化的。根据当前字体的大小再不断变化。
取值：number（px）| scale（比例值，跟文字大小成比例的）

十、文本间距与英文折行

1、letter-spacing

字之间的间距

2、word-spacing

词之间的间距（只针对英文字体）

3、强制折行

1、word-break：break-all；（非常强烈的折行)
2、word-wrap：break-word(不是那么强烈的折行，会产生一些空白区域）

十一、CSS复合样式

单一样式：一个CSS属性只控制一种样式
复合样式：一个CSS属性控制多种样式，复合的写法是通过空格的方式实现，有的是不需要关心顺序，例如background、border；有的是需要关心顺序的，例如font.

background：red url() repeat 0 0;
border :1px red solid（border-right）
font：最少要有两个值size family（weight style size/line-height family）

注：尽量不要混写，如果非要混写，那么一定先写复合样式，再写单一样式。

十二、CSS选择器及注意事项

1、ID选择器

ID选择器
   css：#elem{}
   html：id="elem"

<head> 
    <style>
      #div1{background: red;}
      #div2{background: blue;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这又是一个块</div>
</body>

注：
1、ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
2、命名的规范，由字母、下划线、中划线、数字/字母（命名的第一位不能是数字）。
3、命名方式，驼峰式、下划线式、短线式。
4、驼峰写法：searchButton（小驼峰） SearchButton（大驼峰）
5、短线写法：search-small-button
6、下划线写法：search_small_button

十三、ClASS选择器

css：.elem{ }
html：class=“elem”
注：

1、class选择器可以复用
2、可以添加多个class样式
3、存在多个样式的时候，样式的优先级根据CSS决定，而不是在Class属性中的顺序。
4、便签＋类的写法

例：

 <head>  
    <style>
     .box{background-color: red;}
     .content{font-size: 30px;}
    </style>
</head>
<body>
    <div class="box">这是一个块</div>
    <div class="box">这又是一个块</div>
    <p class="box content">这是一个段落</p>              class的复用
</body>