Day12 前端html
前端基础之HTML
老师博客:
http://www.cnblogs.com/yuanchenqi/articles/6835654.html
http://www.cnblogs.com/yuanchenqi/articles/6856399.html
html:静态的内容都是一个html标签,是有一组组标签构成的文件
css:对一个个标签做渲染定位
js:所有页面的动态效果做渲染定位
当写一个简单服务端的时候,一般这样写:
主要的是这:conn.send=("HTTP/1.1 201 OK \r\n\r\n %s" %response).encode("utf-8")
\r\n\r\n:后面的内容才是发给客户端的,这里\r\n\r\n的含义就是告诉客户端,后面是要接收的内容
import socket sock=socket.socket()
sock.bind(("127.0.0.1",10001))
sock.listen(5) while 1:
print("waiting")
conn,addr=sock.accept()
data=conn.recv(1024)
print("data",data)
with open("index.html",encoding="utf-8") as f:
response=f.read()
conn.send=("HTTP/1.1 201 OK \r\n\r\n %s" %response).encode("utf-8")
conn.close()
2开头:成功
3开头:重定向
4开头:文件有问题
5开头:服务器故障
HTML结构:
<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档,在它们之间是文档的头部<head>和主体<body>。
<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。
<title></title>定义网页标题,在浏览器标题栏显示。
<body></body>之间的文本是可见的网页主体内容
<head>内常用标签:
meta介绍
<meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部,不包含任何内容。
<meta>提供的信息是用户不可见的
meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
(1)name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #网站搜索的关键字 <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的"> #网站首页的介绍
(2)http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号,分别在秒数的前面和网址的后面)
#做跳转的,几秒后跳转到哪个网页
<meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
非meta标签:
<title>oldboy</title>
<link rel="icon" href="http://www.jd.com/favicon.ico"> #标签上显示的小图片
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
标签:(分为两类,块级(boack)标签和内联(inline)标签)
渲染规则:从上到下,从左到右
block(块级):自己独占一行
inline(内联):自己不独占一行
块级标签可以嵌套内联标签和块级标签。
内联标签只能嵌套内联标签。
基本标签:
块级标签:
<h1>:从1级到6级标签,都可以使用
<p>:段落(内部可调属性)
<br>:换行
内联标签:
<a href="https://www.baidu.com">click</a>:跳转标签
<img src="图片地址" title=“当你将鼠标放在图片上想要显示的内容”>
<b>和 <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<div></div>和<span></span>:没有什么效果
常用标签:
<img src="图片地址" alt=“加载错误时显示的内容” title=“当鼠标悬浮是显示的内容”
width="100px" height="100px">
<a href="https://www.baidu.com">点击</a>
<a href="https://www.baidu.com" target="_blank">点击</a>
#中间的文字可以换成其他对象
<a href="https://www.baidu.com" target="_blank">
<img src="图片地址" alt=“加载错误时显示的内容” title=“当鼠标悬浮是显示的内容”
width="100px" height="100px">
</a>
#点击按钮跳转到别的网页
<a>标签的锚功能:
<a href="#c1">1</a>
<a href="#c2">2</a>
<a href="#c3">3</a> <div style="height: 500px;background-color: green" id="c1">第一章</div>
<div style="height: 500px;background-color: wheat" id="c2">第二章</div>
<div style="height: 500px;background-color: gray" id="c3">第三章</div> #上面写的利用href="#名字"来进行跳转
#下面定义的模块里边id里边有名字
#返回顶部的话可以利用空<a href="">返回顶部</a>来执行
无序列表:
<u1>
<li>111</li>
<li>111</li>
<li>111</li>
</u1>
有序列表:
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
自己定义列表:
<dl>
<dt>河北省</dt>
<dd>保定市</dd>
<dd>衡水市</dd>
</dl>
表格标签<table>:
#<tr>:一行的标签,
<td>:一列的标签
#border:边框
#cellpadding:字体距离边框的距离
#cellspacing:边框距离边框的距离,一般利用="*px"来调试
#让一个单元格独占几行或者几列:在<td>标签里边写:
rowspan:单元格竖跨多少行
colspan:单元格横跨多少列(合并单元格)
<table border="1px">
<tr>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
</tr>
</table>
form表单标签:与server端交互
url == IP+port+路径+子页+?(当有问号时侯斌就是数据了)
<form action="" method="..." >
数据
</form>
#method:这里有两种方式的数据可以填,put 和 get,但是get的时候,会将数据放在url后边的数据里边去,如果是put,会将数据放到form表单里边的数据里边。
表单的数据可以写成:
<p>姓名:<input type="text" name="useradmin" ></p>
<p>密码:<input type="password" name="pwd"></p>
<p>性别:<input type="radio" name="gender" value="1">男 <input type="radio" name="gender" value="0">女</p>
<p>爱好:<input type="checkbox" name="hobbies" value="basketball" checked>足球 <input type="checkbox" name="hobbies" value="football">蓝球 <input type="checkbox" name="hobbies" value="doublecolorball">双色球 </p>
#当有checked这个选项的时候,默认会将有将checked的打钩 <p>上传:<input type="file"></p>
#需要在表单<form>属性里边添加 enctype="multipart/form-data" <p><input type="reset"></p>
#将页面内容刷新 <p><input type="button" value="按钮" onclick="alert(1234)"></p>
#定义一个按钮,可以绑定事件,后边的onclick就相当于一个事件
<p>提交<input type="submit"></p>
#提交按钮 #数据会以键值对来发送,是以后边name来定义的
#单选是利用radio类型来使用的,后边可以利用value跟上值
#复选框是利用checkbox来执行,后边可以利用value跟上值
select标签:下拉菜单
<select name="province" size="3" multiple="multiple">
#size是默认显示几个,multiple的意思是可不可以多选
<option value="1">河北省</option>
<option value="2">湖北省</option>
<option value="3">湖南省</option>
<option value="4" selected="selected">日本省</option>
</select>
#<option value="4" selected="selected">日本省</option>当标签里边有selected的时候,默认会显示这个标签。
文本框:
<textarea name="wenben" id="" cols="30" rows="10"></textarea>
可以在<p>和<texttarea>等属性中加入placeholder="wenben",这会显示一个默认灰色的字体,作为提醒用。
点击前面对应的数字跳转到后边的文本框:
<p>
<label for="c1">姓名:</lable>
<input type="text" name="useradmin" id="c1">
</p>
相当于点击上面的姓名自动跳转到后面c1对应的文本框
Day12 前端html的更多相关文章
- Python之路day12 web 前端(HTML+ css)
HTML文档 文档树: Doctype Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 有和无的区别 BackCompat:标准兼容模式未开启(或叫怪异模式[Quirk ...
- day12 python函数名的应用 闭包 迭代器
day12 python 一.函数名的应用(是第一类对象) 函数名的命名规范和变量是一样的 函数名其实就是变量名 def func(): print('i am funct ...
- day12 form组件
day12 form组件 今日内容 form组件前戏 form组件基本定义 form组件数据校验功能 form组件渲染标签 form组件提示信息 数据校验进阶 form组件补充 form组件源码探索 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 总结:Mac前端开发环境的搭建(配置)
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
- Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
随机推荐
- ECMAScript 6之Set和Map数据结构
Set 基本用法 ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2, ...
- Sprite添加阴影摇摆动画(Unity3D开发之九)
猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=575 今天看到一个很简单的摇摆动 ...
- java造成内存泄露原因
一.Java内存回收机制 不论哪种语言的内存分配方式,都需要返回所分配内存的真实地址,也就是返回一个指针到内存块的首地址.Java中对象是采用new或者反射的方法创建的,这些对象的创建都是在堆(He ...
- 并发编程(二):分析Boost对 互斥量和条件变量的封装及实现生产者消费者问题
请阅读上篇文章<并发编程实战: POSIX 使用互斥量和条件变量实现生产者/消费者问题>.当然不阅读亦不影响本篇文章的阅读. Boost的互斥量,条件变量做了很好的封装,因此比" ...
- PHP解决中文乱码问题
初学PHP,在汉字页面间传输和转换的时候,遇到了中文乱码问题. 究其原因乱码无外乎以下几种情况: 1.html页本身的乱码问题, 解决方法:纯html页使用<meta http-equiv=&q ...
- C++ Primer 有感(标准库set类型)
set容器只是单纯的键的集合,键必须为一.set容器不支持下标操作,而且没有定义maped_type类型.在set容器中,value_type不是pair类型,而是与key_type类型相同的类型. ...
- 单点登录之CAS SSO从入门到精通(第三天)
开场白 各位新年好,上海的新年好冷,冷到我手发抖. 做好准备全身心投入到新的学习和工作中去了吗?因为今天开始的教程很"变态"啊,我们要完成下面几件事: 自定义CAS SSO登录界面 ...
- SpriteBuilder改变布局后App运行出错代码排查
原来整个关卡场景放在GameScene.ccb中,后来觉得移到专门的Level.ccb比较好. 移动过后编译运行,只要移动Player的胳膊发射子弹时,Xcode报错: g due to Chipmu ...
- Andriod 安全之Windows下CTS自动化测试环境的搭建
原文出处:http://blog.csdn.net/sk719887916/article/details/48050997 安卓应用离不开性能测试,也离不开安全测试,CTS是常用的安全测试工具,开发 ...
- Android For JNI(四)——C的数组,指针长度,堆内存和栈内存,malloc,学生管理系统
Android For JNI(四)--C的数组,指针长度,堆内存和栈内存,malloc,学生管理系统 好几天每写JNI了,现在任务也越来越重了,工作的强度有点高,还有好几个系列的博客要等着更新,几本 ...