关于前端的一些简单学习

最新推荐文章于 2024-06-14 11:01:38 发布

不会编码啊

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量31

点赞数 1

文章标签：前端学习

本文链接：https://blog.csdn.net/qq_74047465/article/details/132493099

版权

HTML

标签

html的编码其实就是一个DOCTYPE（文件），在这基础之上会增加一些标签主要就是<head>,<body>,<Script>-这个标签是js脚本引入的标签还设计到很多很多其他的标签例如form表单标签，table表格标签，ur无序列表，li有序列表，除此之外标签里也可以添加一些属性，例如class，id，value，输入框等input type之类的，和标签中间的text（文本）等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初学测试</title>
</head>
<table width="100%" border="2">
    <caption>成员表</caption>
    <thead>
    <tr>
        <th rowspan="2" colspan="1">组号</th>
        <th rowspan="2" colspan="1">姓名</th>
        <th rowspan="1" colspan="2">成绩</th>

    </tr>
    <tr>
        <th>唱</th>
        <th>跳</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="3" colspan="1">第一组</td>
        <td rowspan="1" colspan="1">梅狸猫</td>
        <td rowspan="1" colspan="1">80</td>
        <td rowspan="1" colspan="1">87</td>
    </tr>
    <tr>

        <td rowspan="1" colspan="1">真虾头</td>
        <td rowspan="1" colspan="1">88</td>
        <td rowspan="1" colspan="1">90</td>
    </tr>
    <tr>

        <td rowspan="1" colspan="1">贞德式妮鸭</td>
        <td rowspan="1" colspan="1">70</td>
        <td rowspan="1" colspan="1">77</td>
    </tr>
    </tbody>
</table>
<!--ul=Unordered List-无序列表-->
<ul>
    <li>更大</li>
    <li>更快</li>
    <li>更强</li>
</ul>

<!--ol=Ordered List-有序列表-->
<div style="height: 1000px"></div>
<ol type="a" id="ol">
    <li>更大</li>
    <li>更快</li>
    <li>更强</li>
</ol>


<body>
<h1>6</h1>
<h2>66</h2>
<h3>666</h3>
<h4>6666</h4>

</body>
</html>

CSS

css是html的段落布局操作，由于html本身的格式设置达不到很精美，符合我们的要求，所以我们创建了css来对其进行格式调整，一般的css布局都是同过在<head>标签里设置<style>来对网页的格式设计，而主要使用的是两种布局flex和gird

*css的布局都是通过display函数来实现的*

display: block; /*以块级元素的方式显示*/
display: inline-block; /*在一行中以块级元素的方式显示*/
display: inline; /*在一行中显示*/
display: flex; /*以flex的方式进行呈现，此时的呈现已经规定了子元素的摆放方式*/
display: grid; /*以网格的方式进行呈现，此时的呈现已经规定了子元素的摆放方式*/

flex布局

flex-direction: 布局的方向

flex-grow: 增长的比例

flex-shrink: 收缩的比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HighLight</title>
    <style>
        /*html,body{*/
        /*    font-size:100px;*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    margin: 0;*/
        /*    display: flex;*/
        /*    flex-direction: row;*/
        /*}*/
        html,body{
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            margin: 0;
        }
        div{
            font-family: 楷体;
            font-size: 100px;
            width: 100%;
            text-align: center;
            background-color: #6363d4;
            color: white;
        }
        .a{
            font-family: 隶书;
            font-size: 70px;
            width: 100px;
            height: 100%;
            background-color: aqua;
        }
        .b{
            display: flex;
            flex-grow: 1.5;
            flex-shrink: 0.8;
        }
        main{
            flex-grow: 1.5;
            flex-shrink: 0.8;
            display: flex;
            flex-direction:row;
        }
        section{
            flex-shrink: 0.8;
            flex-grow: 1.5;
            display: flex;
            flex-direction: column;
        }
        nav,footer{
            width: 100%;
            font-size: 50px;
            font-family: 宋体;
            background-color: #dddddd;
            height: 80px;
            margin: 0;
        }
        article{
            flex-grow: 1.5;
            flex-shrink: 0.8;
            font-size: 50px;
            font-family: 宋体;
            background-color: darkkhaki;
        }
    </style>
</head>
<body>
<!--<div>左</div>-->
<!--<div>右</div>-->
    <div id="01">精彩集锦</div>
    <main>
        <aside class = "a">侧边栏窗格</aside>
        <section class="b">
            <nav>导航窗格</nav>
            <article>主要内容-display布局</article>
            <footer>版权信息</footer>
        </section>
    </main>

</body>
</html>

grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LEGENDSPOOL</title>
    <style>
        html{
            width: 100%;
            height: 100%;
            margin: 0;
        }
        body{
            display: grid;
            grid-template-columns:100% ;
            grid-template-rows:10% 90%;
        }
        header {
            font-family: 楷体;
            font-size: 100px;
            text-align: center;
            background-color: #1cb59a;
            color: aqua;
        }
        main{
            display: grid;
            /*height: calc(100% - 150px);*/
            grid-template-columns: 7% 93%;
            grid-template-rows: 100%;
            /*grid-template-columns: ;*/
        }
        aside{
            background-color: darkkhaki;
            font-size: 80px;
            font-family: 隶书;
            height: 200%;
        }
    </style>
</head>
<body>
<a>
    <header>传奇球员</header>
    <main>
        <aside>导航窗格</aside>
        <section>
            <li>
                巴萨罗纳
                <ul>梅西</ul>
                <ul>内马尔</ul>
                <ul>苏亚雷斯</ul>
                <ul>伊涅斯塔</ul>
                <ul>哈维</ul>
            </li>
            <li>
                皇家马得里
                <ul>C罗</ul>
                <ul>加雷斯贝尔</ul>
                <ul>本泽马</ul>
            </li>
            <li>
                AC米兰
                <ul>伊布</ul>
                <ul>贝克汉姆</ul>
                <ul>内斯塔</ul>
                <ul>巴乔</ul>
            </li>
        </section>
    </main>
</a>
</body>
</html>

除此之外，css中还有一个选择器思想定位元素，#id-id选择器 .class-类选择器标签名-标签选择器