前端之HTML

一、前端内容：

html:
# 1.超文本标记语言（Hypertext Markup Language，HTML）通过标记符号来标记要显示的网页中的内容。
# 2.其实就是一套规则，浏览器认识的规则。
# 3.浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。
# 4.对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）。
    - 常用：学习20个左右的标签

css:
    - 样式

JavaScript (js):
    - 网页交互性

响应状态码
    用一串简单的数字来表示一串中文意思
    1XX:服务端已经接受到你的数据正在处理你可以继续提交
    2XX:服务端成功返回响应数据
    3XX:重定向
    4XX:403请求无权限、404请求资源不存在
    5XX:500服务器内部错误
        
    不同的公司还会自己定制自己的响应状态码

二、Web运行本质：

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

import socket

def handle_request(client):
    buf = client.recv(1024)
    client.send(bytes("HTTP/1.1 200 OK

",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',8000))
    sock.listen(5)

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

if __name__ == '__main__':
        main()

三、html标签

# html整体结构
<!DOCTYPE html> # 解释器:html5

<html>
    <head> # 头部描述信息
        # meta 描述网页的元信息
        <meta charset="UTF-8"> # 字体编码
        <title>网页标题</title>
    </head>
    <body>真实内容</body>
    <link /> #可以引入外部css文件
    <script></script> /*内部支持直接书写css代码*/
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">  # 百度搜索时显示的标题
    <meta name="description" content="各类描述">  # 标题旁边的描述
</html>

# 分类：
    单闭合标签:
        <meta charset="UTF-8">
    双闭合标签:
        <script></script>

# 如果页面以下面开头:解释器用的就是html4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

1.html字体以及排版标签：可以写出括号中的字母其余用tab 键补齐

标签	作用
<p></p>	段落标签
<br/>	换行标签
<hr/>	华丽的分割线
h1,h2,h3..h6	字体变大、变粗<h1></h1>
<marquee behavior="" direction="right" ></marquee>	走马灯效果 direction出来的方向(html5建议禁止使用了，但是还是可以用)

2.html无序列表：

    <ul>
        <li>123</li>
        <li>内容</li>
    </ul>

# 常用属性解释：
type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)
<ul type="circle"></ul>

3.html有序列表

    <ol>
        <li>123</li>
        <li>内容</li>
    </ol>

# 常用属性：
# 属性：type编号类型，默认为整数。可选（1、A、a、Ⅰ、i）
# 属性：start起始编号，默认为1，即由最小编号开始

4.html标签<a>

# 超链接
<a href="http://www.baidu.com" target="_blank">跳转到百度</a><br/>
<a href="./1.html" target="_blank">跳转到当前目录下的页面</a></br>

<a href="mailto:xxx@qq.com">跳到发邮件的选择界面</a><br/>
<a href="/download/winRAR.rar">下载</a>

href:要跳转的资源地址
target:
_blank表示在新窗口中打开目标网页
_self表示在当前窗口中打开目标网页

链接远程目标：通过URL地址链接到远程目标。
链接本地页面：可以通过相对路径或者绝对路径链接本地页面。
相对路径：指相对于当前页面位置的路径
./：表示当前页面所在的目录
../：表示当前页面所在的上一级目录
绝对路径：绝对路径指当前站点中确切的路径，一般以”/”开始 例如：<a href=“/admin/index.py”>后台首页</a>

5.html常用标签div和span元素

<div>只是一个块级元素，并无实际的意义. 主要通过CSS为其赋予不同的表现
<span>内联行(行内元素),并无实际的意义. 主要通过CSS为其赋予不同的表现

# 块级元素(块级标签)与行内元素(行内标签)的区别:
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行
如果单独在网页中插入这两个元素，不会对页面产生任何的影响
这两个元素是专门为定义CSS样式而生的

# 块级标签:独占一行：div、p、h1-h6、ul、ol、
# 行内标签：占自己内容的宽度：span、a

6.html标签：img

常见的属性用法说明：

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

<img src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super">
<img src="./my.jpeg" width="200px" height="100px">

7.html表格：table

    <table border="1px">
        <thead>
        <!-- tr:一行数据 -->
            <tr>
                <td>td</td>
                <td>ID</td>
                <td>名称</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>

1). <table></table>表示的表格的开始和结束
    <table border="1px" width="px" height="300px" align="left">  
    border:表格加边框
