Web前端学习第二周_前端表格tfood-CSDN博客

本文链接：https://blog.csdn.net/lzm0312286771_/article/details/127573421

二十、嵌套列表

列表之间可以互相嵌套形成多层级列表。请添加图片描述

请添加图片描述

二十一、表格标签

< table > : 表格的最外层容器
< tr > : 定义表格行
< th > : 定义表头
< td > : 定义表格单元
< caption > : 定义表格标题
**注意：**之间是有嵌套关系的，要符合嵌套规范。
语义化标签： < tHead > 、< tBody > 、< tFood >
**注意：**在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。
请添加图片描述

二十二、表格属性

boder : 表格边框
cellpadding : 单元格内的空间
cellspacing : 单元格之间的空间
rowspan : 合并行
colspan : 合并列
align : 左右对齐方式（left、center、right）表头或表中设置< tr >
valign : 上下对齐方式 (top、middle、bottom)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charrset="UTF-8">
    <meta name="viewport" content="width, inital-scale=1.0">
    <meta http-equiv="X-UA-Comatible" content="ie=edge">
    <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>晴朗</td>
                <td>适合出行</td>
            </tr>
            <tr>
                <td>2019年1月2日</td>
                <td>小雨</td>
                <td>出门请带伞</td>
            </tr>
        </tBody>
        <tFood>

        </tFood>
    </table>-->

    
    <table border="1" cellpadding="30" cellspacing="30">
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th colspan="2">日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2019年1月1日</td>
                <td>白天</td>
                <td>晴朗</td>
                <td>适合出行</td>
            </tr>
            <tr>
                <td>2019年1月2日</td>
                <td>白天</td>
                <td>小雨</td>
                <td>出门请带伞</td>
            </tr>
        </tBody>
        <tFood>

        </tFood>
    </table>
</body>
</html>

里插入代码片

请添加图片描述

二十三、表单标签

< form > :表单的最外层容器
< input > : 标签用于搜索用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
请添加图片描述
input（单标签）标签有一个type属性，决定是什么控件。

二十四、表单相关标签

< textarea > : 多行文本框
cols=“10”:表示10列
rows=“30”:表示30行
< select >、< option > : 下拉菜单
multiple:多选（ctrl+鼠标左键）
< label > : 辅助表单
form , input , textarea , select , label…
input（单标签）标签有一个type属性，决定是什么控件。
还有一些常见的属性：checked, disabled,name,for… 请添加图片描述

二十五、表格表单组合实例

表格表单之间可以互相组合形成数据展示效果。
请添加图片描述

二十六、div与span

div（块）：
div全称为division,“分割、分区”的意思，< div >标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在< div >标签中，< div >中还可以嵌套多层< div >,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span（内联）：
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。
请添加图片描述

二十七、CSS基础语法

格式：
选择器（属性1：值1；属性2：值2）
单位：
px -> 像素（pixel)、 % ->百分比
基本样式：
width 、height 、 background-color
CSS注释：/* CSS注释的内容 */
请添加图片描述

二十八、内联样式与内部样式

（CSS样式的引入方式）
1、内联样式：style属性
（行内、行间）样式在html标签上添加style属性来实现的
2、内部样式：style标签
在 < style >标签内添加的样式
注：内部样式的优点，可以复用代码请添加图片描述
区别：内部样式的代码可以复用、复合w3c的规范标准，进行让结构和样式分开处理。

二十九、外部样式及两种写法

引入一个单独的CSS文件，name.css
外部样式：< link >标签（引入外部资源）
rel属性 : 引入资源的类型是什么样的。（指定资源跟页面的关系）
href属性 : 引入外部资源的地址。（资源的地址）
link的rel属性：
添加链接描述
link与@import区别：
添加链接描述
@import 注：这种方式有很多问题，不建议使用。（引入外部样式）请添加图片描述

三十、CSS颜色表示法

1、单词表示法（red,blue,green…) 请添加图片描述

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)；——>白色
red green blue
取值范围：0~255
获取颜色的工具：
1、提取颜色的下载地址：添加链接描述
2、photoshop工具

三十一、背景样式

