HTML5

最新推荐文章于 2024-09-10 11:20:27 发布

爱吃银鱼蒸蛋的麻里

最新推荐文章于 2024-09-10 11:20:27 发布

阅读量902

点赞数 3

分类专栏： HTML5 文章标签： html

本文链接：https://blog.csdn.net/so_cute_sjm/article/details/115568832

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

持续更新ing…

文章目录

HTML常用的布局标签
文本样式
css选择器
块元素以及盒模型第一部分
实现风车
弹性布局

HTML常用的布局标签

<!-- html和html5的区别：没有就是html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 配置网页信息 -->
    <meta charset="UTF-8">
    <!-- http：协议 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题 -->
    <title>仿百度</title>
</head>

<!-- 页面内容区域 -->
<body>
    <!-- 每个标签在浏览器渲染的时候都会被浏览器赋予特性 -->
    <!-- h1~h6都是标题标签  h1字号最大 -->
    <h1>hello</h1>
    <!-- 段落标签（用来展示一段文字的内容） -->
    <p>我的第一个网页，三周之后就可以完成第一个小程序了。</p>
    <!-- 直接写标签内容，回车就有尖括号 -->
    <!-- 单标签一般为属性标签 -->
    <!-- src : source、图片的来源
    alt : 当src失效时，加载alt   
    alert：提示
    加载网络资源：直接把资源图片地址粘贴过来
    本地资源：需要获取图片的绝对路径。把图片放在此文件夹中-->
    <img src="1.jpeg" alt="图片挂掉了">
    <!-- 超链接标签
    href：让a标签跳转的位置 -->
    <a href="http://www.taobao.com">淘宝网</a>
    <!-- hr:修饰线段 -->
    <hr>
    <!-- 无序列表 unorder list ： ·  -->
    <ul>
        <!-- 列表项 -->
        <li>html标签</li>
        <li>css样式</li>
        <li>javascript语法</li>
    </ul>
    <!-- 有序列表 order list -->
    <ol>
        <!-- 列表项 -->
        <li>html标签</li>
        <li>css样式</li>
        <li>javascript语法</li>
    </ol>
    <p>
        <span style="color: crimson;">中午吃什么</span>
    </p>
    <h2>
        <span style="color: darkmagenta;">晚上吃什么</span>
    </h2>
</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>文本样式</title>
    <!-- style标签用来设置元素的层叠样式表 -->
    <style>
        /* 标签名{}>>>为对应的标签来设置样式 */
        p{
            /* 样式名：样式值 */
            color: gold;
            font-size: 40px;
            font-family: "仿宋";
            /* 字体粗细 */
            font-weight: bold;
            /* 首行缩进：1em = 16px */
            text-indent: 2em;
            /* 背景颜色 */
            background-color: lightsalmon;
        }
    </style>
</head>
<body>
    <!-- <标签内style属性（行内样式）>
    color(样式名)：chocolate（样式值） -->
    <span style="color: chocolate;">该标签只是显示内容，没有任何语义</span>
    <!-- br:换行标签 -->
    <!-- span连写时，标签会在一行，不会换行，所以可以加br -->
    <br>
    <!-- 默认字体像素为16px -->
    <!-- font-size：字体的大小
    px代表的是单位（像素） -->
    <span style="font-size: 20px;">这个span的字体要比上面的字体大</span>
    <br>
    <!-- font-family：文本类型 -->
    <span style="font-family: '仿宋';">这个span的文字类型与上面两个的文字类型不同</span>
    <br>
    <span style="color: darkturquoise; font-size: 30px; font-family: '宋体';">上述三个文本样式都可以在该标签中呈现</span>
    <hr>
    <hr>
    <hr>
    <p>这个span的内容将采用style标签内的样式</p>
    <br>
    <p></p>
</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>css选择器</title>
    <style>
        span{
            font-size: 25px;
            font-weight: bold;
        }
        /* #id值：id选择器的查找 */
        /* 样式里面不能嵌套样式 */
        #red{
            color: red;
        }
        #blue{
            color: blue;
        }
        #green{
            color: green;
        }
        .test{
            color: indianred;
        }
        /* 
        常用的选择器：
        标签名选择器：选择所有的标签
        id选择器：选择对应id的元素，如果没有对应的则不生效
        class选择器：适合多个样式采用同一套样式时使用 */
    </style>
