HTML | My Notes

HTML 介绍

前端有哪些内容

### 三大基础
基础:    HTML        CSS          JavaScript
框架:                Bootstrap    JQuery
功能:    内容        外观          动作

HTML 是什么

超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。
（兼容性问题）
网页文件的扩展名：.html或.htm
HTML是一种标记语言（markup language），它不是一种编程语言。
HTML使用标签来描述网页。
思维导图: https://www.processon.com/mindmap/5a2f4ec4e4b0abb143af4a08

Web服务的本质

### 浏览器输入网址 回车 都发生了什么
# 1. 浏览器发请求 -->  HTTP协议
# 2. 服务端接收请求 --> 服务端返回响应
# 3. 服务端把HTML文件内容发给浏览器
# 4. 浏览器接收渲染页面

# 5. 客户端与服务端 消息的格式是约定好的 ,这个约定就叫做 HTTP协议
# 6. HTTP协议:浏览器和服务器之间约定好的消息格式

# web server
import socket
sk = socket.socket()
sk.bind(('127.0.0.1',8090))
sk.listen()

while 1:
    conn,addr = sk.accept()
    conn.recv(1024)                         # 收消息
    conn.send(b'HTTP:/1.1 200 ok\r\n\r\n')  # 按照HTTP协议的格式 发消息

    # 直接发送
    # conn.send(b'<h1>hello!</h1>')

    # 从文件读取,按字节
    with open("data.html",'rb') as f:
        msg = f.read()
    conn.send(msg)

    conn.close()

sk.close()

# 浏览器作为客户端访问: 127.0.0.1:8090

# data html
<h1> hello leo </h1>
<img src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3054306616,2519291525&fm=26&gp=0.jpg">
<a href='http://www.sogo.com'>sogo</a>

HTML 文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> 声明为HTML5文档。
<html>、</html> 是文档的开始标记和结束的标记。是HTML页面的根元素，
在它们之间是文档的头部（head）和主体（body）。
<head>、</head> 定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<title>、</title> 定义了网页标题，在浏览器标题栏显示。
<body>、</body> 之间的文本是可见的网页主体内容。

HTML 标签

HTML 标签格式

之前我们学习到，HTML是一种标记语言(HTML,XML,YTAML),他的作用是使用标签来描述网页。

HTML标签是由尖括号包围的关键字，如<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
标签里面可以有若干属性，也可以不带属性。

标签的分类1 一般标签与自闭和标签

双标签(一般标签) <h1></h1> <a></a>
单标签(自闭和标签) <img> <link>

一般标签由于有开始符号和结束符号，可以在标签内部插入其他标签或文字；

自闭合标签由于没有结束符号，没办法在内部插入其他标签或文字，只能定义自身的一些属性。

### 常见的自闭合标签
1、<meta/> 定义页面的说明信息，供搜索引擎查看。

2、<link/> 用于连接外部的CSS文件或脚本文件。

3、<base/> 定义页面所有链接的基础定位。

4、<br/> 用于换行。

5、<hr/> 水平线。

6、<input/> 用于定义表单元素

7、<img/> 图像标签。

标签的语法

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名属性1=“属性值1” 属性2=“属性值2”…… />

标签的属性

任何标签都有三个常用属性:

id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）

HTML注释

1	<!--注释内容-->

HTML 常用标签

head 常用标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <!--定义网页标题-->
    <title>我是标题</title>

    <!--定义内部样式表-->
    <style>
        a {
            color: red;
        }
    </style>

    <!--引入外部样式表文件-->
    <link rel="stylesheet" href="test.css">

    <!--定义JS代码或引入外部JS文件-->
    <script>
        alert("hello")
    </script>

</head>
<body>
    <a href="head_demo.html">点我跳转</a>
    <h1>大家好</h1>
</body>
</html>

### Meta标签介绍：

<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，
不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 

### 1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，
与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

### 2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">

body 常用标签

基本标签（块级标签和内联标签）

<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>

特殊字符

div 标签和span 标签

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

<!--div 和 span div占用一行, span在同一行 -->
<div>我是div</div>
<div>我是div</div>

<span>我是span</span>
<span>我是span</span>

标签的分类2 块级标签与内联标签的区别

根据长度分类:

块级标签: 默认占浏览器宽度,块级标签可以设置长和宽:
1
h1 - h6、div、p、hr、
内联(行内)标签: 根据内容决定长度，不能设置长和宽:
1
a、img、u、s、i、b、span

标签的嵌套规则:

行内标签不能嵌套块级标签
p标签不能包含块级标签，p标签也不能包含p标签。

图片 img

