day14 前端基础 HTML

时间  2019-12-14
标签 day14 day 前端 基础 html 栏目 HTML 繁體版
原文   原文链接

从今天开始，学习前端基础。css

前端，就是HTML CSS JS 等html

对于咱们这种初学者，并不知道这些专业术语都是什么，给你们举一个形象的例子：前端

HTML  就是一我的，赤裸裸的人python

CSS    就是衣服，用来给人装扮的衣服，能够装扮的很漂亮web

JS       就是让人动起来，否则人就是一个木头人，没法动弹，只有经过这个才可让这我的变得活动起来。chrome

 

 

想知道前端和后端是如何交互的吗？数据库

我也是第一次知道，感受很好玩，我给你们作个demo 来演示一下客户端是如何经过浏览器和服务器交互的小程序

服务器端：后端

#!/usr/bin/env python3
# Author: Shen Yang
import socket

def handle_request(client):
    buf = client.recv(1024)
    client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding='utf-8'))
    f = open('index.html', 'r', encoding='utf-8')
    data = f.read()
    f.close()
    import time
    r = str(time.time())
    data.replace('@@@@@',r)
    re=data.encode()
    client.send(re)

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('192.168.1.27', 8000))
    sock.listen(5)
    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == '__main__':
    main()

 

 

很好，咱们完成了一个最基本的socket server 端浏览器

 

 

 

好了，说了这些，相信你们已经能理解了。下面从HTML 开始

HTML 就是一套规则，是浏览器认识的规则,浏览器会根据相应的标签，来渲染对应方式的网页。

若是想开发HTML 网页，就要学习这套规则，咱们写html 写好一个模板，而后经过后端程序去查询数据库把获取的结果放到对应的位置，这样就成了动态网页了。

 

HTML 怎么测试呢？很简单，写好文件直接使用浏览器打开便可，也能够经过pycharm 来打开这个页面，效果都同样。

一个HTML 文件都有什么呢？

1 头部 head，和人同样，须要有头

2 身体 body，同上

 

 记住，一个HTML 文件只有一个html 标签，第一行的意思是要说明这个html文件遵循的是什么标准，由于浏览器不少，因此有不少不一样的标准，可是目前你们都遵循这个标准，因此之后写html就写上这一行就能够了。

 

这个标签里的意思是html 的属性，lang 是说使用en 语言

head 标签里的内容是一些特殊的属性：

<meta charset='UTF-8'>  指定字符集
在head 标签写的东西外面都是不可见的除了title 标签
 

body 里写网页的主题内容，就是咱们人类可见的信息。

 

html 注释的方法是 ：

<!DOCTYPE html>
<!-- 这里是注释
相似于html 这种尖括号的东西叫作标签，里面的东西就是标签的属性 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">百度一下</a>
</body>
</html>

 

 其实html 标签按大的分类 分为两种：

1 自闭合标签

2 主动闭合标签

 

可是之后建议写标签的时候全写为主动闭合标签，这样在查找和修改的时候是很方便的。

 

先说自闭合标签：

1 指定字符集

   <meta charset='UTF-8'>  

2 刷新和跳转

 这个不经常使用，很差，看不到有几秒  救急用

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

3 关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

4 描述

例如：cnblogs

5 X-UA-Compatible 兼容IE 的设置，若是不关心IE 下的效果的就不用写

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

6 icon  网站在浏览器中的小图标

 

自闭合标签基本就这些，下面开始学习重要的主动闭合标签，这些标签是咱们最经常使用的标签，咱们在写html的时候用的最多的就是这些标签：

1 <p></p>  段落标签 占一行

   <br>   换行 放在段落里虽然是换行，可是这个段落仍是一个段落
 
2 <h1></h1>   最大的 标题 最小h6

 

3 <span></span>  标签，是行内标签，不换行

 

说到这里咱们能够为全部的标签根据是否占一行来分类：

1 块级标签，无论多少字都占一行          例如： h 系列   b 标签

2 行内标签，只占用本身大小的位置       例如： span 标签

