HTML初学第二周

最新推荐文章于 2024-08-14 12:55:09 发布
最新推荐文章于 2024-08-14 12:55:09 发布
阅读量1.3k 收藏 1
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73331433/article/details/127378281
版权

二十一、 嵌套列表

列表之间可以互相嵌套形成多层级列表。
嵌套列表小案例：
（有序与无序）

代码：

<!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>
    <ul>
        <li>
            辽宁省
        </ul>
             <li>沈阳</li>
             <li>大连</li>
             <li>丹东</li>
         </ul>
    </li>
    <li>
        山东省
        <ul>
            <li>济南</li>
            <li>青岛</li>
            <li>烟台</li>
        </ul>
    </li>
           
</body>
</html>

代码：

<!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>
    <h1>好美味小吃</h1>
    <p>
        <ul>
    <li>
        小吃类
        <ul>
            <li>煮粉干</li>
            <li>拌青菜</li>
            <li>蛋炒饭</li>
            <li>煎蛋</li>
            <li>米饭</li>
        </ul>
    </li>
    <li>
        卤味类
        <ul>
            <li>鸭肠</li>
            <li>面筋</li>
            <li>牛肚</li>
            <li>猪耳朵</li>
            <li>猪头肉</li>
            <li>大肠</li>
            <li>鱿鱼</li>
        </ul>
    </li>
    <li>
        套餐类
        <ul>
            <li>卤面筋饭</li>
            <li>猪肉肉饭</li>
            <li>猪耳朵饭</li>
            <li>卤猪脚饭</li>
            <li>卤猪舌头饭</li>
        </ul>
        <li>
            炖罐类
            <ul>
                <li>猪蹄黄豆</li>
                <li>猪肚莲子</li>
                <li>猪心枸杞</li>
                <li>羊肉枸杞</li>
                <li>牛肉枸杞</li>
         </ul>
    </p>
<p>亲，20元以上可送套餐哦！！</p>
</body>
</html>

（定义列表嵌套）
代码：

<!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>
    <dl>
        <dt>中国</dt>
        <dd>
            <dl>
                <dt>辽宁省</dt>
                <dd>沈阳</dd>
                <dd>大连</dd>
                <dd>丹东</dd>  
            </dl>
            <dl>
                <dt>山东省</dt>
                <dd>济南</dd>
                <dd>青岛</dd>
                <dd>烟台</dd>
            </dl>
        </dd>
        <dl>美国</dl>
        <dd>洛杉矶</dd>
        <dd>纽约</dd>

</body>
</html>

二十二、表格标签

在HTML当中，提供了和 Excel表格很类似的功能——表格
<table>:表格的最外层容器
<tr>:定义列表格行
<th>:定义列表格头
<td>:定义列表格单元
<caption>:定义表格标题
语义化标签：<tHead>、<tBody>、<tFood>
语义化标签的意义：他们只是代表语义化，并不会对网页造成一些效果、影响，它只是使得表格更加符合HTML规范。

注：1.之前是有嵌套关系的，要符合嵌套规范。
2.在一个table中，<tBody>是可以出现多次的，但是<tHead>、<tFood>只能出现一次

代码示例：

<!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>
    <table>
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2022年10月20日</td>
                <td><img src="./img/tianqi_1.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td><img src="./img/tianqi_2.png" alt=""></td>
                <td>有小雨，出门请带伞</td>
            </tr>
        </tBody>
    </table>
</body>
</html>

二十三、表格属性

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

代码：

<!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>
    <table>
        <caption>天气预报</caption>
        <tHead>
            <tr align="right">
                <th colspan="2">日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr valign="middle">
                <td rowspan="2">2022年10月20日</td>
                <td>白天</td>
                <td><img src="./img/tianqi_1.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <tr valign="middle">
                    <td rowspan="2">2022年10月20日</td>
                <td>夜晚</td>
                <td><img src="./img/tianqi_2.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
        </tr>
        <tr valign="middle">
            <td rowspan="2">2022年10月21日</td>
            <td>白天</td>
            <td><img src="./img/tianqi_1.png" alt=""></td>
            <td>天气晴朗，适合出行</td>
        </tr>
        <tr valign="middle"></tr>
            <td rowspan="2">2022年10月21日</td>
                <td>夜晚</td>
                <td><img src="./img/tianqi_2.png" alt=""></td>
                <td>有小雨，出门请带伞</td>
        </tr>  
        </tBody>
    </table>
