web前端从入门到精通

等一次雪落

已于 2022-10-28 09:54:03 修改

阅读量882

点赞数 1

文章标签： css html

于 2022-10-27 17:40:05 首次发布

本文链接：https://blog.csdn.net/m0_74219427/article/details/127466372

版权

19.嵌套列表

列表之间可以互相嵌套，形成多层级的列表。
嵌套列表的一些小案例
1.无序列表
嵌套练习

2.定义列表
练习：
练习展示
效果：

20.表格标签和表格属性

<table> 表格的最外层容器
<tr>定义表格行
<th>定义表头
<td>定义表格单元
<caption>定义表格标题
语义化标签：<tHead> <tBody> <tFood>（只是代表语义化，不会对网页造成效果影响，只是让表格更加规范）
注：①之间是有嵌套关系的，要符合嵌套规范。（表单不需要）
②在一个table中，tBody可以出现多次，但tHead和tFood只能出现一次
表格属性
练习：

<table border="1" cellpadding="20" cellspacing="5">
	<caption>天气预报</caption>						标题
 	<tHead>                                     表头的语义化标签
 	   <tr align="center"  >	 表格第一行开始
 	   	   <th colspan="2">日期</th>	
 	  						
		   <th>天气情况</th>	                      表头内容
		   <th>出行情况</th>
       </tr>
     </tHead>  
   
     <tBody>									 语义化标签
       <tr valign="middle">						表格第二行开始
 	   	   <td rowspan="2">2022.10.23</td>							
		   <td><img src="D:\img\10.23.jpg" alt="123" title="sunny"></td>	 表格单元内容
		   <td>天气晴朗，非常好</td>
       </tr>
      
       <tr>
		 （合并单元格，原来的日期删去，在上面合并了）
            <td>夜晚</td>						
            <td><img src="D:\img\10.23.jpg" alt="123" title="sunny"></td>	
            <td>天气晴朗，有点冷</td>
       </tr>

 	 </tBody>   

	 <tFood>                                    尾部语义化标签
	 </tFood>
</table>

效果展示：

align:left,center,right
valign:top,middle,bottom 加在<tr 后面>

21.表单标签

表单标签
form,input,textarea,select,label …
input(单标签）标签有一个type属性，决定是什么控件。
还有一些常见的属性：checked,disabled,name（性别）,for …

1.直接先在<body></body>中间先写个form，效果自己出来：

<body>
    <form action=""></form>          action属性后面是提交的地址
</body>

2.目前先删去action=“”,输入input ，然后直接点TAB，效果：

<input type="text"> （tab默认是text输入框）

练习：

<body>
    <form >
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名"> 
        <h2>密码框</h2>
        <input type="password">
        <h2>复选框</h2> 
        <input type="checkbox" checked>苹果    (checked是默认被选中，disabled是不能被选中)
        <input type="checkbox">香蕉
        <input type="checkbox">葡萄
        <h2>单选框</h2>
        <input type="radio" name="ab">男
        <input type="radio" name="ab">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮</h2>
        <input type="submit">
        <h2>多行文本框</h2>
        <textarea cols="20" rows="10"></textarea>  （输入textarea 按TAB）
        <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>江苏</option>
            <option>浙江</option>
            <option>山东</option>
        </select>
        <input type="file" multiple>
        
        <input type="radio" name="abc" id="man"><label for="man">男</label>
        <input type="radio" name="abc" id="woman"><label for="woman">女</label>
    </form>
</body>

效果：

22.表格表单组合

for属性与id对应
先写表单

23.div和span

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

在这里插入图片描述

24.CSS基础语法

格式：选择器{属性1：值1；属性2：值2}
长度单位：
px->像素单位（pixel)
%->百分比
<style>div{ }</style>中间的div{ }代表选择器，会映射到下面的<body>div{ }</body>中间的div标签，找到对应标签，span{ }同理
在这里插入图片描述
注释快捷键：shift+alt+a或ctrl+/
在style中间

 <style>
    /* span{blackground-color:blue} */
</style>

25.CSS样式的引入方式

1.内联样式与内部样式
在这里插入图片描述
区别：内部样式的代码可以复用，符合W3C的规范标准，进行让结构和样式分开处理。内联得写好多遍。

<html>
<head>
    **<style>
        div{ width:100px;height:100px;background-color: aqua;}   内部样式
    </style>**
</head>
<body>
   <!-- <div style="width:100px;height:100px;background-color: aqua"></div> -->  （内联样式）
   **<div>这是一个块</div>   内部
   <div>这是一块</div>    ** 样式（可以复用代码）
</body>
</html>

内部复用代码效果：

2.外部样式
通过引入一个单独的CSS文件，文件结构：name.css
引入方式：
① 通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性表示资源的地址。
link在meta和title中间，先输入link然后直接回车
属性值

<!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">
    <link rel="stylesheet" href="./common.css">                  link写这
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

css文件
效果：

② 通过@import （注：这种方式有很多问题，不建议使用）
写法：

<!-- <link rel="stylesheet" href="./common.css"> --> （先注释这行）