咱们来写一个简单的文件看一下他们的区别：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人小站</title>
</head>
<body>
<p>这里是一个段落<br/>这是一个段落</p>
<p>新的段落</p><p>新的段落2</p>
<h1>最大的标题，无论标题文字多少，都占用一行</h1>
<h2>第二大标题，无论标题文字多少，都占用一行</h2>
<span>行内标题，标题多大占用多大</span>
</body>
</html>

 

继续说主动闭合标签：

4 <div></div> 是一个白板，可是是块级标签   用的最多， 经过css 能够来回转换为span 等

  <span></span>  也是一个白板，可是是行内标签

 

还有，标签之间是能够镶嵌的：

 

标签存在的意义就是查找特定标签
定位的时候好定位，这样咱们在使用 js css 装饰html的时候直接找id 就行

 

让咱们来个小结：

 

写了这么多全是看得见的东西，让咱们写一个能够输入的东西吧，写一个登录的小程序：

<body>
    <input type="text" name="user"/>
    <input type="text" name="email"/>
    <input type="password" name="pwd"/>
    <input type="submit" value="提交"/>
</body>

打开是这样的:

能够输入信息，能够点提交，可是咱们并不知道要提交到哪里，并不能看到如何和服务器交互。

其实想和服务器交互是须要提交数据给服务器的，html 会把这里的数据以一个字典的形式发送给服务器。

因此咱们须要把这段代码用form 包裹起来，并指定要提交的服务器及提交的方式：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://192.168.16.35:8888/index" method="POST">
    <input type="text" name="user"/>
    <input type="text" name="email"/>
    <input type="password" name="pwd"/>
    <input type="submit" value="提交"/>
    </form>

</body>
</html>

这样咱们看到的网页是这个样子的，当点击提交之后会出现一个表单数据，是以一个字典方式提交的，服务器就是从这里取数据的。　　

提交用 submit 
默认button 什么功能也没有

 

加入请求方式 POST

若是是GET  会把提交的数据拼接到url 中提交到服务器中

就是把数据放到了请求头中发送

POST 就会把数据放到请求信息中，即放到内容中
 
 
请记住一点：
GET POST 只是体现形式不同 ， 没有安全不安全一说

 

写一个helloworld 服务端和客户端，使用chrome 来请求，让咱们看下服务器是如何和浏览器交互的：

server：

import tornado.ioloop
import tornado.web
# pip3 install tornado
class MainHandler(tornado.web.RequestHandler):
    def get(self):
        print(111)
        u = self.get_argument('user')
        e = self.get_argument('email')
        p = self.get_argument('pwd')
        if u == 'yang' and p == '123' and e == 'yang@qq.com':
            self.write("OK")
        else:
            self.write("滚")
    def post(self, *args, **kwargs):
        u = self.get_argument('user',None)
        e = self.get_argument('email',None)
        p = self.get_argument('pwd',None)
        print(u,e,p)
        self.write('POST')
application = tornado.web.Application([
    (r"/index", MainHandler),
])
if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

启动

 

客户端网页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://192.168.1.27:8888/index" method="GET">
    <input type="text" name="user"/>
    <input type="text" name="email"/>
    <input type="password" name="pwd"/>
    <input type="submit" value="提交"/>
    </form>
</body>
</html>

 

打开这个网页，输入数据，提交

GET 方式：

能够看到数据是从url 中提交的：

 

服务器端的响应：

 

使用POST 提交：

服务端相应：

 

 

input 系列：
 input type='text'          #文本
 input type='password'  #密码
 input type='submit'      #提交按钮，提交表单
 input type='button'       #按钮

 

固然表单也是能够提交给别人的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Yang 搜索！搜天下</h1>
    <form action="https://www.sogou.com/web">
            <input type="text" name="query"/>
            <input type="submit" value="搜索" />
    </form>
</body>
</html>

 

这样作出的网页是直接用搜狗搜索的

 

input 框写value 是默认值

 

radio选择：
单选框
name 都同样就不能全选了

服务器没法识别到底选择的是哪一个
加入value  才能够识别

 

多选框：
checkbox

 

作一个小总结：

默认值：

 

 

上传文件：
input type='file'

 上传文件依赖于form 的属性 ，form 加上这个属性

 

重置按钮：
用户选的不想选了能够点重置，把本身写的东西还原为原来的样子

