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 标签里的内容是一些特殊的属性：
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> 段落标签 占一行
3 <span></span> 标签，是行内标签，不换行
说到这里我们可以为所有的标签根据是否占一行来分类：
1 块级标签，不管多少字都占一行 例如： h 系列 b 标签
我们来写一个简单的文件看一下他们的区别：
<!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> 也是一个白板，但是是行内标签
还有，标签之间是可以镶嵌的：
让我们来个小结：
写了这么多全是看得见的东西，让我们写一个可以输入的东西吧，写一个登陆的小程序：
<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>
这样我们看到的网页是这个样子的，当点击提交以后会出现一个表单数据，是以一个字典方式提交的，服务器就是从这里取数据的。
加入请求方式 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 提交：
服务端相应：
当然表单也是可以提交给别人的：
<!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>
这样做出的网页是直接用搜狗搜索的
做一个小总结：
默认值：
上传文件依赖于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 定义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标签的跳转属性：
例子：
<!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 可以重复
图片标签：
效果：
总结一下：
列表标签：
两种：
效果：
实践：
<!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 就会能输入
CSS 可以给白板来着色：
如果标签是i1 就会应用这个样式
虽然这样可以，但是不规范，id都一样了，在html 中 id 是不能一样的！！
第三种方法： {最最最常用}
这里又引出了一个名词：
意思是找到本页所有的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>
不然就下不来了，出现错版
效果：
这种就是默认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/ 说明:此处只是记录阅读前端基础 ...
随机推荐
- Django之model基础（查询补充）
学习完简单的单表查询外,是远远不够的,今天我们对查询表记录做一个补充,接下来来看看基于对象的跨表查询.基于双下划线的跨表查询,聚合查询和分组查询,F查询与Q查询. 比如我们有如下一张表,在model中 ...
- JAVA继承与使用
说来惭愧,java学完已经两年了,开发也已经做了快一年了,现在才基本了解继承怎么用,平时都是在一个类中乱写一气.现在感觉原来学的知识真正运用起来还是具有一定的差距.希望能够先夯实基础,共勉.写一下自己 ...
- Callable的简单使用
说起java的线程操作,都会想到Thread和Runable这两个, 这两个类可以实现异步和同步. 在大多数的java开发中, 这两个都是实现异步的线程来使用, 但是现在考虑一种情况: 发出一条线程, ...
- oracle最高账号sys的密码认证模式
CONNECT USERNAME/PASSWORD@SERVERNAME AS SYSDBAconnect 是指连接到username是指用户名password是指密码servername是指服务名a ...
- C++中调用Python脚本(转载)
转载▼ 标签: 杂谈 C++中调用Python脚本的意义就不讲了,至少你可以把它当成文本形式的动态链接库,需要的时候还可以改一改,只要不改变接口, C++的程序一旦编译好了,再改就没那么方便了先看Py ...
- Codeforces Round #324 (Div. 2) A B C D E
A,水题不多说. #include<bits/stdc++.h> using namespace std; //#define LOCAL int main() { #ifdef LOCA ...
- C语言 数组名不是首地址指针
今天上计算机系统课的时候老师讲到了C中的聚合类型的数据结构.在解释数组名的时候说"数组名是一个指针,指向该数组的第一个元素",附上ppt(第二行): 我觉得这是不正确的,是一个常见 ...
- 自建ssr（谷歌云免费试用一年）
近期我一个朋友的VPN到期了,他也不想再去续费,同时发现谷歌云第一年申请时是免费的,所以他就自己搭建了一个自己专属的VPN 以下是他的搭建教程: 本教程难点在于申请免费试用资格 谷歌云+ssr搭建免 ...
- WordPress免费清新响应式博客/杂志/图片三合一主题Nana
WordPress免费清新响应式博客/杂志/图片三合一主题Nana 一.主题安装须知 1.本主题必须安装文章点击统计插件:WP-PostViews,可以直接在后台插件→安装插件中直接搜索安装官方最新版 ...
- Oracle 分区表的索引、分区索引
对于分区表,可以建立不分区索引.也就是说表分区,但是索引不分区.以下着重介绍分区表的分区索引. 索引与表一样,也可以分区.索引分为两类:locally partition index(局部分区索引). ...