首页 > Web开发 > 详细

前端之HTML

时间:2019-12-25 23:26:25      阅读:77      评论:0      收藏:0      [点我收藏+]

web服务的本质

import socket


sk = socket.socket()

sk.bind(("127.0.0.1", 8080))
sk.listen(5)


while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.send(b"<h1>Hello world!</h1>")
    conn.close()

浏览器窗口输入网址敲回车发生的事:

浏览器发请求--->HTTP协议--->服务端接收请求--->服务端返回响应--->服务端把HTML文件内容发送给浏览器--->浏览器渲染页面

HTTP协议

超文本传输协议,规定了浏览器与服务端之间数据传输的格式

四大特性

1.基于请求响应:一次请求对应一次响应

2.基于TCP/IP作用于应用层之上的协议

3.无状态:不保留客户端状态(来多少次都记不住)

4.无连接:请求来一次 响应一次,之后立马断开连接,两者关系不复存在

数据格式

1、请求格式:

? 请求首行(标识HTTP协议版本,当前请求方式)

? 请求头(一大堆k,v键值对)

? 请求体(携带的数据,并不是一直都有 有时候可能是空的,取决于请求方式)

2、响应格式

? 响应首行(标识HTTP协议,响应状态码)

? 响应头(一大堆k,v键值对)

? 响应体(返回给浏览器页面的数据(展示给用户看) 通常响应体都是html页面)

响应状态码

? 用一些简单的数字来表示一些复杂的状态或者提示信息

? 1XX:服务端已经成功接收了你的数据正在处理,你可以继续提交额外的数据

? 2XX:服务端成功响应 你想要的数据(请求成功200)

? 3XX:重定向(原本想访问A但是内部自动给你转到了B)例如在访问一个需要登录的页面,窗口会自动调整到登录页面

? 4XX:请求错误(请求资源不存在 404,请求不合法不符合内部规定权限不够 403)

? 5XX:服务器内部错误(500)

请求方式

? 1.get请求:朝服务端要资源(比如在浏览器窗口输入www.baidu.com)

? 2.post请求:朝服务端提交数据 (登录注册)

HTML标签

超文本标记语言

要想让你的页面能够被浏览器识别并正常显示出来,你所写的页面必须遵循HTML

ps:浏览器只能识别html/xml、css、js

拓展:xml也可以写前端页面, 主要用于odoo框架 书写企业内部管理软件(erp)

HTML注释

注释是代码之母

单行注释:<!--单行-->
多行注释:<!--
            多行注释1
            多行注释2
        -->
补充:由于html页面结构比较复杂,内容比较多,不便于后期的维护修改,通常在写页面的时候 习惯用如下方式来人为划分代码区域
<!--顶部导航条样式开始-->

<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->

<!--左侧菜单栏样式结束-->
        

HTML文档结构

<html>
    <head></head>:head内存放的内容不是给用户看的,是给浏览器去识别做相应操作的
    <body></body>:body内存放的内容是浏览器展示给用户看到的花里胡哨的页面
</html>

HTML文档打开方式

1.pycharm自动调用浏览器打开(推荐)

2.手动查找路径之后选择浏览器打开

标签的分类

1.双标签(

>)