</head>
<body>
    <!-- $：读取
    span{$}*3 >>> <span>1</span><span>2</span><span>3</span> 
    id：标签的标识
    同一个文档不能出现重复的id-->
    <span id="red">1</span>
    <span id="blue">2</span>
    <span id="green">3</span>
    <hr>
    <!-- 标签名字{内容 $代表要加载几个} -->
    <p>第1个p标签</p>
    <!-- class类型选择器：多个标签要采用同一套样式 -->
    <p class="test">第2个p标签</p>
    <p class="test">第3个p标签</p>
    <p class="test">第4个p标签</p>
    <p>第5个p标签</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>块元素</title>
    <style>
        /* 样式选择器可以使用‘,’隔开 */
        html,body{
            height: 100%;
            /* 浏览器默认的margin值（外间距）是8px 0可以不加单位*/
            margin: 0;
        }
        #boxone{
            /* 可以使用百分比，也可以使用具体的px
            当宽和高都一样时，后面的heigh直接写h200;*/
            width: 200px;
            height: 200px;
            background-color: khaki;
            /*  一个值：同时为四个方向设置外间距
                两个值：第一个值代表上下，第二个值代表左右
                四个值：顺序为上右下左
                margin的左右设置成auto代表定宽居中*/
            margin: 50px auto;
            /* 背景图片 url：图片的链接地址 */
            background-image: url("2.jpg");
            /* 设置背景的尺寸 */
            background-size: 100% 100%;
            /* 设置背景是否重复，默认是repeat */
            /* background-repeat: no-repeat; */
        }
       /*  img{
            width: 100%;
            height: 100%;
        } */
        #box{
            width: 300px;
            height: 300px;
            background-color: lightgreen;
            margin: 0 auto;
            /* 边框宽度 
                border-width: 10px; */
            /* 边框样式 
                border-style:dashed; */
            /* 边框颜色 
                border-color:orange; */

            /* 
            border-left: orange 10px solid;
            border-right: springgreen 10px double;
            border-top: firebrick 10px solid;
            border-bottom: steelblue 10px double; */
            /* 边框复合属性  */
            border: firebrick 10px solid;
            /* 设置边框圆角的值，可以设置百分比，也可以设置px */
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <!-- 块元素：收纳一定量的元素标签
    块标签可以设置大小 -->
    <div id="boxone">
        <!-- <img src="2.jpg" alt="图片挂掉了"> -->
        <a href="">这是图片介绍</a>
    </div>

    <!-- #id名字 会生成对应的加id的div -->
    <div id="box">

    </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: 800px;
            height: 500px;
            /* background-color:cyan; */
            margin: 100px auto;
            /* 1.png是草地 */
            background-image: url(1.png);
            /* 背景图参照的就是自身元素的宽高 */
            background-size: 100% 100%;

            /* position：设置定位方式的
            relation：相对定位 元素可以在自身原有的位置基础上进行微调,为子元素的定位提供参照*/
            position: relative;
            /* 四个方向为：left, top, bottom, right 可以全写，也可以根据需要写部分 */
            left: 100px;
            top: 50px;
        }

        /* nth-child： 查找到当前元素所在的父元素下面的第n个子元素 */
        img:nth-child(1){
            width: 350px;
            height: 350px;
            position: absolute;
            left: 58px;
            top: 50px;
        }
        img:nth-child(2){
            width: 100px;
            height: 100px;
            position: absolute;
            left: 362px;
            top: 303px;
        }
        img:nth-child(3){
            width: 150px;
            height: 150px;
            position: absolute;
            left: 487px;
            top: 230px;
        }
        
        /* 为三个图片添加动画 */
        img{
            /* 动画名称 */
            /* animation-name: zhuan; */
            /* 动画的时间 */
            /* animation-duration: 3s; */
            /* 动画的次数 infinite：无限次*/
            /* animation-iteration-count: infinite; */
            /* 控制动画的执行速率  linear：动画从头到位的速率是相同的*/
            /* animation-timing-function: linear; */

            /* 复合属性 */
            animation: zhuan  3s linear infinite;
        }

        /*  动画模块  */
        @keyframes zhuan {
            0%{
                /* transform：变形动画属性 deg代表度数 */
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <!-- 能展示出来草地，同时处于屏幕正中间 -->
    <div>
        <!-- 2.png是风车的扇叶 -->
        <img src="2.png" alt="">
        <img src="2.png" alt="">
        <img src="2.png" alt="">
    </div>

</body>
</html>

最后的成果展示：（风车是会转的~~~）
在这里插入图片描述

弹性布局

参考博客

容器的属性

flex-direction属性

定义主轴的方向

<!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>弹性布局基础</title>
    <style>
        /* Ctrl + shift + m 开发者模式 */
        #box{
            /* display：元素展示的样式
            display: flex：打开弹性布局 */
            display: flex;
            /* 项目在主轴的排列，默认是水平的
            row:主轴为水平方向，起点在左端
            row-reverse:主轴为水平方向，起点在右端
            column: 主轴为垂直方向，起点在上沿
            column-reverse: 主轴为垂直方向，起点在下沿*/
            flex-direction: column-reverse;
        }
        section:nth-child(1){
            width:50px;
            height: 50px;
            background-color: red;
        }
        section:nth-child(2){
            width:50px;
            height: 50px;
            background-color: blue;
        }
        section:nth-child(3){
            width:50px;
            height: 50px;
            background-color: green;
        }

    </style>
</head>
<body>
    <!-- div是容器， section是项目 -->
    <div id="box">
        <!-- section是区域标签 -->
        <section>1</section>
        <section>2</section>
        <section>3</section>
    </div>
</body>
</html>

flex-warp属性、flex-flow属性

默认情况下，项目都排在一条线（又称“轴线”上）。
flex-warp属性定义，如果一条轴线排不下，如何换行

<!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>flex-warp属性</title>
    <style>
        #box {
            display: flex;
            /* wrap:换行，第一行在上面
            wrap-reverse: 换行，第一行在下面
            no-wrap: 不换行 */
            /* flex-wrap: wrap-reverse; */

            /* flex-flow:是主轴排列方向与换行属性的合并 */
            flex-flow: column-reverse wrap;

        }

        section {
            width: 200px;
            height: 150px;
            margin: 50px;
        }

        /* 2n代表偶数 */
        section:nth-child(2n) {
            background-color: hotpink;
        }

        section:nth-child(2n+1) {
            background-color: indianred;
        }
    </style>
