前端之HTML5

第1章 Html基础了解

1.1Web运行本质：

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

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.     超文本标记语言（），通过标记符号来标记要显示的网页中的内容

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

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

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

1.4W3C（了解内容）：

Ø  W3C是什么？

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

Ø  w3c的主要工作？

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

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

1.5html发展历史：

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

2.1html文件格式

html>
lang="en">

    charset="UTF-8">
    


    文件体

2.1.1代码说明：

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

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

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

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

2.2html标签格式

html是用尖括号包围的关键词，比如

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

html标签通常是成对出现的（双边标记），

和

但也有单独呈现的标签（单边标记），如：

---

和

标签也可以有若干个属性，也可以不带属性，比如head就不带任何属性

第3章 Html常用标签mate

3.1Meta标签：

元素可提供有关页面的元信息，针对搜索引擎和更新频度的描述和关键词

标签位于文档的头部，不包含任何内容

提供的信息时用户不可见的

3.2meta用法：




    charset="UTF-8">
    name="author" content="姜伯洋">#用来标注网页的作者
    name="copyrught" content="说明信息">#用来注释版权信息
    




第4章 排版标签

4.1排版元素

用来创建一个段落，该元素自动在其前后创建一些空白

换行

---

华丽的分割线

六种效果标签，字体由大到小

html>

lang="en">



    charset="UTF-8">
    





    hello
    

nihao

    

nihao

    

nihao

    

nihao

    

nihao

    

nihao




4.2滚动标签：

html>

lang="en">



    charset="UTF-8">
    




    diretion="left">
        hello
    



第5章 列表

5.1无序列表：

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

type="circle">
    

jiang

    

jiangboyang

5.2有序列表：

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

    
1. jiang

    
2. jiangboyang

第6章 a标签之跳转元素

6.1连接到远程地址

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



6.2连接到本地地址：

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



6.3img标签：

    src="/Users/jiangboyang/Desktop/屏幕快照2019-01-23 上午9.48.08.png">



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为其赋予不同的表现

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

    

nihao

    hello



第8章 table 表格标签

8.1表格基本用法

    

        
            
            
        
        
            
            
        
    

111	222
1	2




8.2解释说明：

1.     tr-表示表格的一行

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

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

8.3常用属性

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

8.4案例实现：

    border="1px" width="500px" height="100px">
        
            ID
            新闻标题
            点击量
            发布时间
            操作
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
    

第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常见的结构

action="http://localhost:8080/index" method="get">
    type="text" name="username" placeholder="用户名">
    type="password" name="pwd" placeholder="密码">
    type="button" value="登陆">
    type="submit" value="提交">
    type="reset" value="重置">

    足球:type="checkbox" name="hobby" value="football">

    male:type="radio"name="gender" value="male">
    female:type="radio"name="gender" value="female">

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	单行文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
submit	提交按钮
reset	重置按钮
button	普通按钮	普通按钮”/>
hidden	隐藏按钮	隐藏按钮”/>
file	文本选择框

 

9.6select标签：

name="city" id="city">
    value="bj">北京
    value="hz">杭州
    value="gz">广州

9.7属性说明：

multiple：布尔属性，设置后允许多选，否则只能选一个

disabled：禁用该下拉列表

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

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

9.8textarea多行文本框

cols="宽度" rows="高度" name="名称">
    你好

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

 

9.9表单修饰：

for="city">
    用户名

说明：

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

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

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

第10章 案例