python和前端之HTML的激情

时间：2019-06-06 21:31:59 阅读：133 评论：0 收藏：0 [点我收藏+]

标签：空白 ann end 允许 mic name 获得视频 red

python写前端需要啥语言？

　　a：HTML　　→　　骨架【类似于创建一个塑料模特】，搭建、调整整个页面布局

　　b：CSS　　 →　　衣服【类似于给塑料模特穿上衣服，不能那么暴露】，将整个页面美化

　　c：JS　　　 →　　马达【给模特装一个小马达，这样才能动，才能叫嘛】，让页面动起来

技术图片

1、初识HTML。

基本概念：

　　html为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。

超文本：音频，视频，图片称为超文本。
标记：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。

　　作用：HTML是负责描述文档语义的语言。

2、HTML的结构。

<!DOCTYPE html>　　　　　　　　　　// 这是文档声明头部，意在指明这是那种HTML规范
<html lang="en">　　　　　　　　　 // lang=“en” 英语的意思，用谷歌浏览器打开会提示翻译，删除就好
<head>　　　　　　　　　　　　　　　　// 头标签，是一对的。
    <meta charset="UTF-8">　　　　// meta 提供这个网页的基本信息，默认打开就是 utf-8 编码
    <title>Document</title>　　　 // title 标题名称，就是打开网页最上方的网页名
</head>
<body>　　　　　　　　　　　　　　　　// 网页的主体内容，其中包含很多内容。
    
</body>
</html>

看注释不爽？看表格呢？

head内常用标签

标签	意义
<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页原信息

body内常用标签（HTML中的重点）

<br>br这是换行
<b>这是加粗</b>
<i>这是斜体</i>
<u>这是下划线</u>
<p>这是独占一个段落</p>
<s>这是删除</s>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6 最多到6</h6>
<hr>这是水平线<hr>

HTML的特点：

对换行、空格不敏感
空白折叠
对于body的一行超长的内容，会在网页上自动换行

3、HTML文件的编写规范。

（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>
（2）所有的标记都必须小写。
（3）所有的标记都必须关闭。
- 双边标记：<span></span>
- 单边标记：<br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” />
（4）所有的属性值必须加引号。<h1 id="head"></h1>
（5）所有的属性必须有值。<input type="radio" checked="checked" />

4、HTML中的特殊符号。

 ：空格（non-breaking spacing，不断打空格）
<：小于号（less than）
>：大于号（greater than）
&：符号&
"：双引号
'：单引号
©：版权©
™：商标™

5、pycharm中创建HTML。

技术图片

就会创建出一个标准的HTML结构

6、标签详解。

标签也被称为标记，分为以下两种：

双闭合标签。eg： <html> </html>
单闭合标签。eg：<meta>

标签分类：

文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。

6.1、head中的标签

Meta标签：主要用于页面的关键字和描述，是写给搜索引擎看的。

<meta charset="utf-8">

title标签：主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

<title>看官贼帅</title>

link标签：链接 css 文件。

<link rel="stylesheet" href="css的文件名.css">

script标签：链接javascrip文件。

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

style标签：内嵌样式

<style></style>

6.2、body中的标签

字体标签：

1、标题标签：h1~h6 【<h1></h1>】，`<h1>`定义最大的标题，`<h6>`定义最小的标题。

<h1>今天心情好</h1>
<h2>是不可能的</h2>
<h3>一天天的b事</h3>
<h4>那么多</h4>
<h5>我也只能</h5>
<h6>小声哔哔</h6>

效果如下：

技术图片

2、加粗标签

<b>好饿</b>
<strong>好困</strong>

3、下划线标签

<u>好想睡觉</u>

4、斜体标签

<i>懒啊</i>

技术图片

-----------------------------------------------------------------------------------------------------------------------

排版标签：

1、段落标签 <p></p> 【有换行作用，但是有空隙】；p标签是一个文本级标签，p里面只能放文字、图片、表单元素。

align=‘属性值‘：对齐方式。属性值包括：left、center、right

<p>这是一个段落</p>
<p align="center">这是另一个段落</p>

技术图片

2、换行标签 <br>【强制换行】

<p>我想涨工资</p>唉
<p>我想找对象，
要漂亮的妹纸</p>
啥时候才能？<br>贫穷

效果自己看吧：p标签包裹了不在同一行的数据，但是显示效果在一行；将br标签添加在一整个句子之中，产生了换行的效果，而且行与行之间的间距比p标签的小。

技术图片

3、分割线（水平线）标签 <hr>

<p>我想涨工资</p>唉
<p>我想找对象，
<hr>
要漂亮的妹纸</p>
啥时候才能？<br>贫穷

效果用肉眼可见：

技术图片

4、预格式化标签<pre>

