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

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

<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
# 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'     -> 重置

  • 多行文本框

      <textarea>默认值</textarea>  -> 非自闭合标签 有name属性为key

  • 下拉框

      <select name="select1" id="s1">     -> name属性为key
      <option value="1">在线</option>
      <option value="2">下线</option>
  </select>

  -> 内嵌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，使其指向空或不返回任何内容。如：

       <a href="javascript:void(0);" >点此无反应javascript:void(0)</a>

 <a href="javascript:;" >点此无反应javascript:</a>

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

       <a href="" onclick="return false;">return false;</a>

 <a href="#" onclick="return false;">return false;</a>

      注意：只有一个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的标签获取光标

<label for="username">用户名：</label>
<input id="username" type="text" name="user" />

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

legend标签
posted @ 2020-07-04 23:59  Jerome12138  阅读(150)  评论(0)  编辑  收藏  举报