Python之路——前端基础(html&css)

最新推荐文章于 2021-06-18 12:47:22 发布

newbo_yb

最新推荐文章于 2021-06-18 12:47:22 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： HTML CSS

本文链接：https://blog.youkuaiyun.com/newbo_yb/article/details/83281198

学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍HTML的基本标签使用，包括块级和行内标签，表单元素，以及超链接的运用。同时，深入探讨CSS基本样式，如选择器类型，样式优先级，布局属性等，帮助读者快速掌握前端网页设计的基础知识。

一、HTML基本标签

标签分类：块级标签和行内标签；自闭合标签和非自闭合标签；等等。

基础标签：

head：meta,title,link,type,script

body：h, p, br, div, span, a, form, input, lable, textarea, select, option, ul, ol, dl, li, dt, table, thead, tbody, tr, th, td, fieldset, legend,

<!DOCTYPE html>   <!-- 不是一个HTML标签，它是用来告知web浏览器使用的HTML版本  -->
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>  <!--设置字符集-->
<meta http-equiv="Refresh" content="30" />    <!--每30秒刷新页面-->
<meta http-equiv="Refresh" content="5,Url=http://www.baidu.com" />    <!--5秒后跳转到网页-->
<meta name="keywords" content="关键字信息1，关键字信息2，关键字信息N" />  <!--关键字信息-->
<meta name="description" content="描述信息1，描述信息2，描述信息N" />     <!--描述信息-->
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />    <!--IE兼容-->
<title>网站名称</title>    <!--网站标题显示信息-->
<!--<meta property="og:description" content="Day1 - Python基础1 介绍、基本语法、流程控制 Day2 - Python基础2&#160;列表、字典、集合 Day3 - Python基础3 函数、递归、内置函数 Day4 - Pyth" />-->
<!--<link type="text/css" rel="stylesheet" href="/bundles/blog-common.css?v=giTNza-Of-PEt5UsELhFQAR7G6-bfaSa4oolcq7i9-o1"/>-->
<link rel="icon" href="icon路径"/>  <!--网站图标-->
<!--<link id="MainCss" type="text/css" rel="stylesheet" href="/skins/SimpleBlue/bundle-SimpleBlue.css?v=0qK9u742QhZ2ygXQ2XvDKUpwAJ6TPVAq3vGGNZD4Qx81"/>-->
<!--<link type="text/css" rel="stylesheet" href="/blog/customcss/214271.css?v=ODe5WmG%2bltDcEYVCzhwetY8uopE%3d"/>-->
<!--<link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href="/skins/SimpleBlue/bundle-SimpleBlue-mobile.css?v=NNDA5QyCVOryYTTnKs-Bji3iJtsOwZNbIf8Qs7hMnyE1"/>-->
<!--<link title="RSS" type="application/rss+xml" rel="alternate" href="https://www.cnblogs.com/alex3714/rss"/>-->
<!--<link title="RSD" type="application/rsd+xml" rel="EditURI" href="https://www.cnblogs.com/alex3714/rsd.xml"/>-->
<!--<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="https://www.cnblogs.com/alex3714/wlwmanifest.xml"/>-->
<!--<script src="//common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>-->
<!--<script type="text/javascript">var currentBlogApp = 'alex3714', cb_enable_mathjax=false;var isLogined=true;</script>-->
<!--<script src="/bundles/blog-common.js?v=fobKU6DuMF7uNOMKEOEwhhLiN2dvU4IL2UfTDgUZOsY1" type="text/javascript"></script>-->
</head>
<body>
<!--标签分类：块级标签，占整行；行内标签，占实际长度-->
<h1>1号标题最大，6号标题最小，特性自动加大加粗</h1>
<p> 段落标签，段落间有间距；&nbsp <br/>空格+换行  </p>    <!--网站标题显示信息-->
<!--图标：空格&nbsp   大于符号&gt   小于符号&lt-->
<div>块级标签：特性，白板，无格式</div>
<span>行内标签，特性白板无格式</span>
<form enctype="multipart/form-data" action="server ip" method="get">
    <!--form + input系列标签 textarea  select 实现与后台数据表单提交-->
    <!--GET POST的区别，get在地址栏可见，post不可见-->
    <div>
        <label for="in1">用户名</label>
        <input id="in1" type="text" name="user" value="赵云"/>
        <label for="in2">密码</label>
        <input id="in2" type="password" name="pwd" />
        <input type="button" value="普通按钮"/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
        <!--for+id 实现点击光标选中ID功能；表单以字典的形式提交，注意type属性-->
    </div>
    <div>
        <label>性别</label><br/>
        <label>男：</label>
        <input type="radio" name="XB" checked="checked" value="男"/>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <label>女：</label>
        <input type="radio" name="XB" value="女" /><br/>
        <label>爱好</label><br/>
        <label>篮球</label>
        <input type="checkbox" name="loving" checked="checked" value="篮球"/>
        <label>排球</label>
        <input type="checkbox" name="loving" checked="checked" value="排球"/>
        <label>足球</label>
        <input type="checkbox" name="loving"  value="足球"/><br/>
        <label>上传文件</label>
        <input type="file" name="fielname" /><br/>
        <!--单选框，name相同则互斥；checked="checked"实现默认选择；上传文件须依赖form的enctype="multipart/form-data"属性-->
        <label>备注-多行文本框</label>
        <textarea name="text1">输入内容</textarea>
    </div>
    <div>
        <label>地市-下拉复选框</label>
        <select name="city" >
            <!--<select name="city" multiple="multiple">-->
            <option id="ct1" value="成都">成都</option>
            <!--<optgroup label="川南"></optgroup>-->
            <option id="ct2" value="自贡">自贡</option>
            <option id="ct3" value="宜宾">宜宾</option>
            <option id="ct4" value="乐山">乐山</option>
            <option id="ct5" value="凉山">凉山</option>
        </select>
        <!--select的size属性设置显示多少个选项；optgroup分组，无法选择；multiple="multiple"可多选-->
    </div>