</head>

<body>
    <div id="box">
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
        <section>6</section>
        <section>7</section>
        <section>8</section>
        <section>9</section>
        <section>10</section>
        <section>11</section>
        <section>12</section>
    </div>

</body>

</html>

justify-content属性

定义项目在主轴上的排列方式

<!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>justify-content属性</title>
    <style>
        #box{
            display: flex;
            /* flex-start: 默认值，左对齐
            flex-end:右对齐
            center:居中
            space-between:两端对齐，项目之间的间隔相等
            space-around:每个项目两侧的间隔相等
            所以，项目之间的间隔比项目与边框的间隔大一倍*/
            justify-content: flex-end;
        }
        section{
            width: 200px;
            height: 150px;
        }
        section:nth-child(2n){
            background-color: lightcoral;
        }
        section:nth-child(2n+1){
            background-color: lightseagreen;
        }
    </style>
</head>
<body>
    <div id="box">
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
        <!-- <section>6</section>
        <section>7</section>
        <section>8</section>
        <section>9</section>
        <section>10</section> -->
        <!-- <section>11</section>
        <section>12</section> -->
    </div>
</body>
</html>

align-items属性

定义项目在交叉轴上的对齐方式

<!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>
        html,body{
            height: 100%;
        }
        #box{
            display: flex;
            /* 块元素的宽度如果不设置会继承父元素的宽度
            高度会依据填充的元素的高度来设置自身的高度 */
            width: 1000px;
            height: 800px;
            border:solid 1px red;
            margin: 0 auto;

            /* 主轴对齐方式 */
            justify-content: center;
            /* 交叉轴对齐方式
            flex-end: 交叉轴的终点对齐
            flex-start: 交叉轴的起点对齐
            center：交叉轴的中点对齐
            baseline: 项目的第一行文字的基线对齐
            stretch: 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度*/
            align-items: center;
        }

        /* 表示box下面的section标签 */
        #box section{
            width: 200px;
            height: 200px;
            background-color: magenta;
            border-radius: 50%;
            /* 文本对齐方式 */
            text-align: center;
            font-size: 50px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="box">
        <section>1</section>
    </div>