向网页中嵌入一幅图像
标签并不会在网页中插入图像，而是从网页上链接图像。

标签有两个必需的属性：src 属性和 alt 属性。

1	<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

超链接 a

超链接标签
超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，
还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

1	<a href="http://www.baidu.com" target="_blank" >点我</a>

### 什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://...等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

### href 属性指定目标网页地址。该地址可以有几种类型：
1、绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
2、相对URL - 指当前站点中确切的路径（href="index.htm"）
3、锚URL - 指向页面中的锚（href="#top"）

<!--锚URL - 指向页面中的锚（href="#top"）-->
<a href="#a2">a1跳a2</a>
<div style="height: 1000px;background: red"></div>
<a href="" id="a2">哈哈哈</a>

1
2
3

### target：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

列表

无序列表: ui
有序列表: oi
标题列表: dl

### 无序列表: ui
<ul type="circle">
    <li>第一项</li>
    <li>第二项</li>
</ul>

### type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

### 有序列表: oi
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

### type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

### 标题列表: dl
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
    <dd>内容2</dd>
</dl>

表格 table

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，
单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

### 表格的基本结构
<table border="1" cellpadding="10" cellspacing="10">
    <!-- 表头开始 -->
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>
    
    <!-- 表内数据开始 -->
    <tbody>
    <tr>
        <td colspan="2">leo</td>
        <!--<td>28</td>-->
        <td rowspan="2">游戏</td>
    </tr>
    <tr>
        <td>lex</td>
        <td>28</td>
        <!--<td>开车</td>-->
    </tr>
    </tbody>
    
</table>

### 属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

快捷语句

1、快速格式化 : Code --> reformat code
2、快速建立4个标签 : h1*4 -->点击tab
3、快速建立标签并增加属性 : div*4>a.c1{a标签$}
### div*4>a.c1{a标签$} == 快速建立4个div标签，里面添加a标签,class='c1',内容为{a标签$},{$}表示从1开始的序号 
<div><a href="" class="c1">a标签1</a></div>
<div><a href="" class="c1">a标签2</a></div>
<div><a href="" class="c1">a标签3</a></div>
<div><a href="" class="c1">a标签4</a></div>

Form 表单

form 表单的作用：表单用于收集用户的输入信息，然后向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，如文本字段、复选框、单选框、提交按钮等等，
表单还可以包含textarea、select、fieldset和 label标签。

表单属性

action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式 post/get，默认取值就是get
# 关于表单提交
点击sumbit提交后，会将数据组装成字典格式—键值对
如果是：与查询相关的内容，使用get提交方法，数据在地址栏用？隔开
如果是：服务器修改相关的内容用post请求 数据在请求体里 http协议中可见

Djaogo接收表单数据代码

from django.conf.urls import url
from django.shortcuts import HttpResponse

