web前端从学习到学废（二）

最新推荐文章于 2024-07-30 23:06:43 发布

犬十七

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量1k

点赞数

文章标签：前端学习 html

本文链接：https://blog.csdn.net/dongshan14quan17/article/details/127577558

版权

21.嵌套列表

列表之间可以互相嵌套形成多层级列表
示例：

<ul>
        <li>
           江苏省
            <ul>
                <li>南京市</li>
                <li>宿迁市</li>
                <li>盐城市</li>
            </ul>
         </li>
         <li>
           山东省
        </li>
 </ul>

22.表格标签

< table > : 表格的最外层容器
< tr > : 定义表格行
< th > : 定义表头
< td > : 定义表格单元
< caption > : 定义表格标题
注：之间有嵌套关系，注意嵌套规范。
语义化标签：< tHead > < tBody > < tFood >
注：在一个< table >中，< tBody >可以出现多次，而< tHead > < tFood >只能出现一次

示例：

<body>
    <table>
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2022年10月22日</td>
                <td>15°C阴</td>
                <td>适宜室内运动</td>
            </tr>
            <tr>
                <td>2022年10月23日</td>
                <td>16°C阴</td>
                <td>适宜室内运动</td>
            </tr>
        </tBody> 
        <tFood>

        </tFood>
    </table>
</body>

23.表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式（left center right）
valign：上下对齐方式（top middle bottom）

24.表单input标签

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

示例：

<form action="http://www.baidu.com">
        <h2>输入框</h2>
        <input type="text">
        <h2>密码框</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox" checked>香蕉
        <input type="checkbox" disabled>葡萄
        <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>

25.表单相关标签

 <h2>多行文本框</h2>
 <textarea cols="30" rows="10"></textarea><!--cols表示行，rows表示列-->
 <h2>下拉菜单</h2>
 <select><!--单选-->
     <option selected disabled>请选择</option>
     <option>北京</option>
     <option>上海</option>
     <option>南京</option>
 </select>
 <select size="2"><!--显示多项-->
     <option>北京</option>
     <option>上海</option>
     <option>南京</option>
 </select>
 <select multiple><!--多选-->
     <option>北京</option>
     <option>上海</option>
     <option>南京</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>

26.表格表单组合实例

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

注：注意表格表单的嵌套关系

27.< div > 与 < span >

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

28.CSS语法格式

1.格式：
选择器{属性1：值1；属性2：值2}
2.单位：
px -> 像素（pixel）、% -> 百分比（相对单位，与其父容器对应）
3.基本样式：
width、height、background-color
4.CSS注释：
/* 注释内容 */
5.例子：

<head>
   <style>
       div{ width: 100px ; height: 25% ; background-color: aqua;}
       span{ background-color: aquamarine;}
       /* span{ background-color: bisque;} */
   </style>
</head>
<body>
   <div>第一个块</div>
   <div>第二个块</div>
   <span>一个内联</span>
</body>

29内联样式与内部样式

1.内联（行内、行间）样式：
在html标签上添加style属性来实现
2.内部样式：
在style标签内添加的样式
注：内部样式的优点，可以复用代码
3.以上两者的区别：
内部样式的代码可以复用，符合W3C的规范标准，尽量让结构和样式分开处理
4.示例：
内联：

<body>
    <div style=" width:100px; height:100px; background-color:aqua">第一个块</div>
    <div style=" width:100px; height:150px; background-color:aquamarine">第一个块</div>
</body>

内部：

<head>
    <style>
        div{ width: 100px; height: 100px; background-color: aqua;}
    </style>
</head>
<body>
    <div>第一个块</div>
    <div>第二个块</div>
</body>

30.外部样式及两种写法

第一种写法：
引入一个单独的css文件，name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性是资源的地址
示例：
css文件：

div{ width: 100px; height: 100px; background-color: aqua;}
第二种写法：
@import
示例：

<head>
    <style>
        @import url('./common.css')
    </style>
</head>
<body>
    <div>一个块</div>
</body>

注：这种方式存在许多问题，不建议使用
link与@import的区别

31.CSS颜色表示法

1.单词表示法：red、blue、green…
2.十六进制表示法：#000000（0 1 2 3…f）
3.RGB三原色表示法：RGB（255，255，255）；
取值范围：（0~255）
4.取色方法：FE浏览器插件，PS
5.示例：