实践一个完整的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            用户：<input type="text" name="user"/>
            密码：<input type="text" name="pwd"/>
            <p>请选择性别：</p>
            男：<input type="radio" name="gender" value="1" checked="checked"/>
            女：<input type="radio" name="gender" value="2"/>
            <p>爱好</p>
            篮球：<input type="checkbox" name="favor" value="1"/>
            足球：<input type="checkbox" name="favor" value="2"/>
            台球：<input type="checkbox" name="favor" value="3"/>
            网球：<input type="checkbox" name="favor" value="4"/>
            <p>技能</p>
            撩妹：<input type="checkbox" name="skill" value="1"/>
            写代码：<input type="checkbox" name="skill" value="2"/>
            <p>上传文件</p>
            <input type="file" name="fname"/>
        </div>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

效果：

 

多行数据：

 

下拉框：

<select>
          <option>上海</option>
           <option>上海</option>
           <option>上海</option>
</select>

 

 取数据：

能够选择size  就会变样式，通常用于多选
多选 multiple

 

分组：

select 定义name  option 定义value 就能够提交到后台了

 

 实践一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
           <select name="city">
                <option value="1">上海</option>
                <option value="2">北京</option>
                <option value="3">广州</option>
            </select>
            用户：<input type="text" name="user"/>
            密码：<input type="text" name="pwd"/>
            <p>请选择性别：</p>
            男：<input type="radio" name="gender" value="1" checked="checked"/>
            女：<input type="radio" name="gender" value="2"/>
            <p>爱好</p>
            篮球：<input type="checkbox" name="favor" value="1"/>
            足球：<input type="checkbox" name="favor" value="2"/>
            台球：<input type="checkbox" name="favor" value="3"/>
            网球：<input type="checkbox" name="favor" value="4"/>
            <p>技能</p>
            撩妹：<input type="checkbox" name="skill" value="1"/>p
            写代码：<input type="checkbox" name="skill" value="2"/>
            <p>上传文件</p>
            <input type="file" name="fname"/>
            <textarea name="meno">请文明发言，否则会封禁你的IP</textarea>
            <select name="df" multiple="multiple" size="2">
                <option>昌平</option>
                <option>昌平2</option>
                <option>昌平3</option>
            </select>
        </div>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

　　

 

 a标签的跳转属性：

 

 a标签有两个做用：
1 跳转
2 锚点
 
锚点 能够指定打开的网页位置

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <select name="city">
                <option value="1">上海</option>
                <option value="2">北京</option>
                <option value="3">广州</option>
            </select>
        </div>
        <a href="#i1">第1个目录</a>
        <a href="#i2">第2个目录</a>
        <a href="#i3">第3个目录</a>
        <a href="#i4">第4个目录</a>
        <div id="i1" style="height: 600px;">第1个</div>
        <div id="i2" style="height: 600px;">第2个</div>
        <div id="i3" style="height: 600px;">第3个</div>
        <div id="i4" style="height: 600px;">第4个</div>
    </form>
</body>
</html>

 

 

在html 中 id 是不能重复的，name 能够重复

图片标签：

图片跳转： 
包到a标签里就好了

 

alt="没有"        #没有图片会显示：
title="大美女"   #鼠标放到图片会显示的标题

 

 

效果：

 

 

总结一下：

 

 

 
列表标签：

 两种：

效果：

表格：
<table>
</table>

 

 

实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>主机</td>
        <td>端口</td>
        <td>操做</td>
    </tr>
    <tr>
        <td>192.168.1.1</td>
        <td>80</td>
        <td>
            <a href="#">删除</a>
            <a href="#">详细</a>
        </td>
    </tr>
    <tr>
        <td>192.168.1.2</td>
        <td>88</td>
        <td>
            <a href="#">删除</a>
            <a href="#">详细</a>
        </td>
    </tr>
</table>
</body>
</html>

 

上面的不规范，规范的就是分表格的表头和表身

 

 

单元格合并：
想占几格就写几
左右占几列：（横向合并）

 

上下占几行：（纵向合并）

 