2.单标签(自闭和标签 技术分享图片



head内常用标签

title:用来显示网页标题

style:用来控制样式的 内部支持写css代码

script:1.内部可以直接编写js代码 2.可以通过src属性引用外部js代码

meta:name属性 keywords、description

body内常用标签

基本标签:

h1~h6:标题标签
s:删除线
b:加粗
u:下划线
i:斜体
p:独占一行
br:换行
hr:分割线

特殊符号:

&nbsp; 空格
<p>a大于b a &gt; b </p>
<p>a小于b a &lt; b </p>
<p>a&b   a &amp; b </p>
<p>人民币 &yen;100000 b</p>
<p>版权标识 &copy; </p>
<p>注册商标 &reg; </p>

常用标签

div 块儿级标签
span 行内标签
本身没有任何特殊意义
但是这两个用的最多,用来做前期页面的布局
img 图片标签:
    -src:
        1.可以写一个网站图片的地址
        2.写本地的图片地址
        3.url(自动朝该url发送get请求要数据) http://网址
    -alt:
        当图片加载不出来的时候 默认展示的提示信息
    -title:
        当鼠标悬浮在图片上时展示的提示信息
    -width,height:
        修改一个,另外一个会等比缩放
        若两个都修改,图片失真
a 链接标签:
    -href:
        放一个url,点击就会跳转到该url所对应的资源
    -target:
        控制是都在当前页面跳转,默认_self 在当前页面跳转
        _blank,在新建页面跳转
    -锚点功能:
        href不单单可以写url,还能写id值
        点击id值会跳转到该id值所对应的a标签所在的位置

列表标签:
    无序列表(较多)
        <p>无序列表</p>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
            只要页面上出现了比较有规则排列的文本 基本都可以用无序列表来实现
    有序列表
        <p>有序列表</p>
        <ol type="i">
            <li>哈哈哈</li>
            <li>呵呵呵</li>
            <li>嘿嘿嘿</li>
        </ol>
    标题列表
        <p>标题列表</p>
        <dl>
            <dt>标题1</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dt>标题2</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dt>标题3</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
        </dl>
        
表格标签******:
    展示网站数据的时候, 一般情况下可以使用表格标签
    写表格标签,先写结构,再写数据
    <table>
        <thead>
            <tr>
                <th>结构</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据</td>
            </tr>
        </tbody>
    </table>
    一个tr就是一行
    th和td区别:一个加粗一个不加粗
    通常情况下表头用th,表单内容用td
    
表单标签*************:
    form标签
    获取用户输入(输入,选择、上传文件...)并且将数据打包发送给后端
    action参数
        用来控制数据提交的路径(到底朝哪个后端服务器提交数据)
        三种写法:
            1.不写,默认朝当前页面所在地址提交数据
            2.全路径(http://www.baidu.com)
            3.只写路径后缀(/index/)
    input标签:获取用户输入,该标签是一个行内标签
        -type属性:
            -text 普通文本
            -password 密文
            -date 日期
            -radio 多选一
            -checkbox 多选多
                默认选中 checked="checked" (当标签属性名与值相同时,可以只写属性名)
                女<input type="radio" name="gender" checked="checked">
                简写
                女<input type="radio" name="gender" checked>
            -reset 重置
            -button 普通按钮
            -submit 触发form表单提交动作
            -file 获取文件
    select标签 下拉框
        一个个选项就是一个个option标签
        默认时单选的,可以加一个multiple改为多选
            <select name="" id="" multiple>
                <option value="">新垣结衣</option>
                <option value="">明老师</option>
                <option value="">嫖老师</option>
                <option value="">波老师</option>
            </select>
        如何让option标签默认选中
            加selected="selected"
            <select name="" id="" multiple>
                <option value="" selected="selected">新垣结衣</option>
                <option value="">明老师</option>
                <option value="" selected>嫖老师</option>
                <option value="">波老师</option>
            </select>
    
    textarea标签 获取大段文本
    
    label通常配合input一起使用
        -for用来填写对应的input标签的id值
        点击label标签内的内容 会自动让对应的input标签聚焦
         <p>
            <label for="d1">用户名:<input type="text" id="d1" name="username"></label>
        </p>
    
    能触发form表单提交数据的按钮****
        <p>
            # 可以通过value来指定按钮文本内容
            <input type="submit" value="注册">
            <button>点我</button>
        </p>
            
            <input type="reset" value="重置"> #重置输入数据
            <input type="button" value="按钮"> # 单纯一个按钮
       
#input获取到的用户输入就类似于字典的value,input中的name属性就类似于字典的key

标签的分类

1.块儿级标签:
    独占一行    h1~h6 p br hr div
    -块儿级标签内部可以嵌套任意块儿级标签和行内标签
    -特例:p虽然是块儿级标签,但是它的内部只能嵌套行内标签,不能嵌套块儿级标签
          若嵌套了,没有问题,只是不符合html语法规范
          
2.行内标签:
    u s i b span
    自身文本多大 就占多大
    行内标签内部不能嵌套块儿级标签和行内标签

书写标签的时候,只需写标签名字,按tab可以自动补全 (emmet插件)

前端之HTML

原文:https://www.cnblogs.com/littleb/p/12098927.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!