前端 1 HTML

1. HTML标签：https://www.cnblogs.com/liwenzhou/p/7988087.html

import socket

sk = socket.socket()
sk.bind(('127.0.0.1', 8080))
sk.listen(5)


while 1:
    conn, addr = sk.accept()
    data = conn.recv(9000)
    print(data)
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
    # conn.send(b'o98k')
    with open("test.html", "rb") as f:
        conn.send(f.read())
    conn.close()

手写socket

HTML

1. HTMl定义

　　FTP UPLOAD|ooxx.avi|1024 --> HTTP协议
　　HTML: 超文本标记语言

2. HTML标签的结构　　

HTML的结构　　　　

　　　　head --> 给浏览器看的内容
　　　　title --> 标题
　　　　style --> CSS样式
　　　　link --> CSS文件
　　　　script --> JS

　　meta 　　　　　　　　定义网页原信息
<meta charset="UTF-8"> # 告诉浏览器编码类型

<meta http-equiv="content-Type" charset="UTF-8">

<meta name="keywords" content="S14,骚年,">       　　　　　　　　关键词
<meta name="description" content="老男孩教育Python学院">　　　　 网页描述

body --> 给用户看的内容

HTML标签的语法：
　　<head 属性1=值1 属性2=值2></head>
　　<body></body>

<meta>

3. Body标签中的常用标签

0. 常用标签的分类　　

　　1. 独占一行的　　　　　　块儿级标签
　　　　1. h1~h6
　　　　2. p
　　　　3. div
　　　　4. hr
　　　　5. li
　　　　6. tr

　　2. 在一行内显示的　　　　行内标签/内联标签
　　　　1. a
　　　　2. span
　　　　3. img
　　　　4. b/i/u/s

　　　　5 input 　　　　value属性给定默认值 placeholder属性给定提示输入 type 给定输入类型（下面）

　　　　lable 　　　　 1.for 属性绑定id值 2. label吧元素标签包起来

1. 基本标签

字体装饰

　　　　<b>加粗</b>
　　　　<i>斜体</i>
　　　　<u>下划线</u>
　　　　<s>删除</s>

　　　　<p>段落标签</p> #独占一个段落

　　　　<h1>标题1</h1>
　　　　<h2>标题2</h2>
　　　　<h3>标题3</h3>
　　　　<h4>标题4</h4>
　　　　<h5>标题5</h5>
　　　　<h6>标题6</h6>

　　　　<!--换行-->
　　　　<br>

　　　　<!--水平线\分割线-->
　　　　<hr>

　img标签

　　图片标签
　　属性 src='图片路径' 网络地址的绝对路径\本地相对路径

　　　　　title 鼠标悬浮显示

　　　　　alt 加载中/加载失败显示

<img src="1.jpg" alt="这是个美女,请稍等.." title="美女" width="200" height="200">

a标签超链接标签

　　属性
　　　　href:超链接的地址
　　　　target:是否新建窗口
　　　　target="_self" 当前窗口打开某个路径对应的html页面
　　　　target="_blank" 新建窗口打开某个路径对应的html页面

<a href="https://www.baidu.com" target="_blank">百度</a>

当a标签的href属性对应id值，即可实现页面内跳转

<a href="#b1">屠龙宝刀，点击就送</a>
。。。。。。。。。。。。。
。

。
。
。
。
。
。
。
。
<b id="b1">加粗</b>

锚点跳转

列表标签

　　无序列表:

　　列表的type属性可以改变文字前面小点点的样式

　　例如 type = "none" 去掉小点点

<ul type="none">
        <li>太白</li>
        <li>alexdsb</li>
        <li>景女神</li>
    </ul>

　　有序列表

　　 start="30" 指定前面的序号

<ol type="a" start="2">
        <li>大壮</li>
        <li>B哥</li>
        <li>灭霸</li>
        <li>雪飞</li>
    </ol>

标题列表标签

　　dt ：标题

　　dd: 内容增加了缩进

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

特殊字符

空格:&nbsp;
小于号:&lt;
大于号:&gt;
&符号:&amp;

1、table（***）

　　cellpadding:文字和内边框的距离
　　cellspacing:内边框和外边框的距离
　　border:边框宽度

<table border="1" cellpadding="10" cellspacing="20">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>B哥</td>
                <td>40</td>
                <td>炒鸡蛋</td>
            </tr>
            <tr>
                <td>大壮</td>
                <td>38</td>
                <td>抽烟喝酒烫头</td>
            </tr>
            <tr>
                <td>雪飞</td>
                <td>18</td>
                <td>大壮</td>
            </tr>
        </tbody>
    </table>

2. form标签

一个容器，包住所有获取用户输入的标签
　　- action属性　　　　　　控制往哪里发送数据
　　- method属性　　　　post/get http的请求方法
　　- enctype属性　　　　表单中有文件类型的数据要传输的时候

　　　　　　　　　　　　　　multipart/form-data

