python进阶--HTML和CSS前端基础知识详解

HTML和CSS前端基础语法介绍

HTML基础语法介绍：

html介绍

定义：html超文本标记语言
作用：开发网页
<!-- 声明是html5版本 -->  这是注释

<!-- 声明是html5版本 -->
<!DOCTYPE html>
<!-- html标签的头部，lang表示支持谷歌浏览器的翻译功能 -->
<html lang="en">
<!-- 网页标题内容和网页属性设置 -->
<head>
    <!-- 设置网页的字符集编码格式 -->
    <meta charset="UTF-8">
    <!-- 设置收集浏览网页时，不缩放显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置使用微软浏览器的引擎，因为这个vscode是微软开发的，所以这是微软推荐使用的，但是我们不用 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 标题内容 -->
    <title>Document</title>
</head>
<!-- 网页主题内容头标签 -->
<body>
    
</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">
    <title>这是我的第一个网页</title>
</head>
<body>
    <h1>这是标题标签h1</h1>
    <h2>这是标题标签h2</h2>
    <h3>这是标题标签h3</h3>
    <h4>这是标题标签h4</h4>
    <h5>这是标题标签h5</h5>
    <p>这是一个段落标签</p>
    <div>
        <br>
        <hr>
        <a href="https://www.baidu.com">百度</a>
        <img src="./35c05ed9bc3eb135ded93b34ab1ea8d3fc1f446b(2).jpg" alt="图片加载失败">
        <ul>
            <li>这是一个无需的列表标签</li>
            <li>这是一个无需的列表标签</li>
            <li>这是一个无需的列表标签</li>
        </ul>
        <ol>
            <li>这是一个有序的列表标签</li>
            <li>这是一个有序的列表标签</li>
            <li>这是一个有序的列表标签</li>
        </ol>
    </div>
    <table>
        <tr>
            <th style="border:1px red ">姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>20</td>
        </tr>
    </table>
   
</body>
</html>

总结：

    双标签：
        <h1></h1>:标题标签
        <p></p>：段落标签
        <div></div>：块标签
        <a href=""></a>：超链接a标签
        <ul><li></li></ul>：无序列表标签
        <ol><li></li></ol>：有序列表标签
        <span></span>：段落标签中的文本块标签
    单标签：
        <hr>：分割行标签
        <br>：换行标签
        <img src="" alt="">：图片标签

html表单标签和表单的提交：

html表单标签
    定义：表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器 。
html标签的基本语法:<form action=""></form>
<form>标签（表单）的属性：
    action属性 设置表单数据提交地址
    method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写  
    1.<form>标签  表示表单标签，定义整体的表单区域
    2.<label>标签 表示表单元素的文字标注标签，定义文字标注
表单元素属性设置：
    name属性 设置表单元素的名称，该名称是提交数据时的参数名
    value属性 设置表单元素的值，该值是提交数据时参数名所对应的值
html表单的提交：表单提交就是把不同类型的数据以键值对的形式提交给服务器。
    1.<input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
    2.<textarea>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框
    3.<select>标签 表示表单元素的下拉列表标签 定义下拉列表
        <option>标签 与<select>标签配合，定义下拉列表中的选项
    type属性
        type="text"      定义单行文本输入框
        type="password"  定义密码输入框
        type="radio"     定义单选框
        type="checkbox"  定义复选框
        type="file"      定义上传文件
        type="submit"    定义提交按钮
        type="reset"     定义重置按钮
        type="button"    定义一个普通按钮

示例代码：

<!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">
    <title>这是我的第二个练习html</title>
</head>
<body>
    <form action="https://www.baidu.com" method="GET">
        <p>
            <label>姓名：</label>
            <input type="text" name="username" value="请输入大于3-个字">
        </p>
        <p>
            <label>密码：</label>
            <input type="password" name="passwrod">
        </p>
        <p>
            <label>性别：</label>
            <input type="radio" name="sex" value="0">男
            <input type="radio" name="sex" value="1">女
        </p>
        <p>
            <label>爱好：</label>
            <input type="checkbox" name="like" value="0">篮球
            <input type="checkbox" name="like" value="1">跳舞
            <input type="checkbox" name="like" value="2">唱歌
            <input type="checkbox" name="like" value="3">rap
        </p>
        <p>
            <label>描述：</label>
            <textarea cols="30" rows="10" name="string" vl></textarea>
        </p>
        <p>
            <label>上传</label>
            <input type="file" name="person_file">
        </p>
        <p>
            <label>籍贯：</label>
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>深圳</option>
                <option>广州</option>
            </select>
            <label></label>
            <input type="submit">
            <label></label>
            <input type="reset">
            <label></label>
            <input type="button" value="普通按钮">
        </p>
    </form>   