将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果

   <pre>
        鹅鹅鹅

            作者：李白
        曲项向天歌
        白毛浮绿水
        
    </pre>

技术图片

5、块级标签<div></div> 和<span> </span>

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。

<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的

<body>

    <div>
        导航栏
    </div>
    <div>
        中心banner
    </div>
    <span>路飞</span>
    <span>alex</span>
    
</body>

技术图片

div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。

div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div

-----------------------------------------------------------------------------------------------------------------------

超链接标签：<a> 标签

<a> 标签是一个文本级别的标签。

属性：

href：目标URL
title：悬停文本。
name：主要用于设置一个锚点的名称。
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
- _self：在同一个网页中显示（默认值）
- _blank：在新的窗口中打开。
- _parent：在父窗口中显示
- _top：在顶级窗口中显示

<a> 标签可以链接外部内容：
<a href="www.baidu.com">点击进入百度</a>

做锚点作用【在本页面或者其他页面的的不同位置进行跳转】：
<a name = ‘top‘>顶部</a>
<p>
中间有N个p标签
</p>
<a href = "#top">点击回到顶部</a>

--------------------------------------------------
<a href="网址" target="_self">文本</a>  通过target设置链接网页在哪打开
默认是_self ，在当前页面打开；_blank 在新的页面打开链接

--------------------------------------------------
 <a>标签自带下划线，可以使用如下参数清除下划线：
<a href="网址" style="text_decoration:none">文本</a>

--------------------------------------------------
给<a> 标签设置颜色属性
<a href="网址" style="color:red">文本</a>

--------------------------------------------------
鼠标悬浮在 <a> 标签上显示当前文本内容
<a href="网址" style="tiltle">文本</a>

-----------------------------------------------------------------------------------------------------------------------

图片标签：

img: 代表的就是一张图片。是单边标记。

img是自封闭标签，也称为单标签。

能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。
不能往网页中插入的图片格式是：psd、ai

img标签的常用属性：

src：路径
width：宽度一般情况下只调整一个，会自动等比例调整 width 宽度（长）、 height 高度（宽）
height：高度
title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
align：指图片的水平对齐方式，属性值可以是：left、center、right
alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

<img src="images/bojie.jpeg" alt="波姐" title=‘波多野结衣‘ width="400" height="400">

技术图片

注意：无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。

1：相对路径，就是../ image/ 这种路径【./ 从上一级开始】。从自己出发，找到别人；

2：绝对路径，就是http://开头的路径

-----------------------------------------------------------------------------------------------------------------------

列表标签：

有序 ordered list <ol></ol>

<ol></ol> 默认为数字，也可以使用下面的

<ol type = "a"></ol>
<ol type = "A"></ol>
<ol type = "i"></ol>
<ol type = "I"></ol>

-------------------
<ol>
    <li>内容</li>
</ol>

无序 unordered list <ul></ul>

默认为实心原点

<ul type = "square"></ul>  实心方块

---------------
<ul>
    <li>内容</li>
</ul>

定义列表<dl>没有属性。dl的子元素只能是dt和dd。 dd是描述dt的。

<dl>
        <dt>第一条规则</dt>
        <dd>不准睡觉</dd>
        <dd>不准交头接耳</dd>
        <dd>不准下神</dd>

        <dt>第二条规则</dt>
        <dd>可以泡妞</dd>
        <dd>可以找妹子</dd>
        <dd>可以看mv</dd>
</dl>

------------------------------------------------------------------------------------------------------------

表格标签

<html>
<head></head>
<table>
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>性别</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小马过河</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>小郭吹雪</td>
        <td>女</td>
    </tr>
</table>
</html>

技术图片

将表格添加边框 border: <table border="1">

技术图片

调整表格宽度 width： <table border="1" cellspacing="0" width="400">

技术图片

还可以调整宽度按百分比，这里演示100%： <table border="1" cellspacing="0" width="100%">

技术图片

--------------------------------------------------------------------------------------------------------

form表单<form action=""></form>

input 中 txt password 和submit类型

<html>
<body>
<form action=""></form>   
</body>
</html>
#右击open in browser ->default 打开使用的是pycharm提供的服务。

技术图片

单个文本框<input type="text">

<html>
<body>
<form action="http:localhost:8080" method="get">  #action 提交的地址  method 请求的方式 默认是get
    <input type="text">
</form>
</body>
</html>

技术图片

再添加一个password框，但是不是换行显示，中间有个空格，那是多个空格换成了一个&nbsp好像

<form action="http:localhost:8080" method="get">
    <input type="text">
    <input type="password">
</form>

技术图片

加个br换行，但是发现两行离得太紧密了：

技术图片

添加input标签，text和password类型的，用p标签包裹它们之间就没那么紧密了，

<form action="http:localhost:8080" method="get">
    <p id="username">
    <input type="text"><br></p>
    <p id="passwd">
    <input type="password"></p>
