day38 HTML

web front-end development foundation

HTML
css
js
jquery
bootstrap

Network programming our previous studies, it is based on C / S architecture. That is, we write the client, you must also write a server. By client and server interaction, and achieve a variety of functions.

Starting today, we must learn front-end development. The front end is based on B / S architecture. We developed things presented in the form of web pages. Browser as a client, we only need to write a logical server on it.

Essentially, the browser is also based on socket development. So we can write a server to receive the data page access:

from socket import socket
skt = socket()
addr = ('127.0.0.1', 8001)    # 监听本地8001端口
skt.bind(addr)
skt.listen(5)
while True:
    conn, client_addr = skt.accept()
    acq = conn.recv(1024).decode()
    print(acq)
    conn.send(b'HTTP/1.1 200 ok\r\n\r\n')    # http协议的回应格式，表示连接成功
    conn.send(b'<h1>Hello World!</h1>')    # 一段浏览器能读懂的语句
    conn.close()

After the program up and running, enter the address in the browser 127.0.0.1:8001, you can see the browser to see the contents of the output.

1572867594137

But write our own socket server is too simple, since we are all open pages in PyCharm. PyCharm will automatically help us configure socket server. In the future, we will as a framework through web server.

pycharm open the browser

Document Structure

HTML is a language HTML (hypertext mark-up language), by using a tag, the tag to achieve the effect.

The basic document structure is as follows:

<!DOCTYPE html>  <!-- 文档声明 -->
<html lang="en">  <!-- 语言 -->
<head>  <!-- 网站配置信息 -->
    <meta charset="UTF-8">  <!-- 解码方式 -->
    <title>皇家赌场</title>  <!-- 网站标题 -->
</head>
<body>   <!-- 网站显示内容 -->
    <h1>
        <!-- 26期 皇家赌场 -->
    </h1>
</body>
</html>

The meaning of each part is as follows:

Most beginning <!DOCTYPE html>to declare the type of document to HTML
Entire document section is contained between a pair of <html>tab
Document is divided into two parts head and body
head tag is used to all kinds of property declaration document (such as decoding methods, such as website title, the following will go into the details), it will not appear in the page
The body tag is the real content of the page displayed, most of our operations are also conducted here

head tag

1. meta document character encoding

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
    </head>
    <body>
        <h1>叫爸爸</h1>
    </body>
</html>

Classification label written

全封闭标签  <h1 xx='ss'>xxx</h1>  
标签属性 :<h1 xx='ss'>xxx</h1>    xx:属性名  ss:属性值
自封闭标签  <meta charset="UTF-8">

1.2 meta refresh page

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>世上最牛逼的页面标题</title>
        <meta http-equiv="Refresh" content="2" />    <!--每2秒钟刷新依此页面-->
    </head>
    <body>
        <h1>这是个栗子，快尼玛给我运行起来。</h1>
    </body>
</html>

Regularly updated page

1.3 meta keywords

You can set keyword meta tags for search engines and keyword search.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>世上最牛逼的页面标题</title>
        <meta name="keywords" content="欧美，日韩，国产，网红,直播" />
    </head>
    <body>
        <h1>这个栗子就别运行老子了，随便去看一个网站的源代码吧。</h1>
    </body>
</html>

1.4 meta description site

When the meta tags you can set site description information for search engines, the site displays basic descriptive information.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>野鸭子</title>
        <meta name="keywords" content="欧美，日韩，国产，网红" />
        <meta name="description" content="野鸭子是一个面向全球的皮条平台。" />
    </head>
    <body>
        <h1>这个栗子就别运行老子了，随便去看一个网站的源代码吧。</h1>
    </body>
</html>

1572869598735

1.5 meta touch-screen zoom

meta tags can set the page whether to support touch-screen zoom functions, the meaning of each element is as follows:

width=device-width It shows the device width to the width of the screen.
initial-scale=1.0The initial display scaling.
minimum-scale=0.5The minimum scale.
maximum-scale=1.0，最大缩放比例。
user-scalable=yes，是否支持可缩放比例（触屏缩放）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标题标题标题</title>
    
    <!--支持触屏缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

    <!--不支触屏持缩放-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->