</form>
<div>
    <label>超级链接</label>
    <a href="https://www.baidu.com/">
        <img src="ASCII码表.png" alt="美女" title="点为到百度" style="height: 50px;"/>
    </a><br/>
    <label>锚点功能</label>
    <a href="#某个标签的ID">跳转到当前页面的某个标签，书签功能</a>
</div>
<div>
    <label>列表1</label><br/>
    <ul>
        <li>1111</li>
        <li>2222</li>
    </ul>
    <label>列表2</label><br/>
    <ol>
        <li>1111</li>
        <li>2222</li>
    </ol>
    <label>列表3</label><br/>
    <dl>
        <dt>1234</dt>
        <li>1111</li>
        <li>2222</li>
        <dt>4321</dt>
        <li>3333</li>
        <li>4444</li>
    </dl>
    <label>表格</label><br/>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>收入</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>刘备</td>
                <td rowspan="2">29</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>张飞</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>赤兔马</td>
                <td colspan="2">29</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>
</div>
<div>
    <label>fieldset标签</label><br/>
    <fieldset >
        <legend>登录</legend>
        <label>fieldset</label><br/>
        <label>fieldset</label>
    </fieldset>
</div>
</body>

二、CSS基本样式

样式选择器：id选择器、class选择器、标签选择器、层级选择器、组合选择器、属性选择器

通过link标签调用单独的.css样式文件 <link rel="stylesheet" href="style_file.css" />

.c1:hover{ }

基本样式：color, height, width, border: 1px solid red, font-size, font-weight:bold;

foalt, margin: 0 auto; padding, position: fixed; position : relative + position: absolute;

overflow: auto/hidden; z-index, opacity, background-image:url=""; background-repeat; background-position-x;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <link rel="stylesheet" href="style_file.css" />   /*将样式单独写在.css文件中，通过link标签调用*/
    <style>
        #i1{               /*id 样式选择器*/
            color: red;
        }
        .c1{               /*class 选择器*/
            height: 200px;
        }
        .c2{
            width: 400px;
        }
        div{               /*标签 选择器*/
            background: aqua;
        }
        .c1 .c2 div{       /*层级 选择器*/
            background-color: blue;
        }
        #i1,.c2,.div{       /*组合 选择器*/
            background-color: yellow;
        }
        .c1[id="new"]{      /*属性 选择器*/
            background-color: blue;
        }
        /*样式优先级：标签上的style优先，与编写顺序有关，即就近原则*/
        .cc1{
            height: 200px;width: 80%;border: 1px solid red;border-radius: 50%;
            /*高：xx像素；宽：xx像素/50%；边框：x像素  solid实线/dotted虚线  颜色;圆*/
            text-align: center;line-height: 200px; /*文字 水平方向居中，垂直方向居中（与标签高度一致）*/
            font-size: 16px;font-weight: bold;color: white/*字体大小；字体加粗；字体颜色*/
        }
        .cc1:hover{       /*当鼠标移动到应用CC1样式的标签上时，执行此样式*/
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <label id="i1" class="c1 c2" style="background-color: black;">CSS example</label>
        <label id="new" class="c1" >欢迎</label>
    </div>
    <div class="c1">
        <a class="c2">
            <div>HELLOOOOO</div>
        </a>
        <span CLASS="c1">HELLO</span>
    </div >
    <div style="background-color: antiquewhite" >
        <div id="22" class="cc1" style="float: left" >adasdad</div>
        <div id="23" style="float: left;width: 18%" >asdad</div>
        <div style="clear: both" ></div>   /*float之后，通过设置该样式使被底层标签包含*/
    </div>
    <div>
        <span style="display: block;margin: 0 auto;padding: 2px" ></span>
    </div>  /*margin：外边距 margin: 0 auto 垂直边距为0，水平居中，padding：内边距*/
    /*display：block行内标签变为块级标签；inline块级标签变为行内标签；none标签不显示；
                inline-block同时具有行内和块级标签的属性，即行内标签，但又可以设置长宽高边距等属性
    注意：行内标签无法设置长宽高边距等属性*/
    <div style="position: fixed;bottom: 0;right: 0;z-index: 7;">TOP</div>
    /*固定标签在浏览器的某个位置，即实现标签的分层; 分层显示顺序，z-index越大，显示越靠前*/
    <div style="position: relative;z-index: 9;opacity: 50%;overflow: auto">
        /*opacity: 50% 透明度  overflow: auto 内部标签比外部标签大时增加滚动条；overflow: hidden 隐藏*/
        <div style="position: absolute;top: 0px;left: 0px;"></div>
    </div>  /*position: relative + absolute 固定标签到父类标签的某个位置，注意与position: fixed 的区别*/
    <div style="background-image: url('图片路径');background-repeat: repeat-y;background-position-x: 10px" >
        background-repeat:重复，x,y,no-repeat;background-position-x:移动北京图的位置 x,y
    </div>
</body>
</html>

参考文章：

https://blog.youkuaiyun.com/u011727893/article/details/52738452