第二周学习笔记

m0_74285167

已于 2022-10-28 07:39:13 修改

阅读量157

点赞数

文章标签：学习

于 2022-10-28 00:02:54 首次发布

本文链接：https://blog.csdn.net/m0_74285167/article/details/127466309

版权

十七、列表标签

3.嵌套列表

注：列表之间可以相互嵌套，形成多层级列表。
==注：列表之间可以相互嵌套，形成多层级列表。==

<body>
    <ul>
      一
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
      二
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </ul>
</body>

效果：
在这里插入图片描述

4.表格标签

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

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

语义化标签：<tHead>、<tBody>、<tFood>（对页面无实际效果）
例：

<body>
    <table>
        <thead>
        <caption>天气预报</caption>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2022年10月22日</td>
            <td><img src="C:\Users\lenovo\Desktop\HTML\UWK7NSO~$E1X{(`C%ROD6_6.gif" alt=""></td>
            <td>天气有雨，不适合出行</td>
        </tr>    
        <tr>
            <td>2022年10月22日</td>
            <td><img src="C:\Users\lenovo\Desktop\HTML\UWK7NSO~$E1X{(`C%ROD6_6.gif" alt=""></td>
            <td>天气有雨，不适合出行</td>
        </tr>    
        </tbody>
    </table>
</body>

注：在一个table中，tbody可以出现多次，但thead、tfood只能出现一次。

5.表格属性

border:表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式

注：
align: left、center、right
valign:top、middle、bottom
例：

<body>
    <table border="1" cellpadding="30" cellspacing="30">
        <caption>天气预报</caption>
        <thead>
        <tr align="right" valign="top">
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td rowspan="2" valign="top">2022年10月22日</td>
            <td>白天</td>
            <td><img src="./1.jpg" alt=""></td>
            <td>天气晴朗，适合出行</td>
        </tr>    
        <tr>    
            <td>夜晚</td>
            <td><img src="./1.jpg" alt=""></td>
            <td>天气晴朗，适合出行</td>
        </tr>    
        <tr>
            <td rowspan="2" valign="bottom" >2022年10月23日</td>
            <td>白天</td>
            <td><img src="./2.jpg" alt=""></td>
            <td>有小雨，请出门带伞</td>
        </tr>    
        <tr>
            <td>夜晚</td>
            <td><img src="./2.jpg" alt=""></td>
            <td>有小雨，请出门带伞</td>
        </tr>  
        </tbody>
    </table>
</body>

效果图：
在这里插入图片描述

6.表单标签

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

input的type属性，它决定是什么控件。

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

例：

<body>
   <form action="">     <!-- 提交的文件地址填在action属性里 -->
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框</h2>
        <input type="checkbox" checked>a
        <input type="checkbox" checked>b
        <input type="checkbox">c 
        <input type="checkbox" disabled>d 
        <h2>单选框</h2>
        <input type="radio" name="1" id="">男
        <input type="radio" name="1" id="">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>

显示效果：
在这里插入图片描述
<textarea>：多行文本框
<select>、<option>：下拉菜单
<label>：辅助菜单
label的for属性，与input的id属性一一对应，使可点击的范围变大。

还有一些常见属性：
checked（按钮已选中）、disabled（不可选）、selected（下拉菜单中的已选择）、size（下拉菜单显示数量）、namemultiple（多选）

例:

<h2>多行文本框</h2>
    <textarea cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select>
        <option selected disabled>请选择</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <select size="3">
        <option selected disabled>请选择</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    <select multiple>
        <option>请选择</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <input type="file" multiple>  <!--文件多选-->   
    <input type="radio" name="gender" id="man"><label for="man">男</label>
    <input type="radio" name="gender" id="woman"><label for="woman">女</label>

显示效果：
在这里插入图片描述

7.表单表格组合

例：

 <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 >
                    <td colspan="2"><input type="submit" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset" >
                    </td>
                </tr>
            </tbody>
        </table>
        
    </form>

显示效果：
在这里插入图片描述
小练习：实现下面图片的内容

代码：