</head>
<body>

    <h1 style="width: 1500px;background-color: green;">一起为爱鼓掌吧</h1>
</body>
</html>

1.6 link 图标

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>野鸭子</title>
        <link rel="icon" href="图标文件路径">
    </head>
    <body>
        <h1>隔壁王老汉的幸福生活</h1>
    </body>
</html>

例如，将图标文件路径设置为必应的图标（按F12，在控制台中可以找到链接地址）连接//cn.bing.com/sa/simg/bing_p_rr_teal_min.ico，就可以将我们的网页图标替换为必应的了。

1572869986934

简单head内部标签总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>野鸡平台</title>
    <meta name="keywords" content="欧美，日韩，国产，网红"/>
    <meta name="description" content="野鸡是一个面向全球的皮条平台。"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <link rel="icon" href="//cn.bing.com/sa/simg/bing_p_rr_teal_min.ico">

</head>
<body>
    <h1 style="width: 1500px;background-color: green;">我们一起为爱鼓掌呀！！！</h1>
</body>
</html>

body标签

h1 - h6标签 ,标题标签

与MarkDown语言类似，HTML也只支持六级标题。

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

1572870184015

br标签换行

    <h1>一级标题</h1>
    <h2>二级<br>标题</h2>

注意点:所有的回车空格等空白内容都被认为是一个空格

1572870402433

hr 标签一行横线

<h2>三级<hr>标题</h2>

1572870484838

body标签里面的没有其他标签包裹的内容,就是普通文本显示

<body>
    Hello World!
</body>

1572870526929

a 标签超链接标签

不加href属性，就是普通文本显示

<a>python短片</a>

1572870592477

加上href属性,不加值，文字有颜色效果,还有下划线，并且点击后会刷新当前的html页面

<a href="">python短片</a>

connection

加上href属性,并且加上值，跳转对应网址的页面

<a href="https://www.python.org" target="_self">python短片</a>

There are links

未访问之前是蓝色的字体颜色

访问之后是紫色的字体颜色

我们可以通过设置target属性控制是否在新窗口打开链接：
_self:在当前标签页打开 href属性值的那个网址
_blank:在新的标签页打开 href属性值的那个网址

例如，如果我们将target属性值设定为_blank，就会在新窗口打开网页了。

xinbiaoqian

锚点，页面内容进行跳转，可以跳转到页面指定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="top">这是顶部</div>

<a href="#i1">第一章 初入贵境</a>
<a href="#i2">第二章 开局一人一条狗</a>
<a href="#i3">第三章 就是干</a>
<a href="#i4">第四章 大结局</a>


<div id="i1" style="background-color: red;">第一章 初入贵境</div>
<p>
    没干啥好事儿!!
</p>
<p>
    没干啥好事儿!!
</p>
<p>
    没干啥好事儿!!
</p>
<p>
    没干啥好事儿!!
</p>
<div id="i2" style="background-color: red;">第二章 开局一人一条狗</div>
<p>
    给狗洗澡!!
</p>
<p>
    给狗洗澡!!
</p>
<p>
    给狗洗澡!!
</p>
<p>
    给狗洗澡!!
</p>
<div id="i3" style="background-color: red;">第三章 就是干</div>
<p>
    干狗!!!
</p>
<p>
    干狗!!!
</p>
<p>
    干狗!!!
</p>
<p>
    干狗!!!
</p>
<p>
    干狗!!!
</p>
<div id="i4" style="background-color: red;">第四章 大结局</div>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>
<p>
    中毒身亡!!!
</p>

<a href="#top">返回顶部</a>

</body>
</html>

描述：标签设置id或name属性=值(xx)，a标签href属性的值写法：href='#xx'。点击这个a标签就能跳转到id或name属性为xx的那个标签所在位置。

在这个例子中，每一章的标题位置都设置了锚点，点击开头的目录，就会跳转到相应的标题。同样，也在顶部设置了锚点，当点击返回顶部的连接时，会直接跳转回顶部。

