前端之HTML5

时间 2019-11-07

标签前端 html5 html 栏目 HTML5 繁體版

原文原文链接

第1章 Html基础了解
css

1.1Web运行本质：

对于全部web应用，本质上都是一个socket服务端，用户的浏览器就是一个socket的客户端html

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'))
    client.send(bytes("Hello, World",encoding='utf-8'))

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

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

if __name__ == '__main__':
    main()前端

1.2前端内容：

1.3什么是html？

1. 超文本标记语言（），经过标记符号来标记要显示的网页中的内容web

2. 其实就是一套规则，浏览器认识的规则浏览器

3. 浏览器按照顺序渲染网页文件，而后根据标记符解释和显示内容服务器

4. 对于不一样的浏览器，对同一标签可能会有不彻底相同的解释（不一样客户端兼容性的问题）网络

1.4W3C（了解内容）：

Ø W3C是什么？app

万维网联盟（）建立于1994年，是web技术领域具备权威影响力的国际标准化组织socket

Ø w3c的主要工做？ide

W3c的主要工做就是制做web规范，到目前为止，w3c已经发布了200多项影响深远的web技术标准

好比：XHTML、HTML5、XML、CSS、DOM、XSTL

1.5html发展历史：

第2章 html文件结构以及标签格式

2.1html文件格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    文件体
</body>
</html>

2.1.1代码说明：

1. <html></html>是文档开始标记和结束标记，此元素告诉浏览器其自身是一个html文档，在他们中间是文档的头部和主体

2. <head></head>元素出如今文档的开头部分，<head>与</head>之间的内容不会在浏览器的文档窗口显示，可是其中的元素有特别重要的意义

3. <title></title>定义网页标题，在浏览器标题栏显示

4. <body></body>之间的文本是可见的网页主体内容

2.2html标签格式

html是用尖括号包围的关键词，好比<html>

标签对中的第一个标签是开始标签，第二个标签是结束标签

html标签一般是成对出现的（双边标记），<div>和</div>

但也有单独呈现的标签（单边标记），如：<br /> <hr />和<img src=”images/1.jpg” />

标签也能够有若干个属性，也能够不带属性，好比head就不带任何属性

第3章 Html经常使用标签mate

3.1Meta标签：

3.2meta用法：

 <head> 
    <metacharset="UTF-8">
    <meta name="author" content="姜伯洋">#用来标注网页的做者
    <meta name="copyrught" content="说明信息">#用来注释版权信息
     <title>姜伯洋H5页面</title>
</head> 

第4章排版标签

4.1排版元素

<p></p>用来建立一个段落，该元素自动在其先后建立一些空白

<br/>换行

<hr/>华丽的分割线

<h1></h1><h6></h6>六种效果标签，字体由大到小

<!DOCTYPE html> 
<html lang="en">
 <head> 
    <metacharset="UTF-8">
     <title>姜伯洋H5页面</title>
</head> 
<body>
     hello
    <h1>nihao</h1>
    <h2>nihao</h2>
    <h3>nihao</h3>
    <h4>nihao</h4>
    <h5>nihao</h5>
    <h6>nihao</h6>
</body> 
</html>

4.2滚动标签：

<!DOCTYPE html> 
<html lang="en">
 <head> 
    <metacharset="UTF-8">
     <title>姜伯洋H5页面</title>
</head> 
<body>
    <marquee diretion="left">
        hello
    </marquee>
</body> 
</html>

第5章列表

5.1无序列表：

type属性：disc=实心原点，circle=空心圆圈，square=实心方块

<ul type="circle">
<li>jiang</li>
<li>jiangboyang</li>
</ul>

5.2有序列表：

type属性：type编号类型，默认为整数，start起始编号，默认为1，即由最小编号开始

<ol>
<li>jiang</li>
<li>jiangboyang</li>
</ol>

第6章 a标签之跳转元素

6.1链接到远程地址

<body>
<a href="http://baidu.com">跳转到百度</a>
</body> 

6.2链接到本地地址：

<body>
<a href="./jia .py">跳转到百度</a>
</body> 

6.3img标签：

6.4常见属性：

href – 指定目标网页地址

