Python学习笔记Day13 - HTML

目录

HTML基础

1.一套规则：浏览器认识的规则

2.开发者：

学习html规则
开发后台程序：

  • 写html文件（充当模板）
  • 数据库获取数据，然后替换到html文件指定的位置

3.本地测试

  • 找到文件路径，直接用浏览器打开
  • pycharm

4.编写html文件

  • doctype<!DOCTYPE html>
  • 标签<html lang="en"></html>，属性只能有一个
  • 注释<!--adsdasd-->

5.标签分类

  • 自闭合标签，类似<meta charset="UTF-8">
  • 主动闭合标签，绝大多数

6.head标签

  • <head></head>：里面的标签除了title外不可见
  • <meta> refresh刷新、跳转 keywords关键字 description描述 X-UA-Compatible兼容
  • title
  • link icon css
  • style css
  • script js

7.body标签

  • 特殊符号 &nbsp;空格 &gt;>号
  • p标签 段落（默认段落之间是有间隔的！）
  • <br/> 换行
  • h1~h6 标题标签（默认加大加粗）
  • div标签 常用块级标签
  • span标签 常用行内标签

8.块级标签与行内标签

  • 标签分为：
    • 块级标签（占一行，可设置属性）：H标签（默认加大加粗）,p标签（默认段落间隔），div标签（白板）
    • 行内标签（内联）：span标签（白板，不带属性）
  • 标签之间可以嵌套
  • 标签存在的意义，属性，css操作，js操作

ps：chrome审查元素的使用

  • 放大镜快速定位
  • 查看styles样式

20个常用标签

form标签


# 只提交input标签内容，div不提交
# method="get"会将提交的数据拼接到url后面再提交，请求头
http://sssss?q=用户输入的值
http://sssss?q=用户输入的值&b=用户输入的内容
# method="post"会将提交的数据放在内容里提交，请求body
# get与post只是形式不同，无关安全
# 数据被打包成字典提交到后台 {'user': '用户','email': 'xx', 'pwd': 'xx' }



# submit能将表单数据提交，button默认无用

input等数据提交标签

  • 输入框

    input type='text' -> name属性为key，value="赵凡" （默认值）
    input type='password' -> name属性为key，value="赵凡"
    input type='submit' -> value='提交' 提交按钮，表单form
    input type='button' -> value='登录' 按钮

  • 选择框

    input type='radio' -> 单选框 提交value，checked="checked"默认选中，name属性为key（name相同则互斥）
    input type='checkbox' -> 复选框 提交value, checked="checked"，name属性为key（批量获取数据，列表）
    input type='file' -> 上传文件 依赖于form表单的属性 enctype="multipart/form-data"将文件一点点上传
    input type='rest' -> 重置

  • 多行文本框

    -> 非自闭合标签 有name属性为key

  • 下拉框

    -> 内嵌option标签
    value => 提交数据的值
    selected="selected" => 默认选中项
    size => 设置大小
    multiple => 设置多选
    optgroup => 标签分组（label = 湖北省）

=以上为所有能将数据提交到后台的标签=

a标签

  • 跳转网址 href="www.baidu.com"

  • 锚 当前页面章节跳转 href='#某个标签的ID' HTML的ID不允许重复

a标签不属于块体

img标签

属性src 路径
属性alt 图片未显示时显示的文本
属性title 图片名

ul,ol,dl列表

ul #前面为“·”
li
ol #前面为“1.”
li
dl #分层显示
dt #标题
dd #内容

table表格

table
thead 表头 默认加粗
tr 行
th 表头列
tbody 表内容
tr 行
td 列
属性colspan = '3' #占3列
属性rowspan = '2' #占2行

label标签 文本框

用于点击文本，使得关联id的标签获取光标


fieldset标签 框起来并在框头显示文字

legend标签

posted @ 2020-07-04 23:59  Jerome12138  阅读(167)  评论(0)    收藏  举报