Anchor

img标签图片标签

img标签用来向页面中插入图片，其基本格式为：

<img src="https://cn.bing.com/th?id=OIP.-2Y0C7Bopl_7V4UzZrDzegHaJQ&pid=Api&rs=1" alt="这是一张好看的图片" title="这是一张好看的图片">
<img width="200" height="200" src="timg.jpg" alt="这是一个美女图片,稍等片刻" title="子萌">

我们可以控制img标签中的几个属性，来调节图片的显示状态：

src属性：图片路径，必须写啊。可以是网络路径，也可以是本地路径。
alt属性：图片加载失败或者正在加载时提示的内容
title属性：鼠标悬浮时显示的内容

1572872468595

还有两条不常用，日后我们主要会通过css来控制

width:设置宽度
height:设置高度

div标签和span标签

没有任何的文本修饰效果

正因为这两个标签没有任何文本修饰效果，所以日后我们会大量使用它们。

就好比我们用一张白纸画画要比在一张已经画好的画中修改更舒服。

标签分类

块级标签(行外标签):独占一行,h1-h6\p\br\hr\div\ul\li
    块级标签能够包含内联标签,和某些块级标签，块级标签能够设置高度宽度
内联标签(行内标签):不独占一行,img\a\span  只能包含内联标签,不能包含块级标签,不能设置高度宽度,有内容决定

列表标签 ul和ol标签

<!-- 示例：-->
    兴趣爱好：
    <ul>
        <li>抽烟</li>
        <li>喝酒</li>
        <li>烫头</li>

    </ul>
    
    喜欢的姑娘：
    <ol type="I" start="2">
        <li>韩红</li>
        <li>贾玲</li>
        <li>李宇春</li>
    </ol>
    
<!-- dl标签了解 -->
    <dl>
        <dt>河北省</dt>
        <dd>邯郸</dd>
        <dd>石家庄</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遥</dd>
    </dl>

1572872795728

table表格标签

<table border="1">
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>hobby</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>李晨浩</td>
            <td>看电影</td>
        </tr>
        <tr>
            <td>2</td>
            <td>冯俊</td>
            <td>迟到</td>
        </tr>
        <tr>
            <td>3</td>
            <td>大圣</td>
            <td>玩棍儿</td>
        </tr>
        </tbody>
    </table>

1572872858160

表格合并（rowspan="2"纵行合并 colspan='2' :横列合并）

<table border="1">
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>hobby</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>李晨浩</td>
            <td rowspan="2">看电影</td>
            <!--<td>看电影</td>-->
        </tr>
        <tr>
            <td>2</td>
            <td>冯俊</td>
            <!--<td>迟到</td>-->
        </tr>
        <tr>
            <td>3</td>
            <td colspan="2">大圣</td>
            <!--<td>玩棍儿</td>-->
        </tr>
        </tbody>
    </table>

1572873083384

form标签表单标签

用来提交表单中的数据

<form action="http://127.0.0.1:8001">
</form>

action属性：指定提交路径,提交到哪里去

form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径

input标签输入框

input标签，如果要提交数据，别忘了写name属性 例如：name='username' username='zhangjianzhi'

<input type="text">   普通文本输入框
<input type="password"> 密文输入框
<input type="submit" value="登录">  提交按钮  触发form表单提交数据的动作
<input type="reset"> 重置按钮 清空输入的内容
<input type="button" value="注册"> 普通按钮  不会触发form表单提交数据的动作
<input type="date">  时间日期输入框
<input type="file">  文件选择框
<input type="number">  纯数字输入框

单选框
    性别
    <input type="radio" name="sex" value="1">男  
    <input type="radio" name="sex" value="2">女
复选框(多选框)
    喜欢的明星:
    <input type="checkbox" name="hobby" value="1"> 波多 
    <input type="checkbox" name="hobby" value="2"> 小泽
    <input type="checkbox" name="hobby" value="3"> 仓井

我们使用下面的代码进行测试：