<!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="10"><tr>
            <td>班次名称</td>
            <td>科目</td>
            <td>授课内容</td>
            <td>增值服务</td>
            <td>课时</td>
            <td>价格</td>
            <td>试听</td>
            <td>购买</td>
        </tr>
        <tr>
            <td rowspan="3">真题精解班</td>
            <td>行测+申论</td>
            <td>全科历年真题精解</td>
            <td rowspan="3">课后赠2套模拟卷24小时以内解答</td>
            <td>48</td>
            <td>1280元</td>
            <td><a href=""><img src=".//耳机.png" alt=""></a></td>
            <td><a href=""><img src="./购物车.png" alt=""></a></td>
        </tr>
        <tr>
            <td>行测</td>
            <td>行测历年真题精解</td>
            <td>32</td>
            <td>980元</td>
            <td><a href=""><img src=".//耳机.png" alt=""></a></td>
            <td><a href=""><img src="./购物车.png" alt=""></a></td>
        </tr>
        <tr>
            <td>申论</td>
            <td>申论历年真题精解</td>
            <td>16</td>
            <td>580元</td>
            <td><a href=""><img src=".//耳机.png" alt=""></a></td>
            <td><a href=""><img src="./购物车.png" alt=""></a></td>
        </tr>
        <tr>
            <td rowspan="3">高级技巧班</td>
            <td>行测+申论</td>
            <td>全科技巧强化</td>
            <td rowspan="3">入学试卷评测24小时内解答</td>
            <td>32</td>
            <td>980元</td>
            <td><a href=""><img src=".//耳机.png" alt=""></a></td>
            <td><a href=""><img src="./购物车.png" alt=""></a></td>
        </tr>
        <tr>
            <td>行测</td>
            <td>行测技巧强化</td>
            <td>18</td>
            <td>680元</td>
            <td><a href=""><img src=".//耳机.png" alt=""></a></td>
            <td><a href=""><img src="./购物车.png" alt="s"></a></td>
        </tr>
        <tr>
            <td>申论</td>
            <td>申论技巧强化</td>
            <td>14</td>
            <td>580元</td>
            <td><a href=""><img src=".//耳机.png" alt=""></a></td>
            <td><a href=""><img src="./购物车.png" alt=""></a></td>
        </tr>
        </table>
    </form>
</body>
</html>

效果图：
在这里插入图片描述

十八、div与span

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

十九、CSS基础语法

格式：选择器{ 属性 1 : 值 1 ; 属性 2 : 值2 }
width : 宽
height：高
background-color：背景色

长度单位：

px->像素
%->百分比

外容器->600px 当前容器 50%->300px
CSS注释： /*CSS注释的内容*/

1.内联样式与内部样式

①内联（行间、行内）样式

在html标签上添加style属性来实现的

②内部样式

在<style>标签内添加的样式
注：内部样式的优点，可以复用代码

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

③外部样式

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

通过link标签引入外部资源，rel指定资源跟页面的关系，herf属性表示资源的地址。
通过@import的方式引入外部样式注：这种方式有很多问题，不建议使用

2.CSS中的颜色表示法

单词表示法：red blue green yellow…
十六进制表示法：#000000 #ffffff
rgb三原色表示法：rgb(255,255,255) 取值范围 0~255

提取颜色：用FeHelper、ps取色

小练习

二十、CSS背景样式

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

例：

<!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
        div { width:2560px ; height: 1440px ; 
            background-color: royalblue;
            background-image: url(./SXGTZ65YEP@9]G$_07ARNP5.jpg);
            background-repeat:no-repeat;
            background-position: 50% 50% ;
            background-attachment:fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

二十一、CSS边框样式

border-style : 边框的样式

solid : 实线
dashed : 虚线
botted : 点线

border-width : 边框的大小
border-color : 边框的颜色

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

边框也可以针对某一条边单独设置：border-left-style 中间是方向：left、right、top、bottom

透明颜色：transparent

二十二、CSS文字样式

1. font-family : 字体类型

英文、中文、称线体、非称线体

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

注意点：

多个字体类型设置的目的：适应更多设备
引号添加的目的
字体名字中出现空格，必须使用引号。

中文字体的英文名称：Microsoft YaHei（微软雅黑）、SimSun（宋体）

2. font-size：字体大小

*写法：
number（px）、单词（不建议使用）

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

注：字体大小一般为偶数。

3. font-weight：字体粗细

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

4. font-style：字体样式

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

注：oblique也表示斜体，用的比较少

区别：

italic 所有带有倾斜字体的可以表示
oblique 没有倾斜属性的字体也可以设置倾斜操作。

5. color：字体颜色

例：

  <style>
        div{font-family: Arial, Helvetica, sans-serif;
            font-size: 200px;
            font-weight: bold;
            font-style: italic;
            color: red;}
    </style>

二十三、CSS段落样式

1. text-decoration：文本装饰

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

注：添加多个文本修饰：line-through underline overline

2. text-transform：文本大小写（针对英文段落）

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

3. text-indent：文本缩进

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

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

对齐方式：left、right、center、justify（两端点对齐）

例：

<!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>
   p{text-align: justify;
    text-decoration: underline;
    text-transform: uppercase;
    text-indent: 2em;
    text-align: justify;
line-height: 2;}
    </style>
</head>
<body>
<p>2022全球移动宽带论坛（Global MBB Forum 2022）期间，华为ICT产品与解决方案总裁、华为无线网络产品线总裁杨超斌提出全频段走向5G，并发布了支撑全频段走向5G的One 5G理念和全系列解决方案。杨超斌表示：“5G已进入高速发展期，未来全频段将走向5G，构筑性能最优、能耗最低、体验最好的5G网络。”aaaa</p>
</body>
</html>