码迷,mamicode.com
首页 > Web开发 > 详细

html_01

时间:2016-06-24 12:15:59      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:

HTML:浏览器与服务器之间通信

技术分享

技术分享
web:

import socket
def handle_request(client):
    buf = client.recv(1024)
    client.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))

    client.sendall(bytes("<h1>Hello, World</h1>","utf8"))

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind((localhost,8082))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == __main__:

    main()
html模拟通信

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签;标签不区分大小写
  • 功能简单的标签使用一个就行:: <br/> <hr/> <input /> <img />

HTML 的属性么

  • 标签的属性是以键值对的形式出现的,例如name = "mosson"
  • 属性只能存在于开始标签或者自闭和标签中
  • 如果属性值和属性名完全一样的时候写一个就可以了
  • 属性的名字全部小写,用单引号或者双引号包裹

HTML 文档 = 网页(静态网页、动态网页(用户与服务器之间有交互的))

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

例子解释

  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

 head标签

<head>元素是所有头部元素的容器,<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。

title 元素能够:

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时显示的标题
  • 显示在搜索引擎结果中的页面标题

base元素 标签为页面上的所有链接规定默认地址或默认目标(target)

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

link元素  标签定义文档与外部资源之间的关系(打开网页时显示在浏览器的最顶端的图标)

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

style元素

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

meta元素 是关于数据的信息

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。

典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta> 标签始终位于 head 元素中。

元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

针对搜索引擎的关键词:一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词:

<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。

script 元素 标签用于定义客户端脚本,比如 JavaScript。

body标签:

一、基本标签:

<hn>:n的取值范围是1-6;字体是从小到大,用来表示标题的

<p>:段落标签,包裹的内容换行,并且上下内容之间有一行空白

<b>、<strong>:加粗标签

<strike>:为文字上加一条横线

<em>:文字变成斜体

<sup>上角标<sub>下角标

<br>:换行

<hr>:水平线、

<div><span>

块级标签、内联标签:

块级:<p><hn><table><ol><ul><form><div>

内联:<a><input><img><sub><sup><textarea><span><> 

块级的元素特点:

  • 总在新行开始
  • 高度、行高以及外边距和内边距都是可以控制的
  • 宽度缺省是它的容器的100%,除非自己设定一个宽度
  • 它可以容纳内联元素或者其他的块级元素

内联的元素特点:

  • 和其他元素都在同一行
  • 高、行高以及外边距和内边距不可改变
  • 高度就是它的图片或者文字的高度,不可改变
  • 内联元素只能容纳文本或者其他的内联元素
  • 设置宽度width无效
  • 设置高度height无效,可以通过line-height来设置
  • 设置margin只有左右margin有效,上下无效
  • 设置padding 只有左右padding有效,上下则无效,注意元素范围是增大了,但是对元素周围的内容是没影响的

特殊字符:

  &lt; &gt;&quot;&copy;&reg;

二、图形标签<img>

src:要显示的图片的路径

alt:图片没有加载成功的提示

title:鼠标悬浮在图片上的文字提示

width:图片的宽度

height:图片的高度

三、超链接标签<a>

href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容

name: 定义一个页面的书签

用于跳转herf:#书签名称

四、列表标签:

<ul>:无序列表

<ol>:有序列表

  <li>:定义列表中的每一项

<dl>定义列表

  <dt>列表的标题

  <dd>列表项

五、表格标签<table>

border:表格边框

cellpadding:内边距

cellspacing:外边距

width:像素,百分比(最好通过css来设置长宽)

<tr>:table row

  <th>:table head cell

  <td>:table data cell

rowspan:单元格竖跨多少行

colspan:单元格横跨多少列

<th>:table header<tbody>(不常用)为表格进行分区

六、表单标签<form>

表单用于向服务器传送数据

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

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

1.表单的属性:

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

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

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

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

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

                          get/post是常见的两种请求方式.

2.表单元素

        <input>     type:     text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别?

             file 提交文件:form表单需要加上属性enctype="multipart/form-data"

          name: 表单提交项的键.注意和id属性的区别:name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,  

         value: 表单提交项的值.

                                   对于不同的输入类型,value 属性的用法也不同:

          • type="button", "reset", "submit" - 定义按钮上的显示的文本
          • type="text", "password", "hidden" - 定义输入字段的初始值
          • type="checkbox", "radio", "image" - 定义与输入相关联的值

                         checked: radio 和 checkbox 默认被选中

                   readonly: 只读. text 和 password

                   disabled: 对所用input都好使.

 

<select> 下拉选标签属性:

               name:表单提交项的键.

               size:选项个数

               multiple:multiple 

             <option> 下拉选中的每一项 属性:value:表单提交项的值.   selected: selected下拉选默认被选中

             <optgroup>为每一项加上分组

<textarea> 文本域 name:表单提交项的键. cols:文本域默认有多少列 rows:文本域默认有多少行

<label>

     <label for="www">姓名</label>
     <input id="www" type="text">

<fieldset>

<fieldset>
    <legend>登录吧</legend>
    <input type="text">
</fieldset>

 

html_01

标签:

原文地址:http://www.cnblogs.com/mosson0816/p/5613297.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!