</form>

技术图片

添加提交按钮，类型submit

<form action="http:localhost:8080" method="get">
    <p id="username">
    <input type="text"><br></p>
    <p id="passwd">
    <input type="password"></p>
    <p>
    <input type="submit"></p>
</form>

技术图片

添加属性value，提交按钮值改变成登录

    <p>
    <input type="submit" value="登录"></p>
</form>

技术图片

每次百度搜索是一个s一个？然后一个id对应一个值

技术图片

我们也提交也需要设置一个name，一个值name="name" value="" #<input type="text" name="name" value="">

<form action="07%20table.html" method="get">
    <p id="username">
    <input type="text" name="name" value=""><br></p>
    <p id="passwd">
    <input type="password" name="pwd"></p>
    <p>
    <input type="submit" value="登录"></p>
</form>

技术图片

结果是input输入框name和第二个name是pwd的分别获取到输入框中提交的值。name value name value 多个输入框内的键值用&来拼接。我的源文件地址是C:\mcw\test\test.html

但是这样提交的密码是明文的，都被显示出来了，登录提交这样的应该用post请求 <form action="" method="post">

<form action="" method="post">
    <p id="username">
    <input type="text" name="name" value=""><br></p>
    <p id="passwd">
    <input type="password" name="pwd"></p>
    <p>
    <input type="submit" value="登录"></p>
</form>

技术图片

因为请求方式改为post了，地址栏也不显示提交的数据。想看提交的数据可以在开发者工具中看，Network->all->点击name中的提交的，右边Headers中的From Data中显示我提交的数据。get会显示在地址栏，post不会显示在地址栏。把这些数据提交到服务器后台，这些数据是文本传输，如果是图片那就流式传输。

如果是图片传输，除了提交方式改为post，还要添加enctype属性，默认值是"application/x-www-form-urlencoded"，图片传输改为"multipart/form-data"。如果不改，文件和图片提交不过去

input中的radio单选框

<html>
<head>
    <meta charset="UTF-8" ></head>
<body>
<form action="" method="post" enctype="multipart/form-data">
    <p>
        <input type="radio">男
        <input type="radio">女
    </p>
</form>
</body>
</html>

技术图片

但是没有实现单选，两个都选上了。这里需要添加一个相同的name，因为只能提交一个相同的name，这样就实现单选了。

<form action="" method="post" >
    <p>
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
    </p>
</form>

技术图片

单选中添加默认选中哪个 checked=

<form action="" method="get" >
    <p>
        <input type="radio" name="sex" checked="男">男
        <input type="radio" name="sex">女
    </p>
    <p><input type="submit" value="登录"></p>
</form>

技术图片

多选框input中的checkbox

<form action="" method="get" >
    <h4>请选择你的爱好：</h4>
    <p>
        <input type="checkbox" name="a" checked="男">唱歌   #默认选中的checked
        <input type="checkbox" name="b">跳舞
        <input type="checkbox" name="c">学习
    </p>
    <p><input type="submit" value="登录"></p>
</form>

技术图片

on就是点击登录之后选中了的

技术图片

a,b是name，有name就给它个value

<form action="" method="get" >
    <h4>请选择你的爱好：</h4>
    <p>
        <input type="checkbox" name="a" value="唱歌">唱歌 #给它个value
        <input type="checkbox" name="b" value="跳舞">跳舞
        <input type="checkbox" name="c" value="学习">学习
    </p>
    <p><input type="submit" value="登录"></p>
</form>

选中之后提交 name value都获取到了：

技术图片

network->all->name->头->查询字符串参数

技术图片

网络编程socket里的recv就能获取到这些字符串，然后分割正则获取每个元素等等。获得这个唱歌，跳舞后，如果需要写入数据库那就写进去。

select 下拉菜单

<form action="" method="get" >
    <h4>下拉列表 请选择你的爱好：</h4>
    <p>
        <select name="fav" >
            <option value="唱歌">唱歌</option>
            <option value="跳舞">跳舞</option>
            <option value="study">学习</option>
        </select>
    </p>
    <p><input type="submit" value="登录"></p>
</form>

由下可知：选择下拉列表点击登录后键值name fav value 跳舞已经获取到了

技术图片

默认选中：selected

<form action="" method="get" >
    <h4>下拉列表 请选择你的爱好：</h4>
    <p>
        <select name="fav" >
            <option value="唱歌" selected>唱歌</option>
            <option value="跳舞" >跳舞</option>
            <option value="study">学习</option>
        </select>
    </p>
    <p><input type="submit" value="登录"></p>
</form>

技术图片

select实现多选添加multiple。选项多的时候滚动条出来了。

