Web前端第二周

Ruuuuvh

已于 2022-11-02 17:00:54 修改

阅读量916

点赞数

文章标签：前端 css html

于 2022-10-29 00:02:07 首次发布

本文链接：https://blog.csdn.net/Ruuuuvh/article/details/127579374

版权

Web前端第二周

一、拨云见日

18.表格标签

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
语义化标签：<tHead>、<tBody>、<tFood>
注：在一个table中，tBody可以出现多次，tHead、tFood只能出现一次
<border>:表格边框
<cellpadding>:单元格内的空间
<cellspacing>:单元格之间的空间
<rowspan>:合并行
<colspan>:合并列
<align>:左右对齐方式
<valign>:上下对齐方式

<!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 border="1" cellpadding="15">
        <caption>天气预报</caption>
        <tr>
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        <tr>
            <td rowspan="2">2022年10月26日</td>
            <td>白天</td>
            <td><img src="./img/QQ图片20221026142322.png" alt=""></td>
            <td>有小雨，不宜出游</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td><img src="./img/QQ图片20221026142322.png" alt=""></td>
            <td>有小雨，不宜出游</td>
        </tr>
        <tr>
            <td rowspan="2">2022年10月25日</td>
            <td>白天</td>
            <td><img src="./img/QQ图片20221026142448.png" alt=""></td>
            <td>天气晴朗，适宜出游</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td><img src="./img/QQ图片20221026142448.png" alt=""></td>
            <td>天气晴朗，适宜出游</td>
        </tr>
    </table>
</body>
</html>

天气预报

19.表单标签

<form>:表单的最外层容器
<input>（单标签）:用于收集用户信息，根据不同的type属性值，展示不同的控件

<input>的type属性：

<!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>
        <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>
</body>
</html>

在这里插入图片描述
<textarea>:多行文本框
<select>、<option>:下拉菜单
<label>:辅助菜单

20.表格表单组合

<!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>

在这里插入图片描述

21.div和span

<div>:做一个区域划分的块
<span>:对文字进行修饰的内联

二、CSS基础语法

1.语法格式

格式：

选择器：（属性1：值1；属性2：值2）

单位：

px→像素（pixel）
%→百分比

外容器1→600px 当前容器 50%→300px
外容器2→400px 当前容器 50%→200px

基本样式：

width 宽
height 高
background-color 背景颜色

CSS注释：/*CSS注释的内容*/

2.内联样式与内部样式

内联（行内、行间）样式：style属性
内部样式：<style>标签
注：内部样式的优点，可以复用代码

区别：内部样式的代码可以复用、复合W3C的规范标准，进行让结构和样式分开处理

3.外部样式及两种写法

引入一个单独的CSS文件，name.css

link标签引入外部资源
rel属性指定资源和页面的关系
href属性资源的地址
~~- @import~~ 注：这种方式有很多问题，不建议使用

3.CSS中的颜色表示法

单词表示法
十六进制表示法

#000000最小
#ffffff最大

RGB三原色表示法

rgb（0，0，0）； rgb（255，255，255）
取值范围：0~255

获取颜色的工具

提取颜色的下载地址：地址
Photoshop工具

4.CSS背景样式

background - color ：背景色
background - image ：背景图片

url 背景地址
默认：会水平垂直都铺满背景图

background -repeat ：平铺方式

repeat-x x轴平铺
repeat-y y轴平铺
repeat（x、y都平铺默认值）
no-repeat 都不平铺

background - position ：背景位置

x y ：number（px、%） | 单词
x：left、centre、right
y：top、centre、bottom

background -attachment ：背景图隨滚动条的移动方式

scroll：默认值（背景位置是按照当前元素进行偏移）
fixed（背景位置是按照浏览器进行偏移）

5.CSS边框样式

border－style ：边框的样式

solid 实线
dashed 虚线
dotted 点线

border－width ：边框的大小

px…

border-color ：边框的颜色

red #f00…

注：针对某一条边进行单独设置

6.CSS字体样式

font - family ：字体类型：

英文字体： Arial ,’ Times New Roman ＇
中文字体：微软雅黑，宋体

中文字体的英文名称：

微软雅黑：’ Microsoft YaHei ’
宋体： SimSun

font - size：字体大小
（默认：16px）
在这里插入图片描述

注：字体大小一般为偶数
font - weigh：字体粗细

模式：正常（normal）、加粗（bold）

font - style：字体样式

模式：正常（normal）、斜体（italic）

注：oblique也表示斜体（用得少）
区别：（1）italic 所有带有斜体的字体才可以设置倾斜操作
（2）oblique没有倾斜属性的字体也可以设置倾斜操作

7.CSS段落样式

text - decoration：文本装饰

下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none

注：添加多个文本修饰：line-through underline overline
text - transform：文本大小写（针对英文段落）

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

text - indent：文本缩进

首行缩进→em
单位：相对单位
1em永远都是跟字体大小相同

注：若段落内容中出现英文，则也会出现对不齐的问题
text - align：文本对齐方式

左对齐：left
右对齐：right
居中对齐：center
端点对齐：justify

line - height：定义行高

默认行高：不是固定值，根据当前字体大小不断变化
取值：number（px）| scale（比例值，跟文字大小成比例）

letter - spacing：定义字间距
word - spacing：定义词间距（针对英文）
强制折行（针对英文）
word - wrap：break-word（不是那么强烈的折行，会产生一些空白区）

8.CSS复合样式

单一样式：一个CSS属性只控制一种样式
复合样式：一个CSS属性控制多种样式

写法：通过空格实现
background：color url() repeat…
border：size color
font（注意顺序）：weight style size family…

注：最好不要混写，非要写的话，先复合再单一

9.CSS选择器

ID选择器

css:#elem{} html:id=“elem”

在一个页面中，ID值是唯一的
命名规范：字母_-数字（命名的第一位不能是数字）
命名方式：驼峰式、下划线式、短线式

CLASS选择器

css:elem{} html:class=“elem”

class选择器是可以复用的
可以添加多个class样式
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
标签+类的写法

Ruuuuvh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web前端第二周

注：添加多个文本修饰：line-through underline overline。word - wrap：break-word（不是那么强烈的折行，会产生一些空白区）注：在一个table中，tBody可以出现多次，tHead、tFood只能出现一次。（单标签）:用于收集用户信息，根据不同的type属性值，展示不同的控件。区别：（1）italic 所有带有斜体的字体才可以设置倾斜操作。word - spacing：定义词间距（针对英文）命名规范：字母_-数字（命名的第一位不能是数字）
复制链接

扫一扫