<form action="http://127.0.0.1:8001">

            用户名:<input type="text" name="username" value="dazhuang">
            密码:<input type="password" name="password" value="111">

            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="2">女

            <input type="checkbox" name="hobby" value="a"> 喝酒
            <input type="checkbox" name="hobby" value="b"> 抽烟
            <input type="checkbox" name="hobby" value="c"> 烫头
            <input type="submit">
            <hr>
            <input type="date">
            <input type="button" value="普通按钮">
            <input type="reset">
            <input type="hidden">
            <input type="file">
    </form>

form表单触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通的按钮

<input type="submit">
        <button>提交按钮</button>

3. input标签　　

　　type属性:　　　　控制输入框的样式的
　　name属性:　　　　分组,携带数据的key key:value
　　value:　　　　　　　选择框提交数据的时的值,输入框的默认值

 <input type="radio" name="sex" value="2" checked>女   #简写方式,当属性名和属性值相同时可简写
     <input type="checkbox" name="hobby" value="a"> 喝酒
     <input type="checkbox" name="hobby" value="b" checked="checked"> 抽烟
     <input type="checkbox" name="hobby" value="c" checked="checked"> 烫头

　　　　type=‘xx’
　　　　text 单行输入文本

　　　　password　　密码输入框（不显示明文）

　　　　email　　
　　　　date 　　　　日期输入框
　　　　checkbox 　　多选/复选框
　　　　radio　　　　单选框
　　　　file　　　　　　文本选择框
　　　　hidden 　　隐藏输入框

　　　　button --> 普通按钮 --> 通常用JS给它绑定事件
　　　　submit --> 提交按钮 --> 默认将form表单的数据提交
　　　　reset --> 重置按钮 --> 将当前form中的输入框都清空

readonly 只读针对的是输入框 text password

disabled 不允许操作所有的input都可以设置

设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的

4. select标签

　　select>option

　　select一定写name属性， option写value属性

　　　　选定后才能把name=value&value传到后端

　　select标签加上 multiple　　表示多选

　　option 标签加 selected  表示默认选中

单选
    <select name="city">
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
    </select>
多选:multiple
    <select name="city" multiple>
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
   </select>

5、label标签

　　标识标签的功能的

方式1:

　　for:执行对哪个标签进行标识
　　　　效果:点击label标签中的文字,就能让标识的标签获得光标

<label for="username">用户名</label>
<input id="username" type="text" name="username" value="dazhuang">

方式2:

<label>
        密码:<input type="password" name="password" value="111" disabled>
</label>

6、 textarea标签

　　name：名称
　　rows：行数 #相当于文本框高度设置
　　cols：列数 #相当于文本框长度设置
　　disabled：禁用

<textarea name="memo" id="memo" cols="30" rows="10">

2. 标签的嵌套　　　　

　　标签可以嵌套标签
　　注意事项：
　　1. 尽量不要用内联标签包块儿级标签
　　2. p标签不能嵌套p标签
　　3. p标签不能嵌套div标签
　　3. 获取用户输入的标签

5. form表单提交数据的注意事项

　　{“k1”: "v1"}
　　1. form标签必须把获取用户输入的标签包起来
　　2. form不是from， form标签必须有action属性和method
　　3. form中的获取用户输入的标签必须要有name属性

<form action="http://127.0.0.1:8080" method="post">
    <input type="text" name="alex">
    <input type="submit">
</form>

View Code

4. 预习
https://www.cnblogs.com/liwenzhou/p/7999532.html

posted @ 2020-05-13 20:49 蜗牛般庄阅读(249) 评论(0) 编辑收藏举报

刷新页面返回顶部

大东在路上

前端 1 HTML

HTML

1. HTMl定义

2. HTML标签的结构

HTML的结构

3. Body标签中的常用标签

0. 常用标签的分类

1. 基本标签

字体装饰

img标签

a标签超链接标签

当a标签的href属性对应id值，即可实现页面内跳转

列表标签

无序列表:

有序列表

标题列表标签

特殊字符

1、table（***）

2. form标签

3. input标签

4. select标签

5、label标签

6、 textarea标签

2. 标签的嵌套

公告

大东在路上

前端 1 HTML

HTML

1. HTMl定义

2. HTML标签的结构

HTML的结构

3. Body标签中的常用标签

0. 常用标签的分类

1. 基本标签

字体装饰

img标签

a标签 超链接标签

当a标签的href属性对应id值，即可实现页面内跳转

列表标签

无序列表:

有序列表

标题列表标签

特殊字符

1、table（***）

2. form标签

3. input标签

4. select标签

5、label标签

6、 textarea标签

2. 标签的嵌套

公告

2. HTML标签的结构　　

HTML的结构　　　　

0. 常用标签的分类　　

　img标签

a标签超链接标签

　　无序列表:

　　有序列表

3. input标签　　

2. 标签的嵌套　　　　