<title>Document</title>
    <style>
        @import url('./common.css');
    </style>

26.CSS中的颜色表示法

1.单词表示法
2.十六进制表示法:#000000 #ffffff(6位表示）
0123456789abcdef
3.rgb三原色表示法：rgb(255,255,255);
取值范围0~255

27.CSS背景样式

截图快捷键：PRT SC
background-image 背景图：格式:url(背景地址）
默认：会水平垂直都铺满
CSS背景样式

<style>
        #div1{width: 1400px;height:800px;background-image:url(./img/1.jpg);}
        #div2{width: 1400px;height:800px;background-image:url(./img/2.jpg);}
        #div2{width: 1400px;height:800px;background-image:url(./img/3.jpg);}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>    
</body>

区别下面的div：用id属性.

28.CSS边框样式

都在div{ }里面搞
border-style：边框样式
solid：实线
dashed:虚线
dotted:点线
border-width：边框大小
px…
border-color：边框颜色
red，#f00
三个一起

边框可以针对某一个边单独设置，格式：

<style>
       div{width: 1400px;height:800px;border-right-style:dotted; border-right-width:10px ;border-right-color:aqua;}
</style>

中间填方向 body{ }里面可以改变背景色
透明颜色：transparent

练习：

<style>
        body{background-color: brown;}
    div{width: 0px;height:0px;
        border-bottom-color:rgb(103, 242, 228) ;
        border-bottom-style:solid;
        border-bottom-width:100px ;
        border-right-color:transparent ;
        border-right-style:solid;
        border-right-width:100px ;
        border-top-color:transparent ;
        border-top-style:dashed;
        border-top-width:100px ;
        border-left-color:transparent;
        border-left-style:dashed;
        border-left-width:100px ;

    }
    </style>

效果：

29.CSS字体样式

font-family：字体类型

font-family：字体类型

中文、英文
div{font-family: } 里面，多字体就在后面接着写
字体名字中间有空格的时候用 ‘’
衬线体、非衬线体

font-size：字体大小
默认：16px
写法：数字(px)、单词（不推荐）
注：字体大小一般为偶数

 div{font-size:  16px}

font-weight：字体粗细
模式：正常normal 加粗bold
写法：单词、数值（100、200…900，100-500都是正常的，600-900加粗）
font-style：字体样式
模式：正常normal 斜体italic
写法：单词
注：oblique也表示斜体
区别：italic：带有倾斜属性的字体的才可以设置，oblique：没有倾斜属性的字体也可以设置倾斜操作
color:字体颜色

30.CSS段落样式

text-decoration：文本修饰
下划线underline、删除线line-through、上划线overline、不添加任何装饰none
注：添加多个文本修饰用空格隔开
tect-transform：文本大小写（针对英文）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同
示例：

p{text-indent: 2em;font-size: 14px;}

text-align：文本对齐方式
left、right、center、justify（两端点对齐）
line-height：定义行高
默认行高：不是固定值，而是变化的。根据当前字体大小在不断变化
letter-spacing：字之间的间距
word-spacing：词之间的间距（针对英文段落的）
英文和数字不自动折行问题：
1.word-break：break-all;(非常强烈的折行）
2.word-wrap：break-word;（不那么强烈的折行）

31.CSS复合样式

在这里插入图片描述
复合的写法：通过空格方式实现.
复合写法有的不需要关心顺序，例如background、border;
有的是要关心顺序的，例如font
1.background:red url() repeat 0 0;
2.border：1px red solid;
3.font: 注：最少要有两个值(weight、style、size、family)（后面这两个要按顺序，前面两个不用）
注：尽量不要混写，如果非要混写，一定先写复合样式再写单一样式，这样样式才不会被覆盖掉。

32.CSS选择器

1.ID选择器
CSS中：#elem{}
Html中：id=“elem”
下面用了id,上面的得加#
注：1.ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的
2.命名规范，字母_-数字命名（命名第一位不能是数字）
3.驼峰式写法：searchButton，searchSmallButton（小驼峰，第一个单词首字母小写，第二个大写）SearchButton（大驼峰）
短线写法：search-small-button
下划线写法：search_small_button
快捷键：div# TAB: <div id=""></div>

2.CLASS选择器
在css中：.elem{ }
在html中：class=“elem”
下面用了class,上面的得加.
在这里插入图片描述
1.复用形式：

 <style>
        .box{background: rebeccapurple;}
    </style>
</head>
<body>
    <!-- <div id="1">这是一个块</div>
    <div id="2">这又是一个块</div> -->
    <div class="box">这是一个块</div>
    <div class="box">这又是一个块</div>
    <p class="box">段落</p>
</body>

效果：

2.多个class样式

<style>
        .box{background: rebeccapurple;}
        .content{font-size: 50px;}
</style>
<body>
    <div class="box content">这是一个块</div>
</body>

效果：在这里插入图片描述
标签+类
.前面是标签，.后面是具体的class样式名

 <style>
        p.box{background: rebeccapurple;}
 </style>
<body>
    <div id="1">这是一个块</div>
    <div id="2">这又是一个块</div>
    <p class="box">段落</p>
    </div>
</body>