</body>
</html>

二十四、表单标签（1）

**<form>:**表单的最外层容器
<input>:标签用于搜集用户信息，根据不同的 type 属性值，展示不同的控件，如输入框、密码框、复选框等。
<input>（单标签 ）标签有一个 type 属性，决定是什么控件。
注意：表格和表单的不同之处在于，表格需要严格符合嵌套规范的，表单是不需要的，没有严格的嵌套规范。
在这里插入图片描述
密码框、输入框、复选框、单选框（要加上name属性）、上传文件、提交按钮、重置按钮：

代码：

<!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>
        <h2>输入框：</h2>
        <input type="text">
        <h2>密码框：</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
    </form>
</body>
</html>

代码：

<!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="http://www.baidu.com">
        <h2>输入框：</h2>
        <input type="text">
        <h2>密码框：</h2>
        <input type="password">
        <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="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

代码：

<!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="http://www.baidu.com">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>
        <input type="password" placeholder="请输入密码">
        <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">
    </form>
</body>
</html>

二十五、表单标签（2）

<textarea>:多行文本框
<select>、<option>:下拉菜单
<label> : 辅助表单
还有一些常见的属性：checked、disabled、name、for……
ctrl （+ 鼠标左键）：多选

代码：

<!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>
    <h2>多行文本框</h2>
    <textarea cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select>
        <option selected disabled>请选择</option>
        <option>北京</option>
        <option>上海</option>
        <option>杭州</option>
    </select>
</body>
</html>

代码：

<!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>
    <h2>多行文本框</h2>
    <textarea cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select>
        <option selected disabled>请选择</option>
        <option>北京</option>
        <option>上海</option>
        <option>杭州</option>
    </select>
    <select dize="3">
        <option>北京</option>
        <option>上海</option>
        <option>杭州</option>
    </select>
    <select multiple>
        <option>北京</option>
        <option>上海</option>
        <option>杭州</option>
    </select>
    <input type="file"multiple>
    </form>
</body>
</html>

代码：

<!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>
    <h2>多行文本框</h2>
    <textarea cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select>
        <option selected disabled>请选择</option>
        <option>北京</option>
        <option>上海</option>
        <option>杭州</option>
    </select>
    <select dize="3">
        <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>

     </form>
</body>
</html>

二十六、表格表单组合

表格表单之间可以组合形成数据展示效果
练习：组合表格表单小案例：（表格有嵌套规范，表单没有嵌套规范）

代码：

<!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>
        <table>
            <tBody>
                <tr>
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr>
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr> 
            </tBody>
        </table>
    </form>
</body>
</html>

二十七、<div>与<span>

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

<!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>
    <div>
        <h2><a href="#">最先做导航页的是<span>htmls</span>扒一扒中国网址导航的发展史</a></h2>
        <a href="#"><img src="https://www.baidu.com/link?url=rKJiKVZZpdNq3nn4UNs8DGbp1KaEpctd29X1-B6YQ19-UBppA287yW4Qi8LbNaumjQ321AyvO1PpBpjMdmR0tK&wd=&eqid=d9c54024002533d100000004635519ef" alt=""></a>
        <p>网址导航的诞生:1999年，网络在中国逐渐普及，当时中文网站不仅内容不够丰富，数量也较少，而且复杂的英文域名很难记忆，
            对于那时候连打字都困难的网民来说，在网上找资料的确不是件易事。此时，第一代网址导航应运而生，仅仅是以网站收录归类为主，便获得了广大网民的青睐，国内比较早的是李兴平创建的hao123导航和后来蔡文胜创建的265导航，而后分别被百度和谷歌两家巨头纳入旗下。</p>
        <a href="#">https://www.niaogebiji.com/article-5082-1.html</a>
    </div>