def upload(request):
    print('request.GET:',request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES['avatar'].name
        with open(filename,'wb') as f:
            for chunk in request.FILES['avatar'].chunks():
                f.write(chunk)
            return  HttpResponse("上传成功")

    return HttpResponse('收到了')

urlpatterns = [
    url(r'^upload/',upload)
]

input系列标签

text 文本框

<p>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"  placeholder="请输入用户名" value="默认值" disabled>
</p>

# 属性说明: 
1、disabled: 禁用
2、placeholder: 占位符
3、value: 默认值
4、request.GET: <QueryDict: {'username': ['leo']}>

password 密码输入框

<p>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password"  placeholder="请输入密码" >
</p>

# 属性说明:
1、基本与text一致
2、request.GET: <QueryDict: {'username': ['leo'], 'password': ['123']}>

date 日期

<p>
    <label for="birthday">生日:</label>
    <input type="date" id="birthday" name="birthday">
</p>

# 属性说明:
1、request.GET: <QueryDict: {'username': ['leo'], 'password': ['123456'], 'birthday': ['2019-05-20']}>

radio 单选按钮

<p>
    <label>性别:</label>
    <input type="radio" id="r1" name="gender" value="男">
    <label for="r1">男</label>
    <input type="radio" id="r2" name="gender" value="女">
    <label for="r2">女</label>
</p>

# 属性说明:
1、checked: 默认选中
2、value:选择相关联的值 
3、request.GET: <QueryDict: {'username': ['leo'], 'password': ['123456'], 'birthday': ['2019-05-20'], 'gender': ['男']}>

checkbox 多选按钮

<p>
    <label>爱好:</label>
    <input type="checkbox" name="hobby" value="football" checked>足球
    <input type="checkbox" name="hobby" value="basketball">篮球
    <input type="checkbox" name="hobby" value="doubleball">双色球
</p>

# 属性说明
1、key=name: 多选标签的name必须一致，"hobby":[basketball,doubleball]
2、值=value: value值必须设置
3、value:选择相关联的值 
4、checked: 默认选中
5、request.GET: <QueryDict: {'username': ['leo'], 'password': ['123456'], 'birthday': ['2019-05-20'], 'gender': ['男'],
 'hobby': ['basketball', 'doubleball']}>

submit 提交按钮

<p>
    <input type="submit" value="提交数据">
    <input type="reset" value="重置数据">
</p>

# 属性说明
1、value:按钮上显示的文本内容
2、点击sumbit会将表单中的数据组成字典(键值对)，并向服务器提交数据

reset 撤销按钮

<p>
    <input type="submit" value="提交数据">
    <input type="reset" value="重置数据">
</p>
# 属性说明
1、value:按钮上显示的文本内容
2、点击reset撤销按钮，会将输入的内容数据重置

button 普通按钮

<p>
    <input type="button" value="普通事件按钮" onclick="alert(123)">
</p>
# 属性说明
1、通常用于JS绑定事件
2、value: 按钮显示文本

hidden 隐藏标签

<p>
    <input type="hidden" name="user_id" value="leo_id">
</p>
# 属性说明:
1、每个页面中存储的用户信息比如隐藏身份证
2、key=name, 值=value

file 上传标签

上传文件注意两点：

请求方式必须是: post
form标签增加: enctype=”multipart/form-data”

<form action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data">
    <p>
        <input type="file" name="avatar" > 
    </p>
</form>

# 属性说明
1、key="name",值="上传文件对象"
2、request.POST: <QueryDict: {'username': ['leo'], 'password': ['123456'], 'birthday': ['2019-05-20'], 
'gender': ['男'], 'hobby': ['football', 'basketball'], 'leo': ['leo_id']}>
3、上传的附件会根据程序代码存储到指定目录

input表单标签属性总结

name: 表单提交时的“键”，注意和id的区别
value: 表单提交时对应项的值:
- type=”button”, “reset”, “submit”时，为按钮上显示的文本内容
- type=”text”,”password”,”hidden”时，为输入框的初始值
- type=”checkbox”, “radio”, “file”，为输入相关联的值
checked: radio和checkbox默认被选中的项
readonly: text和password设置只读
disabled: 所有input均适用

其他常用标签

label 标记

定义：标签为 input 元素定义标注（标记）。

# 属性说明:
1、label 元素不会向用户呈现任何特殊效果。
2、<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
3、点击label内的内容 可以进入text文本框的光标 用for关联text的id

select 下拉菜单

# 普通下拉框
<p>
    <label for="city">城市:</label>
    <select name="city" id="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="hongkong" selected>香港</option>
    </select>
</p>

# 属性说明:
1、select 标签中的name为键
2、option 标签中的value为值，一般情况下都不会使用中文,常用的地市会使用区号 010 = 北京
3、selected="selected" 默认选中
4、multiple="multiple" 为多选
5、optgroup 分组的下拉框
6、request.POST: <QueryDict: {'username': ['leo'], 'password': ['123456'], 'birthday': ['2019-05-20'], 
'gender': ['男'], 'hobby': ['football', 'basketball'], 'city': ['beijing'], 'area': ['xc'], 'info': ['哈哈哈'], 'leo': ['leo_id']}>

# 分组下拉框
<p>
    <label for="area">区域</label>
    <select name="area" id="area">
        <optgroup label="北京">
            <option value="xc" selected>西城</option>
            <option value="dc">东城</option>
            <option value="sjs">石景山</option>
        </optgroup>
        <optgroup label="上海">
            <option value="pd">浦东新区</option>
            <option value="hp">黄浦区</option>
        </optgroup>
    </select>

</p>

textarea 多行文本

<p>
    <label for="info">自我介绍</label>
    <textarea id="info" name="info" cols="30" rows="10" placeholder="不少于100字"></textarea>
</p>

# 属性说明
1、key=name,值=用户输入
2、rows：行数
3、cols：列数
4、request.POST: <QueryDict: {'username': ['leo'], 'password': ['123456'], 'birthday': ['2019-05-20'], 、
'gender': ['男'], 'hobby': ['football', 'basketball'], 'city': ['beijing'], 'info': ['哈哈哈'], 'leo': ['leo_id']}>

form表单提交数据的几个注意事项

所有获取或用户输入的标签，都必须放在form表单里面
action 控制着往哪提交
input\select\textarea 都需要有name属性
提交按钮 input type=’sumbit’
file文件需要post提交方式和enctype=”multipart/form-data”