第二次双创作业

mttp02

已于 2022-10-29 11:26:39 修改

阅读量325

点赞数

文章标签： html

于 2022-10-28 16:10:49 首次发布

本文链接：https://blog.csdn.net/m0_74348480/article/details/127573647

版权

第二次作业

21嵌套列表

列表之间可以互相嵌套形成多层列表

无序嵌套

<ul> 
   <li>
    辽宁省
    <ul>
            <li>沈阳</li>
            <li>大连</li>
            <li>丹东</li>
   </ul>
  </li>
  <li>
         山东省
           <ul>
              <li>济南</li>
              <li> 青岛</li>
              <li>烟台</li>
          </ul>
       </li>
</u1>

输出如下图：

定义列表嵌套

22表格标签

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

<body>
<table>
<capt ion>天气预报{/ caption)
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
<td> 2019年1月1日</td>
<td><img src=" ./img/tianqi 1.png" alt=""></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td>2019年1月2日</td>
<td><img src=" ./img/tianqi 2.png" alt=""></td>
<td>有小雨，出门请带伞</td>
</tr> 
</table>
</body>

输出如下：
在这里插入图片描述
语义化标签：<tHead>,<tBody>,<tFood>
尽量规范
注意：在一个table中，tBody,是可以出现多次的，但另外两个只能出现一次

23表格属性

border :表格边框
cellpadding :单元格内的空间
cellspacing :单元格之间的空间
rowspan :合并行
colspan :合并列
align :左右对齐方式
valign :上下对齐方式
默认情况下表格是没有边框的
border加到table后面

输出如下：

<table border="1">边框为一

则
在这里插入图片描述

如下：

<table border="1" cellpadding="30">

则
在这里插入图片描述

如下

<table border="1" cellpadding="30" cellspacing="30">

则：
在这里插入图片描述

合并第一行两列：

<tr>
<th colspan="2"> 日期</th> 
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td> 2019年1月1日</td>
<td>白天</td>
<td><img src="./ img/tianqi 1.png" alt=""></td>
<td>天气晴朗，适合出行</td>
</tr>

<th colspan="2">日期</th>

主要是这行
表示下面两行等于上面一行

在这里插入图片描述
同理
如果输入：

<td rowspan="2"></td>

则
在这里插入图片描述

align:left,center,right
valign:top,middle,bottom

<tr align="right">

在这里插入图片描述

24表单标签

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

在这里插入图片描述

表单没有太多规范
input(单标签）标签有一个type属性，决定是什么控件。

<body>
<form action="http:/ /www . baidu. com">
<h2>输入框: </h2>
<input type="text" >
<h2>密码框: </h2>
<input type=" pas sword">
<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" >
/formp
</body>

[^下图是上图代码输出的结果]

注意

像ckecked是锁定选项
disabled是无法选择

例如:

<h2>复选框</h2>
<input type="checkbox">苹果
<input type=" checkbox">香蕉
<input type=" disabled">葡萄

如果输入如下：

<h2>输入框: </h2>
<input type="text" pl aceholder="请输入用户名">
<h2>密码框: </h2>
<input type="password" placeholder=" 请输入密码">

则placehoder会出现如下效果
在这里插入图片描述

25表单标签

1.多行文本框
输入如下

<textarea cols="30" rows="10"></textaera>

即为下图
在这里插入图片描述
2.下拉菜单

`<select>.<option>`

<select>
<option selected disabled>请选择</option>
<option>北京</option>
<option>_上海</option>
<opt ion>杭州</option>
</select>

注意：

selected表示选定
disabled表示该项不可选

xoption207 option
</select>
<select size="3"> 
<opt ion>北京</option>
<option>.上海</option>
<opt ion>杭州</option>
</select>

size表示可选的多少：可选三个

<select multiple>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>

multiple表示可多选

<label>

辅助表单
在这里插入图片描述
这样就算点击字也可以切换，可选范围变大

26表格表单组合

表格表单之间可以互相组合
表格有嵌套规范，但是表单没有
在这里插入图片描述

27div与span

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

div:做一个区域划分的块
span:对文字进行修饰的内联
在这里插入图片描述

28css基础语法

在这里插入图片描述
（px）是像素

利用上面的div对下面的div产生影响

格式:
选择器{属性1 :值1 ;属性2:值2 }
单位:
px ->像素( pixel)、%->百分比
基本样式:
width、height. background-color

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

wide:宽
height:高
background-color：背景颜色
长度单位：
1.px->像素
2%->百分比

29css样式的引入方式

1.内联样式：style属性
2.内部样式：style标签
内联(行内、行间)样式
在html标签上添加style属性来实现的
内部样式
在style标签内添加的样式
注:内部样式的优点，可以复用代码

内部样式可以复用，符合w3c的标准，让结构和样式分开处理。

<style>
div{   }
</style>
<body>
     <div>   </div>
     <div>   </div>
</body>

30外部样式

引入一个单独的css文件，name.css
1.通过link标签引入外部资源，
rel属性指定资源跟页面的关系
helf属性资源的地址

在这里插入图片描述

在外边单独写一个CSS文件通过link来引

2.@import这种方式也可以引入
注意：这种方式有很多问题，不建议使用。
在这里插入图片描述

31CSS中的颜色表示法

1.单词表示法
2.十六进制表示法
3.RGH三原色表示法（0-255）
格式如下：

div{background-color:rgh(0,0,0);}

ps可以提取颜色。

32CSS中的背景样式

background-color :背景颜色
background-image :背景图片
background-repeat :背景图片的平铺方式
background-position :背景图片的位置
background-attachment :背景图随滚动条的移动方式
1.background-image:

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

33视觉差

在这里插入图片描述
图片可动

<style>
#div1{ width: 1400px; height: 800px; background image:url( ./ img/1. jpg); background- attachment: fixed;}
#div2{ width: 1400px; height: 800px; background image:url( ./ img/2. jpg); background-attachment: fixed;}
#div3{ width: 1400px; height: 800px; background image :url( ./ img/3. jpg); background attachment: fixed;
</study>

此时图片不动

34CSS边框样式

border-style :边框的样式
border-width :边框的大小
border-color :边框的颜色
注:针对某-条边进行单独设置

border-style:边框样式：

solid:实线
dashed：虚线
dotted:点线
边框也可以针对某一边单独设置：例如body-left-style:中间是方向（left,right,top,bottom)