</body>
</html>

align-content属性

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

<!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>
        #box{
            display: flex;
            height: 1000px;
            /* flex-start：与交叉轴的起点对齐。
            flex-end：与交叉轴的终点对齐。
            center：与交叉轴的中点对齐。
            space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
            space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
            stretch（默认值）：轴线占满整个交叉轴。*/
            align-content: space-between;
            flex-wrap: wrap;
        }
        section{
            width: 200px;
            height: 150px;
        }
        section:nth-child(2n){
            background-color: lightcoral;
        }
        section:nth-child(2n+1){
            background-color: lightseagreen;
        }
    </style>
</head>
<body>
    <div id="box">
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
        <section>6</section>
        <section>7</section>
        <section>8</section>
        <section>9</section>
        <section>10</section>
    </div>
</body>
</html>

项目的属性

order属性、flex-basis属性、flex-grow属性、flex-shrink属性、flex属性

order:排序，值越大越靠后
flex-grow:容器有富裕空间时，单一项目放大的比例。
flex-shrink:与grow相反。
flex-basis:项目在主轴上的尺寸
flex:2~~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>
        #box{
            display: flex;
            width: 1000px;
            height: 800px;
            border: solid 2px black;
            margin: 0 auto;
        }
        section{
            /* flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
            浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
            它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。 */
            /* 验证flex-grow属性时flex-basis可以写200px
            验证flex-shrink属性时flex-basis可以写500px */
            flex-basis: 200px;
            height: 200px;
            background-color: brown;
            color: white;
            text-align: center;
            font-size: 50px;
            /* 行高，字体所占空间垂直的高度 */
            line-height: 300px;
            /* margin: 20px 20px; */
        }
        /* 将section按照3 2 1排列*/
        section:nth-child(1){
            /* 属性定义项目的排列顺序
            数值越小，排列越靠前，默认为0 */
            order: 3;

            /* flex-grow属性定义项目的放大比例，容器有多余空间时项目所占的配比
            默认为0，即如果存在剩余空间，也不放大 */
            /* flex-grow: 1; */

            /* flex-shrink属性定义项目的缩小比例
            默认为1，即如果空间不足，该项目缩小 */
            /* flex-shrink: 0; */

            /* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
            flex: 0 1 250px;
            background-color:aquamarine;
        }
        section:nth-child(2){
            order: 2;
            /* flex-grow: 2; */
            /* flex-shrink: 1; */
            background-color: pink;
        }
        section:nth-child(3){
            order: 1;
            /* flex-grow: 2; */
            /* flex-shrink: 1; */
            background-color:cornflowerblue;
        }
        
    </style>
</head>
<body>
    <div id="box">
        <section>1</section>
        <section>2</section>
        <section>3</section>
    </div>
</body>
</html>

align-self属性

单个项目有与其他项目不一样的对齐方式。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

<!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>align-self属性</title>
    <style>
        #box{
            display: flex;
            height: 800px;
        }
        section:nth-child(1){
            background-color: darksalmon;
            flex-basis: 200px;
            height: 300px;
        }
        section:nth-child(2){
            background-color:darkseagreen;
            flex-basis: 100px;
            height: 200px;
        }
        section:nth-child(3){
            background-color:darkturquoise;
            flex-basis: 250px;
            height: 200px;
            /* 单一项目在主轴的对齐方式 */
            align-self: flex-end;
        }
        section:nth-child(4){
            background-color:fuchsia;
            flex-basis: 150px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="box">
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
    </div>
</body>
</html>

爱吃银鱼蒸蛋的麻里

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
HTML5

持续更新ing…文章目录一. 基础语法二. 文本样式一. 基础语法<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compati
复制链接

扫一扫

专栏目录