web前端从零到一（第二周）_前端当一个字段为1展示成什么字段值为2展示成什么-CSDN博客

本文链接：https://blog.csdn.net/yunmosong/article/details/127574274

21.嵌套列表

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

在这里插入图片描述
同理定义列表也可以嵌套

22.表格标签

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
table、tr、td、caption等
注：之间是有嵌套关系的，要符合嵌套规范、
在这里插入图片描述

23.表格属性

border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan：合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式
在这里插入图片描述

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

24.表单标签

<form>:表单最外层容器
<input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
form,input…
<textarae>:多行文本框
<select>、<option>:下拉菜单
<label>辅助标签
常见属性：checked、disabled、name、for…
在这里插入图片描述

25.表单相关标签

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

26.表格表单标签

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

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

27.div与span

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

在这里插入图片描述

28.CSS基础语法

语法

1.格式:
选择器{属性1 : 值1 ；属性2 : 值2 }
2.单位:
px -> 像素(pixel)、% -> 百分比
外容器 -> 600px 当前容器 50% -> 300px
外容器 -> 400px 当前容器 50% -> 200px
3.基本样式:
width、height、background-color(背景色)
CSS注释:
/* CSS注释的内容 */

`` <style>
        div{ width : 100% ; height : 100px ; background-color : red}
        span{ background-color: blue;}
 </style>
</head>
<body>
    <div>这是一个块</div>
    <div>又是一个块</div>
    <span>这是一个内联</span>
</body>

29.内联样式与内部样式

内联（行内、行间）样式
在html标签上添加style属性来实现的
注:内部样式的优点，可以复用代码
内部样式：
style标签
区别：
内部样式的代码可以复用、复合w3c的规格标准，进行让结构和样式分开处理。

在这里插入图片描述

30.外部样式及两种写法

外部样式
引入一个单独的CSS文件，name，css
通过link标签引入外部资源，rel属性指定资源和页面的关系，herf属性资源的地址。

link和@import的区别
http://t.csdn.cn/IjeMv

31.CSS中的颜色表示法

1.单词表示法 : red、blue、green、yellow······
2.十六进制表示法:
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);
取值范围: 0 ~ 255

<style>
        /* div{background-color:#ff0000 } */
        /* div{background-color:#000000 } */
        div{background-color:rgb(0,0,0); }
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

32.背景样式

background-color:背景颜色
background-image:背景图片
url(背景地址)
默认：会水平垂直都铺满背景图
background-repeat:背景图片的平铺方式

repeat-x
repeat-y
repeat(x,y轴都平铺)
no-repeat
background-position:背景图片的位置

x y:number(px、%)|单词
x : left、center、right
y : top、center、bottom
background-attachment:背景图随滚动条的移动方式
scrol:默认值（背景位置是按照当前元素进行偏移的）
fixed:固定不动（背景位置按照浏览器进行偏移）

33.CSS边框样式

border-style:边框的样式
solid：实线
dashed：虚线
dotted：点线
border-width：边框的大小
px…
border-color：边框的颜色
red #f00 …
注：针对某一条边进行单独设置
颜色：透明颜色 transparent
在这里插入图片描述

34.边框实现三角形

<style>
     body{background-color: bisque;}
     div{width: 0px; height: 0px;
         border-top-color: transparent;
         border-top-style:solid;
         border-top-width:30px;
         border-right-color: rgb(0, 255, 213);
         border-right-style:solid;
         border-right-width:30px;
         border-bottom-color: transparent;
         border-bottom-style:solid;
         border-bottom-width:30px;
         border-left-color: transparent;
         border-left-style:solid;
         border-left-width:30px;
         }
 </style>

36.family字体类型

1.font-family : 字体类型
英文字体 : Arial,‘Times New Roman’
中文字体 : 微软雅黑，宋体
2.中文字体的英文名称 :
微软雅黑: ‘Microsoft YaHei’(非衬线体)
宋体: SimSun(衬线体)
3.衬线体与非衬线体
==注意点: ==
1.多个字体类型的设置目的
2.引号的添加目的

37.字体大小粗细样式

font-size：字体大小
默认大小：16px
写法：
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：字体颜色

38.文本修饰与文本大小写

1.rext-decoration : 文本装饰
下划线(underline)、删除线(line-through)、上划线(overline)、不添加任何装饰(none)
取值
注: 添加多个文本修饰 : line-through under-line overline
2.text-transform : 文本大小写(针对英文)
小写 : lowercase
大写 : uppercase
只针对首字母大写:capitalize

39.文本缩进与文本对齐

1.text-indent : 文本缩进
首行缩进
em单位: 相对单位，1em永远跟字体大小相同
2.text-align : 文本对齐方式
对齐方式 : left、right、 center、justify (两端点对齐)

40.文本的行高

line-height：定义行高
定义：一行文字的高度，上边距和下边距的等价关系
默认：不固定，根据当前字体大小不断变化
取值：number（px）| scale（比例值，跟文字大小成比例）

41.文本间距与英文折行

1.letter-spacing : 定义字间距
2.word-spacing : 定义词间距(针对英文)
3.强制折行: (针对英文)

<style>
 /* p{ letter-spacing: 10px;} */
        div{ width: 300px; height: 300px; border: 1px solid red; 
        word-break: break-all;}
    </style>
</head>
<body>
<!-- <div>
        庄达菲有着写作、唱歌、跳舞、摄影等兴趣爱好，曾学习大提琴、小提琴、
        吉他、钢琴等乐器，还能说一口流利的英语和老北京话。
    </div> -->
    <div>
        Another building of note is Rosenborg Palace. Rosenborg was used as a royal 
        residencendoubtedly until the early 1700s but is now used as a museum to house
        the Danish Crown Jewels.house. 
    </div>
</body>

42.文本与段落实现个人简介

43.CSS复合样式

1,.一个CSS属性只控制一种样式：单一样式
一个CSS属性控制多种样式：复合样式
2.复合样式：
background
border
font
3.复合写法（通过空格实现，有的属性不用在意顺序，如background、border，有的需要，如font）
background：red url（）repeat 0 0；
border：1px red solid；
font：weight style size family
style weight size family
weight style size/line-height family
（最少要有值 size 和 family

44.ID选择器及注意事项

1.ID选择器
css : #elem{}
html : id= “elem”
注:
1.在一个页面中，ID值是唯一的。
2.命名规范:字母、下划线、中划线、数字(命名的第一位不能是数字)。
3.命名方式:驼峰式、下划线式、短线式。
驼峰写法: searchButton(小驼峰) SearchButton(大驼峰)
searchsmallRutton
短线写法: search-small-button=
下划线写法: search_small_button

45.CLASS选择器及注意事项

CLASS选择器
css：.elem{}
html：class=“elem”
注：class选择器可以复用
可以添加多个class样式
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
标签+类的写法（如p.box)

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