<form action="http://127.0.0.1:8001">
    请输入用户名：<input type="text" name="username">
    请输入密码：<input type="password" name="password">
    <input type="submit" value="提交">
    <input type="reset">
</form>

Form submission

顺利在socket端接收到我们输入的用户名和密码信息。

select下拉框标签

<!--单选下拉框-->
<select name="city" id="city">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">惠州</option>

</select>
<!--多选下拉框-->
<select name="citys" id="citys" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">惠州</option>
</select>

操作多选下拉框，需要按住ctrl键进行多选。

Drop-down box

textarea 多行文本输入框

<textarea name="comment" id="comment" cols="20" rows="10"></textarea>

textarea

css

称为层叠样式表（Cascading Style Sheet）

css样式引入方式

1. head标签中引入

在日常，我们常用这个方法进行调试。这样可以避免经常切换文件。

<style>
    /* 选择器{css属性名称:属性值;css属性名称:属性值;} */
    div{
        /* css注释 */
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

2. 外部文件引入

这是我们工作中常用的一种css样式引入方式。

将css样式和html内容分开写，有利于后期的维护和修改。

首先，我们需要创建一个css文件，也就是stylesheet文件，比如test.css文件

然后，我们在css文件中写入css样式：

div{
    /* css注释 */
    width: 200px;
    height: 200px;
    background-color: red;
}

在想使用这些css样式的html文件的head标签中写上下面的内容：

<link rel="stylesheet" href="test.css">

href对应的是文件路径。

3. 内联样式

直接把样式写到标签中。这种写法不推荐，但有时能方便地解决一些问题。

<div style="background-color: red;height: 100px;width: 100px;"></div>

css选择器

基本选择器

元素选择器

div{width:100px;}
标签名称{css属性:值}

id选择器

html示例代码:
    <div id="d1">

    </div>
css写法:
    #d1{
        background-color: green;
        width: 100px;
        height: 100px;
    }

类选择器

html代码:
<div id="d1" class="c1">
    李晨浩
</div>

<div id="d2" class="c2">
    李海煜
</div>

<div id="d3" class="c1">
    张建志
</div>

css写法
.c1{
    background-color: green;
    width: 100px;
    height: 100px;
}

Attribute selectors

HTML代码
<div id="d1" class="c1" xx="ss">
    李晨浩
</div>

<div id="d2" class="c2" xx="kk">
    李海煜
</div>

css写法:
[xx]{  属性查找
    background-color: green;
    width: 100px;
    height: 200px;
}

[xx='ss']{ 属性带属性值查找
    background-color: green;
    width: 100px;
    height: 200px;
}

Descendant selectors

The basic format is:

父级选择器 后代选择器{样式}

All descendants of the style will be set at the parent level, for example:

html代码示例:
    <div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.chenhao.com">李晨浩</a>
        </span>
    </div>

    <div id="d2" class="c2" xx="kk">
        <a href="http://www.chenhao.com">李海煜</a>

    </div>

    <div id="d3" class="c1">
        张建志
    </div>
    <a href="http://www.chenhao.com">xxxxxxx</a>
css代码:
    div a{  
        color:orange; /* 字体颜色 */
    }

Combination selector (Comma connector)

html代码
    <div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.chenhao.com">李晨浩</a>
        </span>
        <span>
            <span>xxx222</span>
        </span>
    </div>

    <div id="d2" class="c2" xx="kk">
        <a href="http://www.chenhao.com">李海煜</a>

    </div>

    <div id="d3" class="c1">
        <a href="">张建志</a>
    </div>
    <a href="http://www.chenhao.com">xxxxxxx</a>

    <span>官人,你好!</span>
    
css代码: 注意:a标签字体颜色设置,必须找到a标签才能设置
    #d1 a,#d3 a{
        background-color: pink;
        color:yellow;
    }

1572923773022

operation:

1.注册页面，需要包含：头像（文件上传）、用户名、密码、邮箱、性别、爱好、自我介绍
2.登录页面，需要包含：用户名、密码。

day38 HTML basis