target – 跳转方式

1. _blank表示在新窗口中打开

2. _self表示在当前窗口中打开

第7章 div和span元素

7.1常见属性用法说明

属性	值	含义
src	图像URL	规定图像的URL
alt	字符串	规定图像的替代文本
width	px / %	规定图像的宽
height	px / %	规定图像的高
border	px	图像的边框粗细

7.2说明：

div：只是一个块级元素，没有实际意义，主要经过css为其赋予不一样的表现

span：内联行级元素，没有实际意义，主要经过css为其赋予不一样的表现

块级元素就是另起一行开始渲染的元素，行内元素则不另起一行

<body>
<div>nihao</div>
<span>hello</span>
</body> 

第8章 table 表格标签

8.1表格基本用法

8.2解释说明：

1. tr-表示表格的一行

2. td-表示的是一个单元数据格

3. th-表示表格标题单元格，且加粗居中显示

8.3经常使用属性

属性	值	含义
width	px或%	表格的宽度
height	px或%	表格的高度
border	px	表格的边框的粗细
align	Left/center/right	元素的对齐方式

8.4案例实现：

第9章 form表单

9.1基本概念

HTML表单是HTML元素中较为复杂的部分，表单每每和脚本，动态页面，数据处理等功能相结合，所以它是制做动态网站很重要的内容

9.2表单的工做原理

访问者在浏览有表单的网页时，可填写必须的信息，而后按某个按钮进行提交，这些信息经过网络传送到服务器上，服务器上专门的程序对这些数据进行处理，若是有错误会返回错误信息，并要求纠正错误

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    defget(self):
        self.write("Hello, world")

    defpost(self):
        self.write('this is a test')

application = tornado.web.Application([
    (r"/index", MainHandler),
])

if __name__ == "__main__":
    application.listen(8888)
   tornado.ioloop.IOLoop.instance().start()

9.3常见的结构

<form action="http://localhost:8080/index" method="get">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="pwd" placeholder="密码">
    <input type="button" value="登录">
    <input type="submit" value="提交">
    <input type="reset" value="重置"><br>
    足球:<input type="checkbox" name="hobby" value="football"><br>
    male:<input type="radio"name="gender" value="male">
    female:<input type="radio"name="gender" value="female">
</form>

9.4表单常见属性：

action：url 指定一个表单处理目标url，表单数据将被提交到该url地址的处理程序，若是该属性为空，则提交到文档自身，该属性值能够绝对地址，相对地址，文档片断，甚至是脚本代码

method：get/post 将表单提交到http服务器的方法

enctype：application/x-www-form-urlencoded 指定表单数据的编码类型，此属性只有在method属性设置为post时才有效，默认值为application/x-www-form-urlencoded对全部字符进行编码，若是表单包含用于文件上传的控件（input type=‘file’）那么这个属性值必须为multipart/form-data，不对字符进行编码

9.5input标签常见属性：

type属性值	空间名称	对应代码
text	单行文本输入框	<input type="text"/>
password	密码输入框	<input type="password"/>
checkbox	复选框	<input type="checkbox" checked='checked'/>
radio	单选框	<input type="radio"/>
submit	提交按钮	<input type="submit" value='提交'/>
reset	重置按钮	<input type="reset" value='重置'/>
button	普通按钮	<input type="button" value=“普通按钮”/>
hidden	隐藏按钮	<input type="hidden" value=“隐藏按钮”/>
file	文本选择框	<input type="file"/>

9.6select标签：

9.7属性说明：

multiple：布尔属性，设置后容许多选，不然只能选一个

disabled：禁用该下拉列表

selected：首次显示时，为选中状态

value：定义发往服务器的选项值

9.8textarea多行文本框

属性	属性值	说明
name	name	控件名称
rows	number	设置多行文本框的显示行数（高度）
cols	number	设置多行文本框的显示列数（宽度）
disabled	disabled	布尔属性，设置当前文本框为禁用状态

9.9表单修饰：

说明：

label元素不会向用户呈现任何特殊效果

<label>标签的for属性应当与相关元素的id属性相同

结合CSS能够控制表单文本或者控件对齐，美化表单