35练习：利用边框实现三角形

<style>

在这里插入图片描述

在这里插入图片描述
只是利用背景的障眼法。
也有透明颜色:transparent
例：

36CSS文字样式

默认：微软雅黑
font- family :字体类型
英文字体: Arial , ‘Times New Roman’
中文字体:微软雅黑，宋体

英文字体不能对中文起作用，但是中文字体可以对英文起作用。

中文字体的英文名称
微软雅黑: ‘Microsoft YaHei’
宋体: SimSun

在这里插入图片描述
大多数网站倾向于用非衬线体

多个字体类型的设置目的：一般会设置多个字体，防止出现计算机中没有字体。
例如：在这里插入图片描述
什么情况下要加引号？当字体中出现空格时需要用引号引起来

37CSS文字样式（2）字体大小

在这里插入图片描述
注意：字体大小一般为偶数
font- weight :字体粗细
两种模式
写法
模式：正常（normal),加粗（bold)
写法：单词（nomal.bold)|number(100到500是正常，600到900是加粗）

font-style:字体样式
模式：正常（normal) 斜体（italic)
注意：oblique也表示斜体，用的少
区别：italic带属性的倾斜字体才可以设置倾斜操作
oblique没有倾斜属性的字体也可以设置倾斜操作
color 字体颜色

38CSS段落样式

1. text- decoration :文本装饰
2. text-transform :文本大小写

text-decoration:

下划线：underline
删除线:line-through
上划线：over-line
不添加任何：none
注意：添加多个多个文本修饰也可以

text-transform:文本大小写(针对英文）

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

39段落样式（2）

text-indent :文本缩进
首行缩进
em单位

p{ text-indent : 36px;font-size:18px;}

此处1em=18px
em：相对单位，1em永远都是跟字体大小相同
font-size:表示段络字体
混入英文可能导致对不齐

text-align :文本对齐方式
取值

对齐方式：left,right,center,justify(两端点对齐）

40CSS段落样式（3）

line-height：定义行高
在这里插入图片描述

默认行高：不是固定值，而是变化的，根据当前字体大小再不断变化
取值：1.number(px)|sxale(比例值，跟文字大小）
如下就是比例值样式：

p{line-height：2；}

41CSS段落样式（4）

letter-spacing :定义字间距
word-spacing :定义词间距( 针对英文)

在这里插入图片描述
字间距

在这里插入图片描述
行间距（针对英文段落）

强制折行: (针对英文)

word-break : break- all; (非常强烈的折行)
word-wrap : break word;(不是那么强烈的折行)

针对英文数字不会自动折行问题

这是不是那么强烈的折行
在这里插入图片描述
这是强烈的折行

43CSS复合样式

一个CSS属性只控制一种样式,叫做单一样式。
一个CSS属性控制多种样式,叫做复合样式。

复合样式
background
border
font
复合的写法，是通过空格的方式实现的。
复合写法不需要关心顺序，例如background border有的是需要关心顺序，例如font.
1.background:red url() repeat 0 0
2.border:1px red solid
3.font:（特殊）
注意：最少要有两个值size familye(不可以颠倒顺序）
注意：尽量不要混写，先写复合样式再写单一样式。

44CSS选择器

1.ID选择器
#elem{} id=“elem” (要加#）
在这里插入图片描述

ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
命名的规范，由字母、下划线、中划线、字母(并且第一个不能是数字)
驼峰写法: searchButton (小驼峰) SearchButton (大驼峰) searchSmall Button
短线写法: search- small- button
下划线写法: search_ small_ button