前端基础之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的更多相关文章

  1. Python之路day12 web 前端（HTML+ css）

    HTML文档 文档树: Doctype Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 有和无的区别 BackCompat:标准兼容模式未开启(或叫怪异模式[Quirk ...

  2. day12 python函数名的应用 闭包 迭代器

    day12 python   一.函数名的应用(是第一类对象)     函数名的命名规范和变量是一样的     函数名其实就是变量名 def func():     print('i am funct ...

  3. day12 form组件

    day12 form组件 今日内容 form组件前戏 form组件基本定义 form组件数据校验功能 form组件渲染标签 form组件提示信息 数据校验进阶 form组件补充 form组件源码探索 ...

  4. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  5. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  6. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  7. 总结：Mac前端开发环境的搭建（配置）

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  8. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  9. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

随机推荐

  1. 秒懂ASP.NET中的内置对象

    上篇博客,小编主要简单的介绍了一下ASP.NET中的控件,这篇博客,小编主要简单总结一下ASP.NET中的内置对象,七个内置对象分别是:Request.Response.Application.Coo ...

  2. (NO.00003)iOS游戏简单的机器人投射游戏成形记(一)

    这是一个简单的机器人投射游戏,主要来熟悉物理引擎的一些东西.你可以把它认为是机器人投篮;尽管投出的是抛物线,但不是篮球而是子弹,速度也较快. 游戏玩法是玩家选择机器人,移动机器人手臂瞄准篮框,然后发射 ...

  3. Android万能适配器Adapter-android学习之旅(74)

    万能适配器的代码的github地址是https://github.com/fengsehng/CommonAdapter 万能适配器的代码的github地址是https://github.com/fe ...

  4. Leetcode_66_Plus One

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41652987 Plus One Given a non-n ...

  5. Android之BaseAdapter的优雅实现

    在android的开发过程中,我们不可避免的要使用ListView来展示我们的Activity上面的内容.你可以使用很多种方式来实现这一功能,但是如何优雅快速的来实现呢?这就是我要写的了,既为了大家共 ...

  6. UILabel-UITextField-UIBotton&nbsp;UI_…

    注意:AppDelegate是类,所以self在这个类中指的就是AppDelegate对象 - (BOOL)application:(UIApplication *)application didFi ...

  7. 7、Libgdx网络操作

    (官网:www.libgdx.cn) Libgdx包含了一些跨平台的网络操作类,这些类在Gdx.net中. 特性 跨平台HTTP请求 多平台TCP C/S Socket支持(可配置) TCP C/S优 ...

  8. Android中显示gif动态图片

    在android中显示一个静态图片比如png jpg等等都很方便,但是如果要显示一个gif 动态图片就需要进行一些处理. 本文是采用自定义view 然后进行重新onDraw方法来实现 首先自定义Vie ...

  9. 【Unity Shaders】Diffuse Shading——向Surface Shader添加properties

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  10. Mahout系列之-----相似度

    Mahout推荐系统中有许多相似度实现,这些组件实现了计算不能User之间或Item之间的相似度.对于数据量以及数据类型不同的数据源,需要不同的相似度计算方法来提高推荐性能,在mahout提供了大量用 ...