</body>
</html>

代码：

<!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>
    <div style="border:1px red solid;">
        <h2><a href="#">最先做导航页的是<span>htmls</span>扒一扒中国网址导航的发展史</a></h2>
        <a href="#"><img src="https://www.baidu.com/link?url=rKJiKVZZpdNq3nn4UNs8DGbp1KaEpctd29X1-B6YQ19-UBppA287yW4Qi8LbNaumjQ321AyvO1PpBpjMdmR0tK&wd=&eqid=d9c54024002533d100000004635519ef" alt=""></a>
        <p>网址导航的诞生:1999年，网络在中国逐渐普及，当时中文网站不仅内容不够丰富，数量也较少，而且复杂的英文域名很难记忆，
            对于那时候连打字都困难的网民来说，在网上找资料的确不是件易事。此时，第一代网址导航应运而生，仅仅是以网站收录归类为主，便获得了广大网民的青睐，国内比较早的是李兴平创建的hao123导航和后来蔡文胜创建的265导航，而后分别被百度和谷歌两家巨头纳入旗下。</p>
        <a href="#">https://www.niaogebiji.com/article-5082-1.html</a>
    </div>
</body>
</html>

二十八、CSS基础语法

**格式（基本）：**选择器{属性1：值1；属性2：值2}
**单位：**px→像素（pixel）、% →百分比
**基本样式：**width、height、background-color
style标签含义 ：给页面添加样式
px：是一个长度单位，在计算机中表示像素
（屏幕的分辨率：横向的像素*纵向的像素）
百分比：% 例：外容器→600px 当前容器50%→300px
CSS注释：/ CSS注释的内容 /
两种注释方法 : shift+alt+a ctrl+/
代码：