background-color : 背景颜色
background-image :背景图片 ----------------url(背景地址）
background-repeat :背景图片的平铺方式
repeat-x ： x轴平铺 repeat-y ：y轴平铺
repeat（x,y都进行平铺，默认值）
no-repeat :都不平铺
请添加图片描述

background-position :背景图片的位置
x y: number /单词
x : left,center,right
y : top,center,bottom
请添加图片描述
或者使用百分比
background-attachment :背景图随滚动条的移动方式

scroll:默认值（背景位置是按照当前元素进行偏移的）
fixed:(背景位置是按照浏览器进行偏移的）
请添加图片描述

三十二、背景实现视觉差效果

请添加图片描述

三十三、边框样式

CSS边框样式：
border-style :边框的样式(solid:实践，dashed:虚线，dotted:点线）请添加图片描述

border-width : 边框的大小(px…)
border-color : 边框的颜色(red, #f00…)
注：针对某一条边进行单独设置
边框也可以针对某一条边进行单独设置：border-left-style; 中间是方向left,right,top,bottom 请添加图片描述

三十四、边框实现三角形

颜色：透明颜色–transparent 请添加图片描述
当背景色与所显示的颜色相同时，显现不出来。

三十五、family字体类型

font-family : 字体类型
英文字体：Arial,‘Times New Roman’
中文字体：微软雅黑，宋体
中文字体的英文名称：
微软雅黑：‘Microsoft YaHei’
宋体：SimSun
衬线体与非衬线体请添加图片描述

注意：1、多个字体类型的设置目的
2、引号的添加的目的
请添加图片描述

三十六、字体大小粗细样式

font-size : 字体大小
默认大小：16px（px为像素）
写法:number(px) / 单词（small,large…不推荐使用）
请添加图片描述
注意：字体大小一般为偶数。
font-weight : 字体粗细
两种模式：正常（normal)，加粗（bold)
写法：单词（normal,bold), / number(100,200…900）实际有两种显示值（100到500都是正常的，600到900都是加粗的）
font-style : 字体样式
两种模式：正常（normal), 斜体（italic）
写法：单词（normal,italic)
注意：oblique也是表示斜体（用的比较少，一般了解即可）
区别：1、italic带有属性倾斜字体的才可以设置倾斜操作。
2、oblique没有倾斜属性的字体也可以设置倾斜操作。
color：颜色

三十七、文本修饰与文本大小写

text-decoration：文本装饰
下划线（underline），
删除线（line-through），
上划线（overline），
不添加任何装饰：none。
取值
添加多个：添加多个文本修饰用空格隔开（line-through underline overline）
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
取值
请添加图片描述

三十八、文本缩进与文本对齐

text-indent：文本缩进
首行缩进
em单位：相对单位，1个em永远都是跟字体大小相同
text-align：文本对齐方式
对齐方式：left，right，center，justify（两端点对齐）
取值
请添加图片描述

三十九、文本的行高

line-height：定义行高
定义：行高：上边距+字体大小+下边距（行高就是一行文字的高度，上边距和下边距的等价关系。）
默认：默认行高不是固定值，而是变化的。根据当前字体的大小再不断的变化。
取值：1、number（px），scale(比例值，跟文字大小成比例）
请添加图片描述

四十、文本间距与英文折行

letter-spacing：定义字间距
word-spacing：定义词间距（针对英文段落的）
强制折行：（针对英文）英文和数字不自动折行的问题：
1、word-break：break-all；（非常强烈的折行）
2、word-wrap：break-word；（不是那么强烈的折行）
请添加图片描述

四十一、文本与段落实现个人简介

请添加图片描述

四十二、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合样式：
复合的写法：是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background,border;有的是需要关心顺序，例如font。
1、background : red , url(), repeat 0 0;
2、border ：1px , red , solid;
3、font ：
注：最少要有两个值 size,family(要有顺序）
weight,style,size,family(正确）
style,weight,size,family(正确）
weight,style,size/line-height,family(正确）
注意：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。这样样式才不会被覆盖掉。
请添加图片描述

四十三、ID选择器及注意事项

ID选择器
css : #elem{}
html : id= “elem”
注意：
1、在一个页面中，ID值是唯一的。
2、命名规范，字母、_(下划线）、-（中划线）、数字（命名的第一位不能是数字）。
3、命名方式，驼峰式、下划线式、短线式。
searchButton(小驼峰） SearchButton(大驼峰） searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button
查看大网站的控台来了解这些
请添加图片描述

四十四、CLASS选择器及注意事项

CLASS选择器：
css : elem{}-----.elem{}
html : “elem” -----class=“elem”
注意：
1、class选择器是可以复用的。
2、可以添加多个class样式。
3、多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4、标签+类的写法。
请添加图片描述