zoukankan      html  css  js  c++  java
  • python大神-html知识

    1 ## 学习html,css,js ##
    2 知识:
    3 1)html(超文本标记语言):字符大小,标题
    4 静态网页:单纯浏览
    5 动态网页:有交互过程
    6 2)css:排版,着色
    7 3)js:动态展示 

    什么是标签:

    是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
    标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
    标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
    有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
    标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

    标签的属性:

    1 通常是以键值对形式出现的. 例如 name="alex"
    2 属性只能出现在开始标签 或 自闭和标签中.
    3 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
    4 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

    <!DOCTYPE html>标签

    head标签:

     1 <meta>meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页 功能。
     2 1 name属性主要用于描述网页,与之对应的属性值为content,content中的内容 主要是便于搜索引擎机器人查找信息和分类信息用的。(搜索的关键字)
     3 
     4      <meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">
     5 
     6      <meta name="description"content="老男孩培训机构是由一个老的男孩创建的">
     7 
     8 2 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content, content      中的内容其实就是各个参数的变量值。
     9 
    10     # http-equiv="Refresh" 指的是跳转,下面例子是2秒后自动跳转到百度页面
    11     <meta http-equiv="Refresh"content="2;URL=https://www.baidu.com"> //(注意后面的引号,分别在秒数的前面和网址的后面)
    12 
    13     <meta http-equiv="content-Type"content="text/html;charset=UTF8">
    14 
    15     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    3、网页栏中的名称
    <title>老男孩</title>

    4、网页栏中的图标
    <link rel="icon" href="http://www.jd.com/favicon.ico">

    body标签:

     一、基本标签

     1 <hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
     2 
     3 <p>: 段落标签. 包裹的内容被换行.并且与上下文内容之间都有一行空白.
     4 
     5 <b> <strong>: 加粗标签.
     6 
     7 <strike>: 为文字加上一条中线.
     8 
     9 <em>: 文字变成斜体.
    10 
    11 <sup>和<sub>: 上角标 和 下角表.
    12 
    13 <br>:换行.
    14 
    15 <hr>:水平线
    16 
    17 <div>:块级元素
    18  
    19 <span>:内联元素
    20 
    21 块级标签和内联标签
    22 
    23 块级标签:<p><h1><table><ol><ul><form><div>
    24 
    25 内联标签:<a><input><img><sub><sup><textarea><span>

    二、block(块)元素和inline标签的特点和区别

    block(块)元素的特点
    ① 总是在新行上开始;
    ② 高度,行高以及外边距和内边距都可控制;
    ③ 宽度缺省是它的容器的100%,除非设定一个宽度。
    ④ 它可以容纳内联元素和其他块元素
    
    inline元素的特点
    ① 和其他元素都在一行上;
    ② 高,行高及外边距和内边距不可改变;
    ③ 宽度就是它的文字或图片的宽度,不可改变
    ④ 内联元素只能容纳文本或者其他内联元素

    对行内元素,需要注意如下
    设置宽度width 无效。
    设置高度height 无效,可以通过line-height来设置。
    设置margin 只有左右margin有效,上下无效。
    设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

    特殊字符:

    &lt; &gt;&quot;&copy;&reg;

    二 、图形标签: <img> :

    1 src: 要显示图片的路径.
    2 
    3 alt: 图片没有加载成功时的提示.
    4 
    5 title: 鼠标悬浮时的提示信息.
    6 
    7  图片的宽
    8 
    9 height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

    三、 超链接标签(锚标签)<a>:

    href:要连接的资源路径 格式如下: href="http://www.baidu.com" 
    
    target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
    
    name: 定义一个页面的书签.
    
    用于跳转 href : #书签名称.

    四、 列表标签:

    <ul>: 无序列表
    
    <ol>:有序列表
    
             <li>:列表中的每一项.
    
    <dl> 定义列表
    
             <dt> 列表标题
    
             <dd> 列表项

    五、 表格标签: <table>:

    border: 表格边框.
    
    cellpadding: 内边距
    
    cellspacing: 外边距.
    
     像素 百分比.(最好通过css来设置长宽)
    
    <tr>: table row (定义行)
    
             <th>: table head cell
    
             <td>: table data cell (定义行里的内容)
    
    rowspan: 单元格竖跨多少行
    
    colspan:  单元格横跨多少列(即合并单元格)
    
    <th>: table header <tbody>(不常用): 为表格进行分区

    六 、表单标签(django)<form>:

      1)表单用于向服务器传输数据。

      2)表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

      3)表单还可以包含textarea、select、fieldset和 label 元素。

    1.表单属性(重点)

      

     HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
    
            action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,
                
                比如https://www.sogou.com/web
    
            method: 表单的提交方式 post/get 默认取值 就是 get(信封)
    
                get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
    
                post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
    
                get/post是常见的两种请求方式.

    2.表单元素(<form>)

      1)input

    1)<input>     type:     text 文本输入框
    
                 password 密码输入框
    
                 radio 单选框   (多定义一个value值)
    
                 checkbox 多选框  (多定义一个value值)
    
                 submit 提交按钮            
    
                 button 按钮(需要配合js使用.) button和submit的区别?
    
                 file 提交文件:form表单需要加上属性enctype="multipart/form-data"  
                 
    name: 表单提交项的键.注意和id属性的区别:
        name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的。
    
    value: 表单提交项的值.
    
           对于不同的输入类型,value 属性的用法也不同:
    
    type="button", "reset", "submit" - 定义按钮上的显示的文本(显示值)
    type="text", "password", "hidden" - 定义输入字段的初始值(默认值)
    type="checkbox", "radio", "image" - 定义与输入相关联的值 (男对于的值,该值是传送到服务端,比如用1代表男,2代表女)
    
    checked: radio 和 checkbox 默认被选中
    
    eadonly: 只读. text 和 password
    
    disabled: 对所用input都好使.

      2)select

    2)<select> 下拉选标签属性:
    
                   name:表单提交项的键.
    
                   size:选项个数
    
                   multiple:multiple  (表示可以多选)
    
        <option> 下拉选中的每一项 属性:value:表单提交项的值.   selected: selected下拉选默认被选中
    
        <optgroup>为每一项加上分组

      3)textarea

        文本域 name:表单提交项的键. cols:文本域默认有多少列 rows:文本域默认有多少行

      4)label

    4)<label> (把姓名和input进行一个关联)
    
         <label for="www">姓名</label>
         <input id="www" type="text">

      5)<fieldset> (设置一个框)

        <fieldset>
        <legend>登录吧</legend>
        <input type="text">
        </fieldset>

    注:服务器对上传过来的文件的操作如下

    def index(request):
        print request.POST
        print request.GET
        print request.FILES
        for item in request.FILES:
            fileObj = request.FILES.get(item)
            f = open(fileObj.name, 'wb')
            iter_file = fileObj.chunks()
            for line in iter_file:
                f.write(line)
            f.close()
        return HttpResponse('ok')


  • 相关阅读:
    10. Regular Expression Matching
    9. Palindrome Number (考虑负数的情况)
    8. String to Integer (整数的溢出)
    7. Reverse Integer (整数的溢出)
    LeetCode Minimum Size Subarray Sum
    LeetCode Course Schedule II
    Linux 文件缓存 (一)
    LeetCode Tries Prefix Tree
    Linux : lsof 命令
    LeetCode Binary Tree Right Side View
  • 原文地址:https://www.cnblogs.com/langzibin/p/7401741.html
Copyright © 2011-2022 走看看