Python学习笔记Day13 - HTML

• HTML基础
  • 1.一套规则：浏览器认识的规则
  • 2.开发者：
  • 3.本地测试
  • 4.编写html文件
  • 5.标签分类
  • 6.head标签
  • 7.body标签
  • 8.块级标签与行内标签
• 20个常用标签
  • form标签
  • input等数据提交标签
  • a标签
  • img标签
  • ul,ol,dl列表
  • table表格
  • label标签 文本框
  • fieldset标签 框起来并在框头显示文字

HTML基础

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

2.开发者：

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

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

3.本地测试

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

4.编写html文件

• doctype
• 标签，属性只能有一个
• 注释

5.标签分类

• 自闭合标签，类似
• 主动闭合标签，绝大多数

6.head标签

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

7.body标签

• 特殊符号  空格 >>号
• p标签 段落（默认段落之间是有间隔的！）
• 
换行
• 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
  

• 下拉框

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

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

a标签

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

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

a标签不属于块体

• 新窗口打开
  target="_blank"

• a标签href不跳转 禁止跳转

  当页面中a标签不需要任何跳转时，从原理上来讲，可分如下两种方法：

  1. 标签属性href，使其指向空或不返回任何内容。如：

      点此无反应javascript:void(0)
     
      点此无反应javascript:
     

  2. 标签事件onclick，阻止其默认行为。如：

      return false;
     
      return false;
     

     注意：只有一个href="#"是不可以的。

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