html

作者: 两分与桥 | 来源:发表于2018-05-02 08:51 被阅读6次

基础编程语言学习线路图
HTML头部-10
html 大纲
web 前端学习线路图
2018-06-04——HTML简介
HTML 基础
html常用的基本标签
Html 学习笔记
HTML：基础（2）元素
2018-10-29 第二阶段 day1 htm

现在开始学前端了，虽然之前学过，不过还是觉得有很多不太懂，一步一步来了。
在 python 的 socket 模块上可以构建一个 server 供浏览器访问。（都是在pycharm上面写的）

#server
import socket

sk = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
sk.bind(('127.0.0.1', 8889))
sk.listen(5)
print('waiting for connect')
conn, addr = sk.accept()
buf = conn.recv(1024)
print(buf)
conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n", 'utf-8'))

f = open('test.html', 'rb')
data = f.read()
f.close()

conn.sendall(data)

conn.close()

输出结果：
waiting for connect
b'GET / HTTP/1.1\r\nHost: 127.0.0.1:8889\r\nConnection: keep-alive\r\nCache-Control: max-age=0\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\n\r\n'

#test.html 页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>just try</title>
</head>
<body>
<h1>hello  world</h1>
</body>
</html>

在浏览器端（我用的是Google）显示一个黑体的 hello world。

网络三剑客：html，css， js

浏览器，就是一个解释器

上网，就是下载网页

C/S 模式------C：client，S：server
B/S 模式------B：browser，S：server

HTML ，超文本标记语言
超文本：就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言：标记（标签）构成的语言

标签语言，由一组一组标签 <> 构成的

静态网页，静态的资源，如 xxx.html
动态网页，html代码是由某种开发语言根据用户请求动态生成的

标签语言不区分大小写，可以嵌套，但不能交叉嵌套

标签属性只能出现在开始标签中

html 的渲染模式声明，一般的页面都有 <!DOCTYPE html> ，要求浏览器以 W3C 标准解析渲染页面，不加就以默认的 BackCompat 渲染。

<!DOCTYPE html> # 注释掉这句话，就会弹出 BackCompat
<html lang="en">
<head>
    <meta charset="UTF-8"> # 告诉浏览器整个文件编码格式 
    <title>just try</title> # 页面标题
    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">#2秒后跳转到百度
</head>
<body>
<h1>hello  world</h1>
<script>
    alert(window.top.document.compatMode)
</script>
</body>

</html>

输出结果：会弹出框：CSS1Compat

块级标签：<p><h1><table><ol><ul><form><div>
可以嵌套块级标签和内联标签
内联标签：<a><input><img>_{^{<textarea><span>

只能嵌套文本和内联标签}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>just try</title>
</head>
<body>
<h1 >hello  world</h1>
<a  href="https://www.baidu.com/" target="_blank">
    <img src="a/2.jpg" alt="picture" title="落花" width="800" >
</a>
<ul> # 无序列表
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<ol> # 有序列表
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

<dl> # 自定义列表
    <dt>第一章</dt>
    <dd>第一节</dd>
    <dd>第二节</dd>
    <dd>第三节</dd>
    <dt>第二章</dt>
    <dd>第一节</dd>
    <dd>第二节</dd>
    <dd>第三节</dd>
</dl>

</body>

</html>

列表的效果图（图片我没放上来）

跳转 href="#a" ，根据设定的 id 号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>just try</title>
</head>
<body>

    <div>
        <a href="#b">
            <img  id="a" src="a/1.jpg" width="600">
        </a>
    </div>

    <div>
        <a href="#c">
            <img  id="b" src="a/2.jpg" width="600">
        </a>
    </div>

    <div>
        <a href="#a">
            <img  id="c" src="a/3.jpg" width="600">
        </a>
    </div>
</body>

</html>

form 表单，提交数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>just try</title>
</head>
<body>

<form action="http://127.0.0.1:8889">
    <p>用户名：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <p>爱好： 音乐<input type="checkbox" name="hobby" value="music">
               电影<input type="checkbox" name="hobby" value="movie">
    </p>
    <p>性别： 男<input type="radio" name="gender" value="men">
               女<input type="radio" name="gender" value="women">
    </p>
    <p><input type="submit" value="提交注册"></p>
</form>
<!--{'username':yuan,'password':123456,'hobby':['music','movie'],'gender':'men'}-->

</body>
</html>
# 点击提交注册按钮就会将数据提交到 form 中的路径，用 get 的方式提交，会在浏览器路径中看到：
#http://127.0.0.1:8889/?username=libai&password=123456&hobby=music&hobby=movie&gender=women

表单注册，可以上传文件，在 form 属性中需要设定多次传输 enctype="multipart/form-data"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>just try</title>
</head>
<body>

<form action="http://127.0.0.1:8090/index" method="post" enctype="multipart/form-data">
    <p>用户名：<input type="text" name="username" placeholder="用户名"></p>
    <p>密码：<input type="password" name="password" placeholder="密码"readonly="readonly"></p>
    <p>爱好： 音乐<input type="checkbox" name="hobby" value="music">
              电影<input type="checkbox" name="hobby" value="movie">
    </p>
    <p>性别： 男<input type="radio" name="gender" value="men">
              女<input type="radio" name="gender" value="women">
    </p>
    <p><input type="file" value="file"></p>
    <p><input type="reset"></p>
    <p><input type="submit" value="提交注册"></p>
</form>

</body>
</html>

显示是这样子的

pycharm 中建立一个 django server，修改文件（django 项目名叫 next）

# app 下的 urls.py

from django.contrib import admin
from django.urls import path
from app import views # 自定义的文件名 app

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index', views.index)
]

# app 下的 views.py
from django.shortcuts import render,HttpResponse

# Create your views here.

def index(req):
    print('get message = ', req.GET) # get 发送的数据被 req.GET 接受
    print('post message = ', req.POST) # 接收 post 方式发送的数据
    print('file = ', req.FILES) # 接收文件，

    return HttpResponse('注册成功')

最后一个是在 next\next 下的 setting 中注释掉这句
'django.middleware.csrf.CsrfViewMiddleware',
启动django，命令：
python manage.py runserver 8090

在表单中提交数据，会在 django server 的打印结果中看到：

get message =  <QueryDict: {}>
post message =  <QueryDict: {'username': ['libai'],
                             'password': [''],
                             'hobby': ['music', 'movie'], 
                             'gender': ['women']}>
file =  <MultiValueDict: {}>

select and table，文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>just try</title>
</head>
<body>

<form action="http://127.0.0.1:8090/index" method="post" enctype="multipart/form-data">
<p>
    <select name="province" multiple="multiple" size="2">
        <option value="beijing">北京市</option>
        <option value="guangdong" selected>广东省</option>
        <option value="hunan">湖南省</option>
        <option value="shanxi">山西省</option>
    </select>
</p>
<p>
    <select name="province2">
        <optgroup label="河北省">
            <option>邯郸</option>
            <option>廊坊</option>
            <option>唐山</option>
            <option>保定</option>
        </optgroup>
    </select>
    <textarea cols="40" rows="5">文本</textarea>
</p>

    <p><input type="reset"></p>
    <p><input type="submit" value="提交注册"></p>

    <hr>

    <table border="1px" cellpadding="30px" cellspacing="6px">
    <tr>
        <th>one</th>
        <th>two</th>
        <th>three</th>
    </tr>
    <tr>
        <td rowspan="2">11</td> # 占两行
        <td>22</td>
        <td>33</td>
    </tr>
    <tr>
        <td colspan="2">22</td> # 占两列
    </tr>
</table>

</form>

</body>
</html>

效果图