实践：
合并行： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
        <tr>
            <td>主机</td>
            <td>端口</td>
            <td>操做</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">192.168.1.1</td>
            <td>80</td>
            <!--<td>-->
                <!--<a href="#">删除</a>-->
                <!--<a href="#">详细</a>-->
            <!--</td>-->
        </tr>
        <tr>
            <td>192.168.1.2</td>
            <td>88</td>
            <td>
                <a href="#">删除</a>
                <a href="#">详细</a>
            </td>
        </tr>
            <tr>
            <td>192.168.1.3</td>
            <td>99</td>
            <td>
                <a href="#">删除</a>
                <a href="#">详细</a>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

 

 合并列：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
        <tr>
            <td>主机</td>
            <td>端口</td>
            <td>操做</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">192.168.1.1</td>
            <td>80</td>
            <td>
                <a href="#">删除</a>
                <a href="#">详细</a>
            </td>
        </tr>
        <tr>
            <!--<td>192.168.1.2</td>-->
            <td>88</td>
            <td>
                <a href="#">删除</a>
                <a href="#">详细</a>
            </td>
        </tr>
            <tr>
            <td>192.168.1.3</td>
            <td>99</td>
            <td>
                <a href="#">删除</a>
                <a href="#">详细</a>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

 

label 标签：
经过关联id 实现点用户名那个字也能输入的效果

 点label 就会能输入

 
 
HTML 到这里基本差很少了，咱们再来搞点CSS：
 
 
咱们在制做网页的时候首先要对网页作分解，即：
一个网页通常分为三部分 ，头部，身体 尾部

 

CSS 能够给白板来着色：

颜色 RGB 颜色对照表
颜色可用经过chrome 查看别人的颜色也能够选择各类颜色的对应的代码
 
 
先设置头部效果：

 

 
CSS 有两种写的方式：
1 直接写
 

 

2 头部写
 

 若是标签是i1 就会应用这个样式

 

 虽然这样能够，可是不规范，id都同样了，在html 中 id 是不能同样的！！

 

第三种方法：  {最最最经常使用}

 
而后标签里写：
class

 

这里又引出了一个名词：

选择器 {所有写在head 中}
1 id选择器     #
2  类选择器    . 
3 标签选择器 dev
4 层级选择器
5 组合选择器

 

完整书写方法：

 

 
 css 注释 /*  */
 
 
 head里写：

意思是找到本页全部的div 并设置对应的颜色，无论你在几层里，都会设置

 

 span 下面的全部div 标签给渲染了

 

类和层级的混合选择：

 意思是查找 class="c1" 的标签下的 div 标签

 

组合选择器：

能够选择多个，class等都是这样使用

 

 

属性选择器：

 

把type为text 属性的标签所有渲染

属性能够自定义:

根据标签里的属性再作一次筛选

 

总结：

 .

 

CSS  样式的优先级：

 

 

 

引入文件中的样式：
全部的其余文件均可以引入这个文件，重用性最好的：

 

 

 默认给你把上下左右都加上了，也能够单独加不一样的边

 

 

指定长宽等：

固然，也能够经过百分比来调整

 

水平居中：

 

水平和上下都居中，加上line-height

line-height 的意思为设置文字在那个像素之间垂直居中

 

 加粗：

 

实践：

<dev style="border: 2px solid deepskyblue;
            height: 48px;
            width: 200px;
            text-align: center;
            color: palevioletred;
            font-size: 25px;
            font-weight: bold;
            ">This is my name</dev>

效果：

 

float

飘起来,定义从哪里飘，飘的位置：

也能够另外一个从右边开始飘，这样中间就会留下一个空白

若是超过百分之多少就另起一行

 

重要的一点，飘起来后的结尾必定要添加：

<div style="clear: both;"></div>

否则就下不来了，出现错版

 

 

 

 

 

改造div 或者span 为想要的展现方式

效果：

 

注意：
行内标签：
     没法设置高度 宽度， padding  margin
块级标签：
     没问题
 
 
让指定的div消失：

这种就是默认display = none  当点的时候就会显示：

 

离上边的高度有多少：

针对内部的来看 是他的外部增长了多少

 

 

 

 
里面的上面的边距变粗了。。
内部仍是那样 

 

 

 

 
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程