标签的属性

img标签

标签的属性分类

　　1.自带的属性

　　2.自定义属性

<img src="地址" alt="描述信息">
src属性：图片的地址
　　1.外链地址
　　2.相对地址
alt属性：当图片加载失败后，显示的描述信息
width属性：控制图片宽度
height属性：控制图片高度
ps：二者等比例缩放

a标签

a：超链接

<a href=""></a>
href：填写的是跳转地址
　　绝对URL：指向另一个站点（比如 href="http://www.jd.com）
　　相对URL：指向当前站点中的确切路径（href="index.htm"）
target=‘_blank’
　　跳转时新开一个tab页面
title
　　当鼠标悬浮时展示的内容

列表

1.无序列表

　　格式

<ul type="disc">
    <li>d</li>
    <li>d</li>
    <li>d</li>
    <li>d</li>
    <li>d</li>
</ul>
type属性
　　disc（实心圆点，默认值）
　　circle（空心圆点）
　　square（实心方块）
　　none（无样式）

2.有序列表

　　格式

<ol type="1" start="3">
    <li>sb</li>
    <li>sb</li>
    <li>sb</li>
    <li>sb</li>
    <li>sb</li>

</ol>
type属性
　　1 数字列表、默认值
　　a 小写字母
　　A 大写字母
　　I 大写罗马
　　i 小写罗马
stayt属性
　　表示type默认值从几开始，不写从1开始

3.标题列表

　　格式

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

表格

格式

<table border="5" cellpadding="20" cellspacing="20">
    <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td rowspan="2">kevin</td>
        <td >18</td>
    </tr>
    <tr>
        <td>2</td>
        <td>18</td>
    </tr>
    <tr>
        <td>3</td>
        <td>kevin</td>
        <td>18</td>
    </tr>
    </tbody>
</table>

属性：

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

标签两个重要属性

id属性

　　 一个html文档中，id只能有一个，并且不能重复，通过这个id可以唯一确定一个标签

class属性

　　　 一个html文档中，class值是可以有多个的，可以重复　

自定义属性

　　属性名可以自己来定，自定义属性一般用来存储数据的

form表单

form表单可以把用户输入的、选择的、上传的等都通过网络提交到后端

<form></form>
<label></label>
通过id值绑定
　　<label for="username">用户名</label>
　　<input type="text" id="username">
input:
　　通过改变input的属性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="提交" />
　　reset 重置按钮 <input type="reset" value="重置" />
　　button 普通按钮 <input type="button" value="普通按钮" />
　　hidden 隐藏输入框 <input type="hidden" />
　　file 文本选择框 <input type="file" />

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

# 每一个单选框、复选框标签都应该有一个属性叫name

　　<input type="submit" value="登录"> # 把前端数据提交表单到后端
　　<input type="button" value="登录"> # 不能够提交表单，就是一个空白的按钮，事件
　　<button>登录</button> # 提交表单的功能，但是，必须写在form表单里

　　<form action="" method="post">
　　<select name="city" id="city">
　　<option value="1">北京</option>
　　<option selected="selected" value="2">上海</option>
　　<option value="3">广州</option>
　　<option value="4">深圳</option>
　　</select>
　　</form>

属性说明：
　　● multiple：布尔属性，设置后为多选，否则默认单选
　　● disabled：禁用
　　● selected：默认选中该项
　　● value：定义提交时的选项值

验证from表单提交数据到后端

用的是flask框架做后端语言

# 代码不需要掌握，你只需要看下后端如何结合前端把数据提交到后端的
pip install flask # flask框架，Django框架

<form action="">
action:
　　1. 什么都不写，默认提交到当前地址
　　2. 全写，绝对地址：http://www.baidu.com/login/
　　3. 只写后缀
　　　　/index/
　　　　 它会自动拼接当前计算机的ip+port
　　　　　　http://127.0.0.1:5000/index/

文件的提交：
　　必须满足两个条件
　　　　1. 请求方式必须是post
　　　　2. enctype必须是form-data

form表单提交数据的编码方式：
　　application/x-www-form-urlencoded
　　1. urlencode:普通文本框提交的都是这个格式的，只能提交普通文本数据，不能够提交文件数据
　　multipart/form-data
　　2. form-data：提交文件使用的必须是这个方式，可以提交普通文件数据，也可以提交文件数据
　　3. json # form表单不能提交json格式的数据

from flask import Flask,request

app = Flask(__name__)

 路由，网址的后缀 baidu.com/index/

@app.route('/index/', methods=['GET', 'POST']) # 默认使用的是GET请求
def index():
# 如何拿到前端提交过来的数据
# 前端以post请求方式提交的
print(request.form) # 只能拿到post请求的数据
# print(request.args) # 拿到get请求的数据
# 如何接收文件数据
print(request.files)
file_obj = request.files.get('myfile')
print(file_obj.filename) # 965_001_dq3_3600_5400.jpg

with open(file_obj.filename, 'wb') as f:
for line in file_obj:
f.write(line)
return 'OK'
app.run()

ccs

html: 超文本标记语言
css：层叠样式表
就是给html增加样式的，让其变得更加的好看

css的学习步骤：
　　1. 先学习选择器，作用就是如何找到标签
　　2. 找到标签之后，给标签增加样式


选择器的语法结构
　　选择器 {
　　　　属性名1：属性值1
　　　　属性名2：属性值2
　　　　属性名3：属性值3
　　　　属性名4：属性值4
}

CSS的注释语法
　　/* 内容 */ # 快捷键：ctrl + ？

css的引入方式
　　1. 在html文档中直接写在style标签中
　　2. 单独写一个CSS文件，然后通过link标签引入外部的css文件
　　3. 直接写在标签上，行内式

基本选择器

<style>
        /*#p1 {*/
        /*    color: red;*/
        /*    font-size: 30px;*/
        /*}*/

        /*.c1 {*/
        /*    color: yellow;*/
        /*    font-size: 25px;*/
        /*}*/

        /*p {*/
        /*    color: green;*/
        /*}*/

        /** {*/
        /*    color: orange;*/
        /*}*/

    </style>

id
class
标签选择器
通用选择器

<p id="p1" class="c1" style="color: orange;font-size: 26px">锄禾日当午，汗滴禾下土</p>
<p id="p2" class="c1">锄禾日当午，汗滴禾下土</p>
<p id="p3" class="c1" style="color: red;font-size: 20px">锄禾日当午，汗滴禾下土</p>

组合选择器

<style>
      /*ul li .c1 {*/
      /*  color: red;*/
      /*}*/

      div>p {
        color: red;
      }
  </style>

属性选择器

  <style>
        [username] {
            color: red;
        }

        [username=kevin] {
            color: red;
        }

        input[username=kevin] {
            color: red;
        }
    </style>

分组和嵌套

  div, p, span {
            color: red;
        }