day14 前端基础 HTML

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

前端，就是HTML CSS JS 等

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

HTML 就是一个人，赤裸裸的人

CSS 就是衣服，用来给人装扮的衣服，可以装扮的很漂亮

JS 就是让人动起来，不然人就是一个木头人，无法动弹，只有通过这个才可以让这个人变得活动起来。

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

我也是第一次知道，感觉很好玩，我给大家做个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 标签里的内容是一些特殊的属性：

在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 指定字符集

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>

取数据：

可以选择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 当点的时候就会显示：

离上边的高度有多少：

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

里面的上面的边距变粗了。。

内部还是那样

day14 前端基础 HTML的更多相关文章

web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
html css 前端基础学习方法及经验分享
前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
前端基础之DOM和BOM
前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...
tableview前端基础设计（初级版）
tableView前端基础设计实现的最终效果操作目的:熟悉纯代码编辑TableView和常用的相关控件SearchBar.NavigationBar.TabBar等,以及布局和基本功能的实现. 一 ...
web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
JS BOM DOM对象 select联动计时器时间 css操作节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
前端基础进阶（五）：全方位解读this
https://segmentfault.com/a/1190000012646488 https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...

随机推荐

学习笔记：MDN的CSS
HTML用于定义内容的结构和语义,CSS用于设计风格和布局. CSS规则由选择器和声明块组成:声明由属性(properties)和属性值组成. CSS介绍: 盒=框=box,边界=border,内边距 ...
使用random函数实现randint函数的功能
首先说明一下 random函数是random模块中的一个函数首先要导入random模块 import random random函数的功能 #生成某一范围(0-1)内的随机小数print(rando ...
VMware Workstation Pro 14注册码，亲测可用
** VMware Workstation Pro 14注册码 ** 作者网上搜集整理作者使用的密钥是: AC5XK-0ZD4H-088HP-9NQZV-ZG2R4 亲测可用以下密钥未测试 CG5 ...
vue-cli建立的项目如何在手机端运行以及如何用charles来抓包
刚开始自己在config文件夹下的index.js中的dev下的host写成的是localhost,但是发现自己不能在手机端访问,并且也不可以在charles进行抓包处理,后来把localhost改成 ...
iOS中UIWebview中网页宽度自适应的问题
有的网页中会使用"<meta name="viewport" content="width=device-width, initial-scale=1.0 ...
Nodejs入门边读边想边记（-）
Node入门>>一本全面的Node.js教程网站地址:http://www.nodebeginner.org/index-zh-cn.html 本文记录我在阅读上面这个网站的过程中得到的一 ...
C#中split的方法汇总
字符串的处理往往离不开split方法,下面介绍几种split的用法: 1.对单个字符进行分割(注意这里是字符,不是字符串,故只能用单引号‘’) string s=abcdeabcdeabcde; st ...
腾讯云服务器手动和自动安装WordPress网站程序
如果我们需要建站的话,对于基础个人网站.博客建站选择基础的1Mbps带宽配置的1GB内存的腾讯云服务器还是够用的,且如果我们需要用来建网站的话可以手工添加程序,以及有些面板,比如宝塔面板是自带CMS程 ...
wamp端口冲突
因为端口冲突,Apache服务不能运行. 解决方法: 点击wamp图标 => Apache => use a port other than 80 => 输入新的端口,即可. 然后 ...
Linux 文件的压缩与解压
1. tar结尾压缩命令 [root@test ~]# tar -cvf grub.tar /boot/grub/ 查看压缩包文件 [root@test ~]# tar -vtf grub.tar ...

day14 前端基础 HTML

day14 前端基础 HTML的更多相关文章

随机推荐

热门专题