Web开发（二）HTML

  1. 前端概述

 

 1 import socket
 2 
 3 def main():
 4     sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
 5     sock.bind(('localhost',8089))
 6     sock.listen(5)
 7 
 8     while True:
 9         connection, address = sock.accept()
10         buf = connection.recv(1024)
11 
12         connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))
13 
14         connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))
15 
16         connection.close()
17 
18 if __name__ == '__main__':
19 
20     main()

 

HTML简述

概念

HTML（Hypertext Markup Language，超文本标记语言），html文件是文本文件

超文本：指超链接，就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素

标记语言：标记语言是一套标记标签 <> ，HTML 使用标记标签来描述网页的不同组成部分

作用

　　负责网页结构

　　网页==HTML文档，由浏览器解析，用来展示的

静态网页：静态的资源，如xxx.html

动态网页：html代码是由某种开发语言根据用户请求动态生成的

历史

 

 标签和元素

标签

  • 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
  • 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
  • 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
  • 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
  • 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

元素

一个完整的标签成为元素，通常标签 = 元素

元素间的关系：

　　父元素  子元素  兄弟元素   祖先元素（祖先元素包括父元素）  后代元素（后代元素包括子元素）

内联元素

特点：行内元素，只占自身大小的元素，不会独占一行，一行容不下会自动换行

常见内联元素：span  a  iframe  img

<span> </span> 

　　没有任何语义  

　　span用于选择文字，为其设置样式

块元素

特点：块元素独占一行 块元素主要用来对页面对局

常见块元素：div  p  h1  hr

<div></div>

　　没有任何语义，只是一个单纯的块元素

　　并且不会为其中的内容设置任何的默认样式

　　div元素主要用于页面布局

 

内联元素、块元素使用原则

 

一般使用块元素包含内联元素，而不使用内联元素去包含块元素

 

a标签可以包含任何元素（除了本身）

 

p标签不可以包含任何块元素

 

标签的属性

概念

  • 通常是以键值对形式出现的. 例如 name="alex"
  • 属性需要设置在开始标签 或 自闭和标签中.
  • 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
  • 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
  • 多个属性之间用空格隔开

 id

该属性可以作为标签的唯一标识（同一个页面中不能有重复的id值）

id属性值一般以字母开头

例如 <p id="hello"></p> ,如果超链接地址设置为“#hello”就会跳转到该p标签

Class 

用来为标签分组，相同class值的标签为一组

可以为一个标签指定多个class值，多个值之间用空格隔开

Title

用来指定标签的标题

可以给任何一个标签设置title属性，当鼠标移入该元素时会显示 title中的内容

Content

最简单的HTML页面

 1 <!DOCTYPE html>  
 2 <html>  
 3     <head>  
 4         <meta charset="utf-8" />  
 5        <title>这是网页标题</title>  
 6    </head>  
 7    <body>  
 8        <h1>这是一级标题</h1>  
 9     </body>  
10 </html>  

 文档声明

作用

　　用于声明当前网页的编写标准，方便浏览器解析网页（html4.0.1，xhtml1.0，html5）

为了兼容旧页面，浏览器有两种解析模式

　　标准模式（Standards Mode）

　　怪异模式（Quirks Mode），解析后的页面不正常显示，产生原因：未书写文档声明

语法

　　文档声明一定要写在网页的最上端，不区分大小写

　　html5的文档声明语法 <!doctype html>

html

<html></html>

一个页面有且只有一个根标签<html></html>，网页所有的内容都应写在根标签中

告诉浏览器这个文档包含的信息是用html编写的

子元素有  <head></head>   <body></body>

head

<head></head>

作用

　　head标签帮助浏览器解析页面，标签中的内容不会显示在网页中

　　用来表示网页的元数据，包含了浏览器和搜索引擎使用的其他不可见信息

用法：head是html的子标签，一个网页中只能有一个head

子元素：  <title></title>  <meta/>

body

<body></body>

