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的详细介绍。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,844评论 1赞 92
  • CSS 基础
    CSS基础 本文包括CSS基础知识选择器（重要！！！）继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,247评论 0赞 40
  • Html&CSS（二）
    本文主要是起笔记的作用，内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,675评论 0赞 30
  • CSS基础
    一.CSS描述 CSS全称为“层叠样式表(Cascading Style Sheets)”，它主要是用于定义HTM...
    snowy_sunny阅读 1,113评论 0赞 4
  • HTML+CSS摘要
    本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,341评论 0赞 5