<form action="" method="get" >
    <h4>下拉列表 请选择你的爱好：</h4>
    <p>
        <select name="fav" multiple>  <!--添加multiple实现多选-->
            <option value="唱歌" selected>唱歌</option>  #selected被选中的
            <option value="跳舞" >跳舞</option>
            <option value="study">学习</option>
            <option value="跳舞" >跳舞</option>
            <option value="跳舞" >跳舞</option>
            <option value="study">学习</option>
        </select>
    </p>
    <p><input type="submit" value="登录"></p>
</form>

技术图片

input中的datetime-local类型

<form action="" method="get" >
    <h4>时间列表：</h4>
    <p>
        <input type="datetime-local">
    </p>
    <p><input type="submit" value="登录"></p>
</form>

技术图片

多行文本框textarea

<form action="" method="get" >
    <h4>多行文本框：</h4>
    <p>
        <textarea name="" id="" cols="30" rows="10"></textarea>  #pycharm默认生成的大小
    </p>
    <p><input type="submit" value="登录"></p>
</form>

可以拖动文本框改变大小

技术图片

lable 标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <form action="">
        <label for="username">用户名：</label>
        <input type="text" id="username">
        <label for="pwd">密码：</label>
        <input type="text" id="pwd">
    </form>
    </body>
</html>

<!--label将用户名和下面的username绑定在一起，这样鼠标点击用户名，输入框自动出现光标-->

-----------------------------------------------------------------------------------

盒子标签

div　　【独占一行的标签】

把网页分割为不同的逻辑区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 div盒子标签</title>
    <style type="text/css">
        #top{
            /*行高等于盒子的高度 实现垂直居中*/
            height: 40px;
            line-height: 40px;
            background-color: #333;
            /* text-align: center; */
        }
        a{
            text-decoration: none;
            color: #b0b0b0;
            font-size: 14px;
        }
        /*类选择器
        选择器作用：选中标签
        */
        .sep{
            color: #666;
        }
    </style>
</head>
<body>
 <!--小米顶部-->
    <div id="top">
        <div class="top_l">
            <a href="#">小米商城</a>
            <span class="sep">|</span>
            <a href="#">MIUI</a>
            <span class="sep">|</span>
            <a href="#">lot</a>
            <span class="sep">|</span>
            <a href="#">云服务</a>
            <span class="sep">|</span>
            <a href="#">金融</a>
            <span class="sep">|</span>
            <a href="#">危机</a>
        </div>
        <div class="shop"></div>
        <div class="user_login"></div>
    </div>
    <div id="nav">
        小米导航
    </div>
    <div id="content">
        小米的主体内容
    </div>
    <div id="footer">
        小米的脚
    </div>
</body>
</html>

span标签

【一行显示的标签】放在一个内容两边，会默认左右有一个空白的间距，并且可以改变其样式，例如颜色等

最后：

人如其名，懒得写，越写越累，各位看官手下留情，感谢来自朋友的帮助https://www.cnblogs.com/machangwei-8/ 允许我复制他的一部分内容。

python和前端之HTML的激情

标签：空白 ann end 允许 mic name 获得视频 red

原文地址：https://www.cnblogs.com/langcainiao/p/10985968.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

python和前端之HTML的激情

python写前端需要啥语言？

1、初识HTML。

2、HTML的结构。

3、HTML文件的编写规范。

4、HTML中的特殊符号。

5、pycharm中创建HTML。

6、标签详解。

6.1、head中的标签

6.2、body中的标签

字体标签：

1、标题标签：h1~h6 【<h1></h1>】，<h1>定义最大的标题，<h6>定义最小的标题。

2、加粗标签

3、下划线标签

4、斜体标签

-----------------------------------------------------------------------------------------------------------------------

排版标签：

1、段落标签 <p></p> 【有换行作用，但是有空隙】；p标签是一个文本级标签，p里面只能放文字、图片、表单元素。

2、换行标签 <br>【强制换行】

3、分割线（水平线）标签 <hr>

4、预格式化标签<pre>

5、块级标签<div></div> 和<span> </span>

-----------------------------------------------------------------------------------------------------------------------

超链接标签：<a> 标签

-----------------------------------------------------------------------------------------------------------------------

图片标签：

img标签的常用属性：

-----------------------------------------------------------------------------------------------------------------------

列表标签：

有序 ordered list <ol></ol>

无序 unordered list <ul></ul>

定义列表<dl>没有属性。dl的子元素只能是dt和dd。 dd是描述dt的。

表格标签

form表单<form action=""></form>

input 中 txt password 和submit类型

input中的radio单选框

多选框input中的checkbox

select 下拉菜单

input中 的datetime-local类型

多行文本框textarea

lable 标签

盒子标签

span标签

1、标题标签：h1~h6 【<h1></h1>】，`<h1>`定义最大的标题，`<h6>`定义最小的标题。

input中的datetime-local类型