作用：设置网页主体内容，所有页面中能看到的内容都应该编写到body标签中

用法：body作为html的子标签使用

title

<title></title>

作用

　　表示网页的标题，一般会在网页的标题栏显示

　　title标签中的文字是搜索引擎搜索时的第一位置，是页面优化的重要元素

用法

　　建议title标签紧贴在head后面编写，这样便于搜索引擎检索

　　网站中多个页面的title不应该重复，这样不利于搜索引擎检索

meta

<meta />

作用

　　提供有关页面的元信息（meat-information)

　　meta标签的属性用来定义与文档相关联的名称/值对

用法

　　meta是自结束标签

　　meta标签作为head的子标签使用

属性

　　字符集  <meta charset="utf-8" />

　　文档关键字  <meta name="keywords" content="关,键,字," />

　　文档描述  <meta name="desctiption" content="描述内容" />

　　（关键字和描述不会影响页面在搜索引擎中的排名）

　　重定向  <meta http-equiv="refresh" content="秒数;url=目标路径" />

注释

作用：帮助开发人员理解代码

而且：

　　注释中的内容不会在网页显示

　　注释不能嵌套

语法   <!-- 注释内容 -->

常用标签

标题标签

<h1></h1>

效果

　　在HTML中一共有六级标题标签（h1-h6），在显示效果上，h1-h6字号依次变小，但字号不是关注点

　　使用HTML标签时关注的时标签的语义，我们使用的标签都是语义标签

使用

　　搜索引擎检索完title，会立即查看 h1 标签中的内容，所以h1影响页面在搜索引擎的排名

　　一个页面只有一个h1

　　一般页面中的标题标签只有h1，h2，h3三种

段落标签

<p></p>

作用：用来表示一个段落

效果

　　标签中的文字默认独占一行，并且段落之间存在间距

　　在HTML中，字符间隔再多的空格、换行符，浏览器都会解析为一个空格

换行

<br></br>

作用：可以使br标签后的内容另起一行

分割线

<hr></hr>

作用：在页面中打印一条水平线

图片标签

<img/>

作用向网页中引入外部图片

语法：<img src=" ' alt=" " />

src: source,要显示图片的路径  其中../  表示返回上一级目录，可叠加使用

alt: 图片没有加载成功时的提示.（搜索引擎通过alt属性识别不同的图片）

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

常见图片格式：

JPEG（JPG）

　　支持的颜色多，可压缩，不透明

　　一般用于保存颜色丰富的图片

GIF

　　支持的颜色少，支持简单透明，支持动态图

　　用于颜色单一或动态图

PNG

　　支持的颜色多，支持复杂透明

　　用于颜色丰富的透明图片

　　IE6对png24格式的支持度不高，导致透明效果无法显示

　　解决方法1：使用png8格式代替png24，但是图片清晰度下降

　　解决方法2：在body的末尾引入外部js文件

1 <script type="text/javascript src="js/DD_belatedPNG_0.0.8a-min.js"></scrip  
2 <script type="text/javascript">  
3     DD_belatedPNG.fix('img');  
4 </script>  

 

图片选择原则

　　效果一致，使用小的

　　效果不一致，使用好的

超链接

<a></a>

作用

　　设置超链接：<a href="https://baike.baidu.com" target="_blank">百度百科</a>

该标签可以嵌套任何元素（除了本身）

属性

href
要连接的资源路径 ，可以是相对路径或绝对路径  格式如下:     href="http://www.baidu.com" 

target: 
_blank : 在新的窗口打开超链接. 
_self  在当前窗口打开（默认值）
_blank  在新窗口中打开
框架名称: 在指定的内联框架中打开链接内容.


name: 定义一个页面的书签.

用于跳转 href : #id.（锚）

应用

　　链接地址不确定时，可以暂时使用井号#代替，链接会跳转到当前页面顶部

　　链接地址设置为 #id值，会跳转到该id值所在的位置

　　链接设置为 "mailto:邮箱地址"，会自动打开计算机中默认的邮件客户端，方便发送邮件

 内联框架