2). <tr></tr>表示的是表格的一行
3). <td></td>表示的是一个单元数据格
4). <th></th>表示表格标题单元格，且加粗居中显示
5). <thead></thead> 表示表格的表头
6). <tbody></tbody> 表示表格的主体,表单 
    <tbody align="center"> align是数据表格里居中，如果在网页中居中写在table中
7). cellpadding: 内边距
8). cellspacing: 外边距
9).  像素 百分比.（最好通过css来设置长宽
10). rowspan: 单元格竖跨多少行
11). 单元格横跨多少列（即合并单元格）

# 表格属性可以提前定义或单独定义
<style>
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;}   
</style>

8.html表单：form

# 基本概念
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息

# 表单的工作原理
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交
这些信息通过Internet传送到服务器上
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误

# 服务端
import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        data = self.request.query_arguments
        print(data)
        self.write("Hello, world")

    def post(self):
        self.write('this is a test')

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

if __name__ == "__main__":
    application.listen(8888)  # 服务端监听8888端口
    tornado.ioloop.IOLoop.instance().start() # 启动服务端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form style="text-align:right; 400px" action="http://localhost:8888/index" method="post">
    姓    名：<input type="text"><br>
    密    码：<input type="password"><br>
    确认密码：<input type="password"><br>
    <input type="submit" value="提交"> <input type="button" value="普通按钮">
　　<input type="reset"  name="reset"  value="重置" />

</form>

</body>
</html>

9. input标签，select标签，textarea标签

input:
email        邮箱格式

type属性值	用途	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
button	普通按钮	<input type="button" value="普通按钮" />
reset	重置按钮	<input type="reset" value="重置" />
hidden	隐藏输入框	<input type="hidden" />
file	文件选择框	<input type="file" />

            <form action='url地址' method='get/post'>
                文本框: <input type='text' name='username'>
                密码框: <input type='password' name='pwd'>
                复选框: <input type='checkbox' name='hobby'>  足球
                        <input type='checkbox' name='hobby'>  篮球
                        <input type='checkbox' name='hobby'>  羽毛球
                单选框: <input type='radio' name='gender'> 男
                        <input type='radio' name='gender'> 女
                 性别: <input type="radio" name="gender" value="1" checked>男
                        <input type="radio" name="gender" value="0">女
                        <input type="file" >
                        <input type="hidden" name="token" value="dsadnsajdnskandksandskankdsandsjakndsa" /><br>

                        <select name="city" >
                            <option value="bj">北京</option>
                            <option value="tj" selected="selected">天津</option>
                            <option value="hb">河北</option>
                            <option value="sd">山东</option>
                            <option value="nm">内蒙</option>
                        </select><br>

                        <textarea cols="50" rows="30" name="content">

                        </textarea>
                普通按钮: <input type='button' value='普通按钮'>
                提交按钮: <input type='submit' value='提交'>
                重置按钮: <input type='reset' value='重置'>
            </form>

input举例

select标签:

下拉框，默认是单选可以改为多选
一个个选项就是一个个option标签

textarea标签
    获取大段文本内容

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用

10.表单重点知识

1.form表单中的参数
    action
        控制数据的提交路径
    method
        控制数据的提交方式get/post
        # 注意form表单默认是get请求
    enctype
        控制数据的编码格式urlencoded/formdata

2.用户获取用户数据的标签都应该有name属性
    其实我们可以将获取用户数据的标签看成是一个构造字典的工厂
    用户的数据就类似于是字典的value而name参数指定的数据就类似于字典的key

3.默认值
    radio和checkbox统一使用
        checked="checked"
    option使用
        selected="selected"
    如果参数名和参数值相同，则可以直接简写
        checked="checked"    简写  checked
        selected="selected"    简写  selected

4.能够触发form表单提交数据的标签有两个
    <input type="submit" value="注册">
    <button>我行!</button>

11.body内基本标签

h1~h6  多级标题标签
s        删除线
b        加粗
i        斜体
u        下划线
p        段落标签
br       换行
hr       分割线

12.标签的分类

1.块儿级标签    h1~h6  p
    独占一行
2.行内标签    u i s b
    自身文本多大就占多大
块儿级标签内部可以嵌套其他任意的标签；

   p标签除外，p标签只能嵌套行内标签
行内标签只能嵌套行内

13.特殊符号表示

内容	对应代码
空格
>	>
<	<
&	&
¥	¥
版权©	©
注册®	®