32.CSS背景样式

1.基本属性

background-color 背景颜色
background-image 背景图片
url背景地址，默认水平垂直都铺满
background-repeat 背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat（x，y）默认x，y都进行平铺
no-repeat 都不平铺
background-position 背景位置
x y：number|单词
x：left、center、right

y：top、center、bottom
background-attachment 背景图随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed：背景位置是按照浏览器进行偏移的

示例：

<style>
    body{height: 20000px;}
    div{ width:1440px;height:800px;background-color: red;
        background-image: url(./CSDN/pic/450e9bd96dcdb0f1.jpg);
        background-repeat: no-repeat;
        background-position: 50% 50% ;
        background-attachment: fixed;
    }
</style>

33.背景实现视觉差效果

<head>
    <style>
    #div1{width: 1400px; height: 800px; background-image: url(./CSDN/pic/450e9bd96dcdb0f1.jpg);background-attachment: fixed;}
    #div2{width: 1400px; height: 800px; background-image: url(./CSDN/pic/\(YEJ_4QF_98KXB~YXP7_BUF.png);background-attachment: fixed;}
    #div3{width: 1400px; height: 800px; background-image: url(./CSDN/pic/pc0_1g05e36mr.jpg.q_70.jpg);background-attachment: fixed;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

34.CSS边框样式

border-style：边框的样式
solid：实线
dashed：虚线
dotted：点线
border-width：边框的大小
px…
border-color：边框的颜色
red #f00…
注：针对某一条边进行单独设置
border-left-style（中间是方向：left、right、top、bottom）
示例：

<style>
    div{width:300px;height:300px;border-style:solid;border-color:red;border-width: 1px;}
    div{width:300px;height:300px;
     border-right-style:dotted;border-right-width:10px;border-right-color:red;
     border-top-style:solid;border-top-width: 10px;border-top-color:green;}
</style>

35.边框实现三角形

示例：

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

注：透明颜色 transparent

36.family字体类型

font-family：字体类型英文：Arial、‘Times New Roman’ 中文：微软雅黑（‘Microsoft
YaHei’）、宋体（Simsun）

示例：

    <style>
        div{font-family: 宋体;}
    </style> </head> <body>
    <div>一段文字</div> </body> ```

衬线体与非衬线体从电脑中识别字体
注：1.设置多个字体时按顺序识别各字体，若第一种字体未识别则识别第二种，以此类推
2.若字体名中含空格则需添加引号

37.字体大小粗细样式

1.font-size：字体大小默认大小：16px
2.写法：
在这里插入图片描述
注：字体大小一般是偶数（方便文字对齐）
3.font-weight：字体粗细
模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）| number（100、200…900；100 ~ 500都是正常，600 ~ 900都是加粗）
4.font-style：字体样式
模式：正常（normal）、斜体（italic）
写法：单词（normal、italic）注：oblique也是斜体，使用较少
区别：1.italic 只有带有倾斜字体的才可以设置
2.oblique 没有倾斜属性的字体也可以设置倾斜
5.color：字体颜色

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

1.text-decoration：文本修饰（可添加多个）下划线：underline 删除线：line-through
上划线：overline 不添加任何装饰：none

text-transform：文本大小写（针对英文）小写：lowercase 大写：uppercase
只针对首字母大写：capitalize

39.文本缩进与文本对齐

text-indent：文本缩进首行缩进 em单位：相对单位，1em与字体大小相同（主要针对中文）
text-align：文本对齐方式对齐方式：center、left、right、justify（两端点对齐）

40.文本的行高

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

41.文本间距与英文折行

letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）
英文和数字强制折行（针对英文）：
word-break：break-all；（强烈）
word-wrap：break-word；（不强烈，会产生一些空白区域）

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选择器及注意事项

ID选择器 css：#elem{} html：id=“elem” 注：在一个页面中，ID值是唯一的；
命名规范：字母 _ - 数字（命名第一位不能是数字）；命名方式：驼峰式、下划线式、短线式；
驼峰写法：searchButton（小驼峰）| SearchButton（大驼峰）| searchSmallButton
短线写法：search-small-button 下划线写法：search_small_button