<iframe></iframe>

作用

　　使用iframe创建一个内联框架，用于引入外部页面

　　开发中不推荐使用内联框架，内联框架中的内容不会被搜索引擎检索

属性

　　name属性用于给内联框架命名

　　src设置跳转链接

 

转义字符串

作用

　　在html中，一些特殊字符如 <  > 不能直接使用，需要用一些特殊符号（实体）代替表示，浏览器解析到实体时会自动转化为对应的特殊符号

语法

　　&实体名；

 

 

框架集标签

<frameset> </frameset>

作用

　　使用框架集引入外部页面

　　框架集可以同时引入多个页面，内联框架只能引入一个，在h5标准中，推荐使用框架集

属性

　　rows属性，指定框架集中所有框架按行排列

　　cols属性，指定框架集中所有框架按列排列

　　cols和rows必须在frameset中选择一个，并且指定每个框架的大小

例如：<frameset rows="50% 20% 30%"></frameset>

<frame />

作用：在frameset中使用frame子标签来指定引入的页面，引入几个页面就写几个frame

语法：<frame src="" />  

注意

　　frameset不能和body出现在同一个页面

　　frameset中的内容不被搜索引擎检索

　　frameset中加载每一个frame浏览器都需要重新发送一次请求，用户体验差

 文本标签

<em></em>

　　主要表示语气的强调（emphasize），默认斜体显示

<strong></strong>

　　主要表示内容的强调，比em更强烈，默认粗体显示

<i></i>

　　i标签的内容以斜体显示

<b></b>

　　b标签的内容粗体显示

<small></small>

　　small标签中的内容比父元素字号小一些

　　在html5中使用small表示一些细则一类的内容，比如合同中的小子，网站版权声明

<cite></cite>

　　网站中加书名号的内容都可以用cite标签，表示参考的内容，比书名，歌名等

<q></q>

　　表示一个短的引用（行内引用）

　　q标签的内容默认加引号（引号在css中before和after中添加的），不能被选中

<blockquote></blockquote>

　　表示一个长引用（块引用），块标签

<sub></sub>

　　sub中的内容会变成下标

<sup></sup>

　　sup中的内容会变成上标

<del></del>

　　del中的内容会添加删除线

<ins></ins>

　　ins中的内容会添加下划线

<pre></pre>

　　pre是一个预格式标签，自动保存代码中的格式，不会忽略多个空格

<code></code>

　　code用于存放代码，但不会保留代码格式

　　通常code和pre结合使用

列表标签

无序列表

<ul></ul>

　　ul用于创建无序列表（unonder list），块元素

　　在html中使用type属性设置项目符号（不推荐）

　　在CSS中，liststyle属性可以设置项目符号样式，

　　在CSS中，liststyle:none; 可以用来清除项目符号

<li></li>

　　li用于在ul中创建一个一个列表项，块元素

有序列表

<ol></ol>

　　ol用于创建有序列表（order list），块元素

　　默认使用有序序号作为项目符号

　　在html中，type属性可以指定序号类型（不推荐）

　　　　1，默认值，使用阿拉伯数字

　　　　a，采用小写字母作为序号

　　　　A，采用大写字母作为序号

　　　　i，采用小写罗马字母作为序号

　　　　I，采用大小写罗马字母作为序号

<li></li>

　　使用li创建列表项

定义列表

<dl></dl>

　　创建定义列表，用于对一些内容或词汇进行定义

<dt></dt>

　　dl的子标签，表示被定义的内容

<dd></dd>

　　dl的子标签，表示对被定义内容的描述

注意：ul、ol、dl可以相互嵌套

表单标签

表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label 元素。

创建表单

<form action="url"></form> 

form标签用于创建表单

　　现实生活中用表单提交信息，例如简历、银行卡申请表等

　　网页中的表单用来向服务器提交表单，如Baidu搜索框

　　在form中创建表单项，表单项默认有边框borderstyle

HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

属性            

　　action: 表单提交到的服务器地址. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

　　method: 表单的提交方式 post/get 默认取值 就是 get（信封）

　　　　get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

              post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

表单项

单行文本框

　　<input type="text" name="属性名"  value="默认属性值"  /> 

　　在文本框和文本域中，设置placeholder来设置提示文字（文字水印），IE8及以下不支持该属性，需要js

密码框

　　<input type="password"  name="属性名"/>

提交按钮

　　<input type="submit" value="按钮文字" /> 

　　<button type="submit">按钮文字</button> 

单选框

　　<input type="radio" name="属性名"  value="属性值" /> 

　　Checked属性值设置为checked的话，则该默认选中该选项

多选框

　　<input type="checkbox" name="属性名"  value="属性值" />

　　在单选框或多选框中指定默认选中的选项，可以在对应的项中添加checked="checked"属性

上传文件

　　<input type="file" name="属性名"  value="属性值" />　　

　　form表单需要加上属性enctype="multipart/form-data"

　　上传文件注意两点：

　　　　 1 请求方式必须是post

　　　　 2 enctype="multipart/form-data"

def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')

 

下拉列表框

　　<select name="属性名"> </select>

　　　　用于创建下拉列表

　　　　下拉列表的name属性指定给select标签

　　　　为select添加multiple=“multiple",则变为一个多选的下拉列表

　　<option value="属性值"></option>

　　　　用于在select中创建列表项

　　　　下拉列表的value属性指定给option

　　　　在option中添加selected=“selected”，将选项设置为默认选中

　　<optgroup label="组名">

　　　　对下拉列表项进行分组，同一个optgroup的列表项为一组

　　　　使用label属性指定分组的名字

文本域

　　<textarea name="属性名'>

　　在文本框和文本域中，设置placeholder来设置提示文字（文字水印），IE8及以下不支持该属性，需要js

　　设置本文域不能自由调整大小 resize：none；

重置按钮

　　<input type="reset />   或者

　　<button type="reset">按钮文字</button>

　　点击该按钮，表单内容全部恢复默认值

普通按钮

  1. <input type="button" value=“按钮文字"/>

  2. <button type="button">按钮文字</button>  

  3. <button type="submit">按钮文字</buttion>  

  4.  <button type="reset">按钮文字</button> 

Label标签

<label for="id值"> 用户名等</label>

用于选中表单下项中的提示文字，比如用户名、密码等

for属性需要指定一个表单项的id值

效果：鼠标点击文字“用户名”后，自动聚焦到相应id的文本框，也可以应用到其他表单项

fieldset

<fieldset></fieldset>

用于为表单项分组，将同一组表单项放入一个fieldset中

legend

<legend></legend>

在fieldset中设置legend标签，用于对fieldset设置组名，并且会显示在网页中

例如组名可以设置为”个人信息“ ”家庭信息“等

查询字符串

用户填写的信息会跟在url地址的后边以查询字符串的形式发送给服务器（get时生效）

url地址？查询字符串

查询字符串格式  属性名=属性值&属性名=属性值&属性名=属性值

其他标签

<center></center>

在center中的内容自动居中

 

<table></table>

使用table标签（块元素）来创建一个表格（用来表示一些格式化的数据）
表格可以嵌套，td中也可以放一个table

<tr></tr>

在table标签中，使用tr表示一行，有几行就用几个tr

<td></td>

在tr标签中，使用td创建单元格，有几个单元格就用几个td,表格列数由td最多的那行决定

合并单元格 

rowspan属性用来合并纵向单元格

colspan属性用来合并横向单元格

 Table，tr，rd是块元素

 

参考

https://www.cnblogs.com/yuanchenqi/articles/5976755.html                      

菜鸟https://www.runoob.com/

w3c在线https://www.w3school.com.cn/index.html

posted @ 2019-10-20 14:33  西伯利亚狼dreamer  阅读(202)  评论(0)  编辑  收藏  举报