</body>
</html>

CSS基础语法的介绍：

什么是css？
css(Cascading Style Sheet)是层叠样式表，是一种美化界面和控制页面布局的语言。
css基础语法：
选择器{
样式规则
}
样式规则：
属性名1：属性值1;
属性名2：属性值2;
属性名3：属性值3;
选择器:是用来选择标签的，选出来以后给标签加样式
{}内的都是一些对于标签内容的样式，例：width（宽度），hight（高度），font-size（字体大小）
css三种引入方式：
1.行内式（一般不用）
2.内嵌式（内部样式）（学习使用）
3.外链式（公司开发用）
代码示例：

<!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">
    <title>css选择器</title>
    <!-- 内嵌式：在head头标签里面写style="",里面的选项用；隔开-->
    <style>
    div{color: sandybrown; 
        width:400px; 
        height: 30px;}
    </style>

    <!-- 外链式：在head头标签里面写link单标签，指定href地址。 如<link rel="stylesheet" href="./main.css/link.css"> -->
    <link rel="stylesheet" href="./main.css/link.css">

</head>
<body>
    
    <!-- 行内式：在标签头里面写style="",里面的选项用；隔开 -->
    <p style="border: red; color: royalblue">这是一个p段落标签</p>
    <div>
        <p>这是一个div标签内的p段落标签</p>
    </div>
    <a href="http:www.baidu.com">百度网</a>
</body>
</html>

css选择器的种类：

1.标签选择器
2.类选择器
3.层级选择器
4.id选择器
5.组选择器
6.伪类选择器

在下面演示时，我们都用内嵌式，读者可自行扩展。
1.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 这里就是内嵌式的css标签选择器的使用，我们发现这里用了style标签，
        而css语法里并没有这个，是因为我们现在是在html的代码里面，所以得声明 -->
    <style>
    p{
        color: blue
    }
    </style>
</head>
<body>
    <p>这是一个p段落标签</p>
</body>
</html>

2.类选择器（.开头）
在使用类选择器是，要先定义好类选择器的属性，然后再调用
注意：一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器

<!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">
    <title>Document</title>
    <!-- 定义类标签 -->
    <style>
    .color{color: blue}
    .big{font-size:10px}
    </style>
</head>
<body>
    <!-- 类标签的调用 -->
    <p class="color big">这是一个段落标签</p>
</body>
</html>

3.层级选择器(层级选择器不仅能用父子，还能用爷孙)

<!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">
    <title>Document</title>
    <!-- 层级选择器 -->
    <style>
    div a{
        color: blue;
        text-decoration: none;   
    }
    div p{
        color:red;
    }
    </style>
</head>
<body>
    <div>
        <a href="https://www.baidu.com">百度网</a>
        <div>
            <p>这是div标签中的p段落标签</p>
        </div>
    </div>
</body>
</html>

4.id选择器（#开头）

<!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">
    <title>Document</title>
    <!-- 调用id来为该标签设置属性 -->
    <style>
    #str{
        color: red
    }
    </style>
</head>

<body>
    <!-- 定义一个标签的唯一id -->
    <p id="str">这是p段落标签</p>
</body>
</html>

5.组选择器(不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器)
如标签1，标签2{属性设置}

<!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">
    <title>Document</title>
    <!-- 这是组选择器 -->
    <style>
        a,p{
            color: blue;
            background: gold
        }
    
    </style>
</head>
<body>
    <p>这是一个段落标签</p>
    <div>
        <a href="https://www.baidu.com">百度网</a>
    </div>
</body>
</html>

6.伪类选择器（当用户和网站交互的时候改变显示效果可以使用伪类选择器）
语法：.类名：hover{属性}，表示当鼠标移动到这个范围内时会呈现出类里面的样式。

<!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">
    <title>Document</title>
    <!-- 伪类选择器的语法 -->
    <style>
    .color:hover{
        color: brown;
        background: gold;
        width: 300px;
        height: 200px;
    }
    </style>
</head>
<body>
    <p class="color">这是一个段落标签</p>
</body>
</html>

css常用的属性：

1.布局常用样式属性
width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法，分别设置四个边的：
border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
2.文本常用样式属性
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

到这为止我们的css就介绍完了，如果读者想深入了解，请移步至随时随地学编程，里面有对于css和html的详细介绍。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,193评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,306评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,130评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,110评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,118评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,085评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,007评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,844评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,283评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,508评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,667评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,395评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,985评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,630评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,797评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,653评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,553评论 2赞 352