<!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>
        div{width :100px;height :100px;background-color:red}
        span{background-color: blue;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div>又是一个块</div>
    <span>这是一个内联</span>
</body>
</html>

二十九、内联样式和内部样式

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

<!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>
        div{width:100px;height:100px;background-color: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div>另外一个块</div>
</body>
</html>

三十、外部样式

引入一个单独的CSS文件 ，name、css
<link> 标签：是当前页面和一个外部资源的映射关系，引入关系
<link> 属性→rel：表示引入资源类型，可以通过rel来指定
<link> 属性→href : 表示引入外部资源的地址
（无论我们写内部样式还是外部样式，要注意这个是可以忽略空格的，或者是折行去写，这个都是可以的）
@import : 引入外部样式(注：这种方式有很多问题，不建议使用)
<link> 属性→rel的属性值：在这里插入图片描述
该图片转载自：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="./common.css">
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

第二种：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <link rel="stylesheet" href="./common.css"> -->
    <title>Document</title>
    <style>
    @import url('./common.css')
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

三十一、CSS中的颜色表示法

单词表示法：red、yellow、blue、green……
十六进制表示法：（0 1 2 3 4 5 6 7 8 9 a b c d e f）
#000000 : 十六进制表示法中的最小值
#ffffff：十六进制表示法中的最大值
（#000000：黑色 #ffffff:白色 #ffoooo:红色）
RGB（红绿蓝）三原色表示法：rgb (255,255,255) ; 取值范围：0~255

颜色图表：
在这里插入图片描述
在这里插入图片描述
获取颜色的工具：
提取颜色的下载地址：提取颜色的下载地址：
photoshop工具
练习：创建一个100100红色的方块，一个200150蓝色的方块。
代码：

<!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>
    #div1{width:100px;height:100px;background-color: red;}
    #div2{width:200px;height:150px;background-color: blue;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

三十二、CSS背景样式

1.background-color：背景颜色
2.background-image：背景图片→url（背景地址） （虽然添加的是一张，但是它会把这个整个容器填满 → 默认的形式：会水平垂直都铺满背景图）
背景图和img图片标签的区别：
图片标签：主要是用于展示类的（在文章当中，在广告当中经常用于展示图片的）
背景图：主要是在网站当中做装饰性的图片（做一个小的图标，做一个背景的修饰）
3.background-repeat：背景图片的平铺方式
repeat-x
repeat-y
repeat（x , y 都进行平铺，默认值）
no-repeat 都不平铺
4.background-position：背景图片的位置
x y ：1.number：设置一个正数：向右和向下设置
设置一个负数：向左和向上设置
2.单词：x : left、center、right
y : top、center、bottom
3.像素，百分比（px、%）
5.background-attachment：背景图随滚动条的移动方式（滚动条：给body加上一个高度）
可选值：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{height :2000px;}
        div{width:1440px;height:800px;background-color: red;
        background-image: url(./img/dog.jpg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-attachment: fixed;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三十三、CSS背景样式

利用滚动条移动方式实现视觉差网页
代码：

<!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>
    #div1{width:1400px;height:800px;background-image:url(./1.index.html); }
    #div2{width:1400px;height:800px;background-image:url(./2.index.html); }
    #div3{width:1400px;height:800px;background-image:url(./3.index.html); }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

三十四、CSS边框样式

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

<!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>
        div{width:300px;height:300px;border-style: solid;border-color: red;border-width: 1px;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

代码：

<!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>
        /* div{width:300px;height:300px;border-style: solid;border-color: red;border-width: 1px;} */
        div{width:300px;height:300px;border-style: dashed;border-color: red;border-width: 1px;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

代码：

<!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>
        /* div{width:300px;height:300px;border-style: solid;border-color: red;border-width: 1px;} */
        /* div{width:300px;height:300px;border-style: dashed;border-color: red;border-width: 1px;} */
        div{width:300px;height:300px;border-right: dotted;border-right-width:10px ;
            border-right-color: green;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三十五、CSS边框样式

练习:利用边框实现三角形
颜色：透明颜色 transparent
代码：

<!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>
    div{ width:0px;height:0px;
        border-top-color:white ;
        border-top-style: solid;
        border-top-width:30px ;
        border-right-color:red ;
        border-right-style:solid ;
        border-right-width: 30px;
        border-bottom-color:white ;
        border-bottom-style: solid;
        border-bottom-width:30px ;
        border-left-color: white;
        border-left-style:solid;
        border-left-width:30px ;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

代码：

<!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{background-color: green;}
    div{ width:0px;height:0px;
        border-top-color:white ;
        border-top-style: solid;
        border-top-width:30px ;
        border-right-color:red ;
        border-right-style:solid ;
        border-right-width: 30px;
        border-bottom-color:white ;
        border-bottom-style: solid;
        border-bottom-width:30px ;
        border-left-color: white;
        border-left-style:solid;
        border-left-width:30px ;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三十六、CSS文字样式

front-family ：字体样式

英文字体：Arial, ‘Times New Roman’
中文字体：微软雅黑，宋体
默认样式：微软雅黑
中文字体的英文名称：
微软雅黑：‘Microsoft YaHei’
宋体：SimSun
衬线体与非衬线体：（区别：衬线体：有棱角，非衬线体：比较平滑，扁平化设计，比较简练、简单、直观）
宋体：衬线体，微软雅黑：非衬线体
在这里插入图片描述
注意事项：
1.设置多字体方式（一般通过逗号隔开，原因：字体在网页当中识不识别是根据我们电脑里的字体是否存在决定的，有先后识别的字体顺序，如果都没有，那么它会按照电脑上的默认字体来进行）
演示：控制面板→类别→大图标→字体
2.引号的问题（有空格，引号引起来将他认为是一个整体）
代码：

<!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>
    div{font-family:'Times New Roman';}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is a text</div>
    <p>this is a text</p>
</body>
</html>

代码：

<!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>
    /* div{font-family:'Times New Roman';} */
    div{font-family:华文彩云，'Times New Roman'，SimSun,微软雅黑;}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is a text</div>
    <p>this is a text</p>
</body>
</html>

三十七、CSS文字样式

front-size：字体大小

默认大小：16px
写法：（单词表示法不建议使用）
注：字体大小一般为偶数
在这里插入图片描述
代码：

<!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>
    /* div{font-family:'Times New Roman';} */
    /* div{font-family:华文彩云，'Times New Roman'，SimSun,微软雅黑;} */
    div{font-size: 30px;}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is a text</div>
    <p>this is a text</p>
</body>
</html>

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：字体颜色

三十八、CSS段落样式

段落样式和字体很类似，他们都是针对文字的，只不过段落样式是针对多段文字这样比较大的篇幅的文字展开的

text-decotation：文本装饰

下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
注：添加多个文本修饰 : 空格隔开 underline line-through overline
代码：

<!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{width:300px;text-decoration: line-through underline overline;}
    </style>
</head>
<body>
    <p>新中国的成立开辟了中国历史新纪元。</p>
</body>
</html>

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

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

<!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{width:300px;text-decoration: line-through underline overline;} */
        p{text-transform: captalize;}
    </style>
</head>
<body>
    <p>新中国的成立开辟了中国历史新纪元。</p>
    <p>You are very good.I am very happy.What is happened to you ?</p>
</body>
</html>

三十九、CSS段落样式

text-indent：文本缩进

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

<!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{width:300px;text-decoration: line-through underline overline;} */
        /* p{text-transform: captalize;} */
        p{text-indent: 36px; font-size: 18px;}
    </style>
</head>
<body>
    <p>新中国的成立开辟了中国历史新纪元。</p>
    <!-- <p>You are very good.I am very happy.What is happened to you ?</p> -->
</body>
</html>

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{width:300px;text-decoration: line-through underline overline;} */
        /* p{text-transform: captalize;} */
        /* p{text-indent: 36px; font-size: 18px;} */
        p{text-align: justify;}
    </style>
</head>
<body>
    <p>新中国的成立开辟了中国历史新纪元。</p>
    <p>you are very good.i am very happy.what is happened to you ?</p>
</body>
</html>

四十、CSS段落样式

line-height：定义行高

1.定义：行高：一行文字的高度，由三部分组成：上边距、字体大小、下边距
（在一段文字当中，每一行的上边距、下边距、上下边距都是等价的关系）
2.行高默认值：不是一个固定值，而是变化的。根据当前字体的大小在不断的变化。
3.取值：number(px)、scale（比例值，跟文字大小成比例 1→16px）
在这里插入图片描述
代码：

<!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{width:300px;text-decoration: line-through underline overline;} */
        /* p{text-transform: captalize;} */
        /* p{text-indent: 36px; font-size: 18px;} */
        /* p{text-align: justify;} */
        p{line-height: 4;}
    </style>
</head>
<body>
    <p>新中国的成立开辟了中国历史新纪元。</p>
    <p>you are very good.i am very happy.what is happened to you ?</p>
</body>
</html>

四十一、CSS段落样式

letter-spacing:字之间的间距

word-spacing：词之间的间距（针对英文段落的）

强烈折行：（针对英文）

英文和数字不自动折行的问题：
1.word-break：break-all;（非常强烈的折行）
2.word-wrap:break-word;（不是那么强烈的折行，会产生一些空白区域）
练习：完善个人简介
代码：

<!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{width:300px;text-decoration: line-through underline overline;} */
        /* p{text-transform: captalize;} */
        /* p{text-indent: 36px; font-size: 18px;} */
        /* p{text-align: justify;} */
        /* p{line-height: 4;} */
        div{width:300px;height:300px;border:1px solid red;word-wrap: break-word;}
    </style>
</head>
<body>
    <p>新中国的成立开辟了中国历史新纪元。</p>
    <p>you are very good i am very happywhat is happened to you dfg ert ghj jkl hjkl
        hjjkljknjklnjknjnjklnjkn jkljkldgjskdflg uiorien jljkgkldfs kllkfn jflkjks kfdkldfj jklsd jmdflk gir klklng kf </p>
    <p>you are very good i am very happywhat is happened to you dfg ert ghj jkl hjkl
         hjjkljknjklnjknjnjklnjkn jkljkldgjskdflg uiorien jljkgkldfs kllkfn jflkjks kfdkldfj jklsd jmdflk gir klklng kf </p>
</body>
</html>

四十二、个人简介的练习

代码：

<!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>
        div{width:800px;}
        h1{text-align: center;color:#ff6600;}
        h2{color:#00a0ff;text-indent: 2em;}
        #p{font-style: italic;font-weight: bold;text-indent: 2em;}
        #p{color:#66ff00;line-height: 30px;text-indent: 2em;}

    </style>
</head>
<body>
    <div>
        <h1>关晓彤简介</h1>
    </div>
    <h2>基本信息</h2>
    <p id="p1">关晓彤，1997年9月17日出生于北京市，中国内地影视女演员、歌手</p>
    <p id="p2">2008年，因在年代爱情剧《幸福还有多远》中饰演大丫而崭露头角。
        2014年，凭借时尚情感剧《一仆二主》获国剧盛典观众喜爱的新人女演员奖。2015年，发行个人音乐专辑《十八》。</p>
</body>
</html>```

四十三、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合样式的写法：是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border……
但是，font 是字体的复合样式，需要关心顺序
1.background：red url () repeat 0 0;
2.border：1px red solid;
3.font :
注：最少要有两个值 size family（先写字体大小再写字体类型）
weight style size family
style weight size family
weight style size/line-height family
注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，这样样式才不会被覆盖掉。
代码：

<!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>
        div{width:300px;height:300px;
        background:red url(./img/dog.jpg)no-repeat center center;
    border-right:dashed 2px blue;
     font:bold italic 30px/100px 宋体；
    }
    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

代码：

<!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>
        div{width:300px;height:300px;
        background:red url(./img/dog.jpg)no-repeat center center;
        background-color: red;
    border-right:dashed 2px blue;
     font:bold italic 30px/100px 宋体；
    }
    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

CSS选择器

ID选择器
css : #elem{}
html : id=“elem”
注：
1.ID是唯一值，在一个页面中，
2.命名规范：由字母、下划线、中划线、字母（并且第一个不能是数字)
3.驼峰写法：searchButton（小驼峰）searchButton（大驼峰）searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button

部分CSS命名规则：
在这里插入图片描述
在这里插入图片描述
代码：

<!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>
        #div1{background: red;}
        #div2{background: blue;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这是又一个块</div>
    <div id="xiaoming1"></div>
    <div id="xiaoming2"></div>
    <div id="searchButton"></div>
</body>
</html>

四十五、CSS选择器

CLASS选择器（可以重复利用）
css : #.elem{}
html : class=“elem”
注：
1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
4.标签+类的写法
代码：

<!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.box{background: red;}
    </style>
</head>
<body>
  <div class="box">这是一个块</div>
  <div class="box">这又是一个块</div>
  <p class="box">这是一个段落</p>
</body>
</html>
ddj-sun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
第一周学习周记——初学HTML，制作个人介绍网站
jix_Hu的博客
03-10 513
第一周学习周记前言一、HTML简介二、个人介绍网站总结 前言 在第一周《信息管理创新实践》课程中，我初步认识了HTML（Hypertext Markup Language），为超文本标记语言，不同于Java编程语言，是用来描述网站的一种语言。 一、HTML简介 HTML（Hypertext Markup Language），为超文本标记语言，不同于Java编程语言，是用来描述网站的一种语言。HTML使用标记标签来描述网页，其文档包含了HTML标签及文本内容，也叫做web页面。HTML文档的后缀名：.ht
第2周：第2周课程
02-14
在“第2周：第2周课程”这个主题下，我们主要聚焦于HTML（HyperText Markup Language）的学习。HTML是互联网上应用最广泛的语言，用于创建和设计网页。它是构成网页内容的基础，允许我们将文本、图像、视频等各种...
HTML初学第一周
羽墨的博客
10-28 4446
HTML初学第一周
初学html5第二周
qq_48939026的博客
11-25 212
初学html5第二周
HTML初学第一周（10-22）
yz20221022的博客
10-22 121
HTML学习小结
初学机器学习第一周
hht113353407267的博客
03-31 738
本周主要学习了机器学习的理论基础和几种解决有监督学习的几中算法和案例。 一、理论基础： 欠拟合、过拟合、成本函数、模型的准确性、学习曲线、算法模型的优化、查准率和召回率。 1、欠拟合也称高偏差，过拟合也称高方差。 欠拟合的特点：模型对训练数据集的准确性比较低，其成本函数较高，对验证集的准确性也比较低，验证集的成本函数比较高。 过拟合的特点：模型对训练集的准确性比较高，训练集的成本函数较低...
第八周 JavaScript初学
qq_36807080的博客
05-14 220
JavaScript 1.基于浏览器 2.基于对象 面向对象的三个基本特征是：封装、继承、多态。 详情可看http://www.nowamagic.net/librarys/veda/detail/1835 一。作用 1.表单验证，减轻服务端的压力 2.添加页面动画效果 3.动态更改页面内容 4.ajax网络请求 异步加载数据，实现无跳转页面刷新，页面局部更
JavaScript初学者学习情况第一周
waibiwaibiqyh的博客
08-21 274
初学者，刚系统化学习了一遍HTML和Css样式，初入JS的第一周，系统化学习
第一周2.27 Java小白 课程初学引入
2302_81787841的博客
02-27 374
Java历史 语言特点 运行机制 初学引入
初学HTML、CSS
yusheng_xiao的博客
10-19 1148
初学HTML
Cayde-6:大学初学者课程IV2第1周项目
05-29
在“Cayde-6:大学初学者课程IV2第1周项目”中，我们可以深入探索HTML（HyperText Markup Language）这一重要的Web开发基础。HTML是构建网页内容和结构的标准语言，它允许开发者通过标记来定义文本、图像、链接等各种...
coursera吴恩达deep-learning-ai 课程2第2周程序(html)
01-08
在本资源中，我们关注的是Coursera平台上吴恩达教授的深度学习专项课程的第二门课的第二周内容，具体涉及的是一个HTML程序。吴恩达是机器学习和人工智能领域的知名专家，他的课程深入浅出，适合各种背景的学习者。在...
coursera吴恩达deep-learning-ai 课程2第3周程序(html)
01-08
在这个课程的第二部分第三周，我们将会深入探讨神经网络的精髓，为后续的深度学习实践打下坚实的基础。 在这一周的学习中，我们主要关注以下几个核心知识点： 1. **神经网络基础**：首先，我们会复习神经网络的...
第二周测试题及答案 基础知识题
08-02
第2题中，一个盒子的宽度不仅包括宽度本身，还包括左右边框和内填充，所以总宽度是宽度（100px）加上左右边框（5px*2）加上左右内填充（10px*2），即130px。答案是A。 背景的显示优先级中，背景图片会覆盖背景颜色...
html--前端
m0_60274660的博客
08-07 407
只有body中的标签的内容才会输出到中断；如果要看script标签中的javascript代码的输出，需要按F12,点击Console查看。
HTML - 简易版打字练习
Lushengshi的博客
08-09 776
纯html实现打字软件练习效果
“从零开始的HTML 表格”——WEB开发系列09
最新发布
一条晒干的咸鱼的博客
08-14 918
HTML 表格是一种用于在网页上组织和显示信息的结构性元素，它能够将数据以行和列的形式呈现，帮助用户更清晰地理解数据关系。表格在展示统计数据、产品列表、日程安排等方面非常实用。
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 628
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ddj-sun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值