zoukankan      html  css  js  c++  java
  • Python学习笔记第十四周

    目录:

      一、HTML

        1、概述

        2、HTML

      二、CSS

    一、HTML

    1、概述

      HTML是英文Hyper Text Mark-up Lang(超文本标记语言)的缩写,他是一种制作万维网页面的标准语言,相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它

      浏览器负责将标记翻译成用户看得懂的格式呈现给用户

    2、HTML文档

      文档树

      Doctype

      Doctype告诉浏览器使用什么样的html或者xhtml规范来解析html文档

      有与无的区别:

       1、BackCompat:标准兼容模式未开启(或叫怪异模式、混杂模式)

       2、CSS1Compat:标准兼容模式已开启(或叫严格模式)

      这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始---浏览器按照自己的方式来解析渲染页面,那么在不同的浏览器就会显示不同的样式,如果你的页面添加了DOCTYPE那么就等同于开启了标准模式,浏览器就按照W3C的标准解析渲染页面,这样一来,你的页面在所有浏览器里显示的就都是一样了

      用处:

      DOCTYPE告诉浏览器使用什么样的html或者xhtml规范来解析html文档,dtd文件则包含了标记、attri、proprties、约束规则

      Meta(metadata information)

      提供有关的页面元信息,例如:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键字

      1、页面编码(告诉浏览器是什么编码)  

    1 <meta http-equiv="content-type" content="text/html;charset=utf-8" />

      2、刷新和跳转

    1 <meta http-equiv="refresh" content="30"/>
    2 <meta http-equiv="refresh" CONTENT="5;Url=http://www.baidu.com"/>

      3、关键字

    1 <meta name="keywords" content="星际2,专访"/>

      4、X-UA-Compatible

      微软IE6是通过XP、WIN2003等操作系统发布出来的,作为占统治地位的桌面操作系统,也使得IE占据了统治地位,许多网站开发的时候,按照IE6标准去开发,而IE6自身的标准也是微软公司内部定义的,到了IE7的时候,采用微软公司内部标准以及部分W3C标准,这个时候许多网站升级到了IE7就比较痛苦,很多代码调整后,才能正常运行,而到了IE8以后,基本微软内部定义标准就废弃了,而全面支持W3C标准,由于基于对标准彻底变化使得原先在早期IE8上能够访问的网站,在IE8上没法正常访问,会出现一些排版错误、文字重叠、显示不全等各种兼容性错误。

      与任何早期浏览器相比,IE8 对行业标准提供了更加紧密的支持,因此针对旧版本的浏览器设计的站点可能不会按照预期显示,为了帮助减轻问题,IE8引入了文档兼容性概念,从而允许指定站点所支持的Internet Explo版本,文档兼容性在IE8上添加了新的模式,这些模式告诉浏览器如何解释和呈现网站,如果站点在IE8中没法正确显示,则可以更新该该站点以支持最新的WEB标准,也可以强制IE8按照旧的浏览器中查看站点方式来显示内容,通过使用meta元素将X-UA-Compatible标头添加到网页中,可以实现这点。

      当IE8遇到未包含X-UA-Compatible网页时,将使用指令来确定如何显示该网页,如果该指令丢失或者未指定基于标准的文档模型,则IE8以IE5模式来显示

    1 <meta http-equiv="X-UA-COMPATIBLE" content="IE=IE7"/>

      

      Title

      网页头部

      Link  

      1、css

    1 < link rel="stylesheet" type="text/css" href="css/common.css" >

      2、icon(表示在网页顶部小标签上可以添加图片)

    1 < link rel="shortcut icon" href="image/favicon.ico">

      Style

      在页面中写样式

      例如: 

    1 < style type="text/css" > 
    2 .bb{ 
    3       background-color: red; 
    4    } 
    5 < /style> 

      Script 

       1、引进文件

    1 < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

      2、写JS代码

    1 < script type="text/javascript" > ... </script >

      常用标签

      标签一般分为两种:

      1、块级标签

      2、内联标签(行内标签)

      

      各种符号

      http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

      例如:&nbsp; &gt;   &lt;

      p和br

      p表示段落,默认的段落之间是有间隔的

      br表示换行

      

      a标签

    < a href="http://www.autohome.com.cn"> </a>

      1、target属性,_blank表示在新的页面打开

      2、锚 href=‘#ID’   ID不能重复

       例子:

    1 <a href="#1">第一章</a>  <!-- 通过id来锚定某一章节 -->
    2      <a href="#2">第二章</a>
    3      <a href="#3">第三章</a>
    4      <a href="#4">第四章</a>
    5      <p id='1' style="height: 900px;">第一章内容</p>
    6      <p id='2' style="height: 900px;">第二章内容</p>
    7      <p id='3' style="height: 900px;">第三章内容</p>
    8      <p id='4' style="height: 900px;">第四章内容</p>

      H标签  

      H1~H6 均属于块级标签,字体大小依次减小,单位px或者%

      

      span标签

      span属于内联标签,表示白板

      

      b标签:

      <b>给字体加粗</b>

      

      em标签:  

      <em>变成斜体</em>

      strike标签:不建议使用

      <strike>去除</strike>

       <del>替代strike标签</del>  #代替strike标签

      

      input标签与form标签(表单)

      备注:所有的input标签单纯出现没有任何意义,它不知道将数据提交到哪个位置,需要将input标签嵌套在form标签中才能完成提交动作,同时form中需要涉及到<div>  <p>  <span>标签内容都不会提交,form中只会提交input的内容 

      

      form属性:

      1、action 表示提交到哪个位置

      2、method表示用何种方式提交,最常用的两种方式为get与post

      

    1 <form action="localhost:8888" method="get">
    2 用户名:<input type="text" name="username"/> 
    3 密码:<input type="password"/ name="password">
    4 <input type="button" value="登录"/>
    5 <input type="submit" value="上传"/> 6 </form>

     在点击上传后,会提交一个字典给后台 

      例子:

      通过搜狗搜索内容:

    1  <form action="https://www.sogou.com/web" target="_blank">
    2         <input type="text" name="query" />
    3         <input type="submit" value="搜索"/>
    4     </form>

      input属性类型:

      1、text 

       -name属性  value=XXX 表示可以通过value表示默认值

    用户名:<input type="text"/>

      2、password 

      -name属性 

    密码:<input type="password"/><!--显示密文-->

      3、submit

      -value=提交,提交按钮,表单

    <input type="submit" value="上传"/>

      4、button

      -value=登录,单纯的按钮

    <input type="button" value="登录"/> 

      5、radio

      -value,name属性(name相同会互斥) checked=checked表示默认值选择该值

    1<input type="radio" name="gender" value="1"/>
    2<input type="radio" name="gender" value="2"/>

      备注:name相同就互斥

      6、checkbox

      -value,name属性(批量获取数据) checked=checked表示默认值

    1 篮球<input type="checkbox" checked="checked" name="a" value="1"/>
    2 排球<input type="checkbox"  name="a" value="2"/>
    3 足球<input type="checkbox" name="a" value="3"/>
    4 网球<input type="checkbox" name="a" value="4"/>

      7、file

      -依赖form表单的一个属性,enctype=multipart/form-data  会把本地文件一点一点上传到服务器

    <input type="file" name="filename"/>

      8、reset

      -重置

    <input type="reset" value="重置"/>

      textarea属性

      非自闭合标签,默认在两个标签中间,有name属性

    <textarea name="demo">aaaaa</textarea>

      select标签

      有name属性,内部option,value提交后台,size表示多个,multiple会变为多选,optgroup变为分组,selected=“selected”表示默认值

    <select name="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">深圳</option>
                <option value="4" selected="selected">南京</option>
     </select>
    <select name="mcity" multiple="multiple" size="3">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">深圳</option>
                <option value="4" selected="selected">南京</option>
    </select>
    <!-- 多选-->
     1 <select name="ch-city">
     2             <optgroup label="河北省">
     3                 <option value="1">邯郸</option>
     4                 <option value="2">唐山</option>
     5             </optgroup>
     6             <optgroup label="山东省">
     7                 <option value="3">济南</option>
     8                 <option value="4">青岛</option>
     9             </optgroup>
    10 </select>

      img标签

       属性:

      alt:图片不存在时显示的注释

      title:图片的名称注释

      src:图片出处

    1 <a href="https://www.baidu.com">
    2     <img src="a.jpg" style="height: 60px; 60px;" alt="QQ" title="QQ">
    3 </a>

      列表(不常用,了解即可)

      ul(非顺序)

        li

      ol(顺序)

        li

      dl(分层)

        dt

        dd

     1 <ul>
     2         <li>a</li>
     3         <li>b</li>
     4         <li>c</li>
     5         <li>d</li>
     6     </ul>
     7     <ol>
     8         <li>a</li>
     9         <li>b</li>
    10         <li>c</li>
    11         <li>d</li>
    12     </ol>
    13     <dl> <!-- 表示分层 ,dt第一层,dd第二层-->
    14         <dt>ttt</dt>
    15         <dd>ddd</dd>
    16         <dd>ddd</dd>
    17         <dd>ddd</dd>
    18         <dd>ddd</dd>
    19     </dl>

      表格 

       table

        thead(表格头部)

          tr  

            th

        tbody(表格内容部分)

          tr

            td

     1 <table border="1">
     2     <thead>
     3         <tr>
     4             <th>1</th>
     5             <th>2</th>
     6             <th>3</th>
     7         </tr>
     8     </thead>
     9     <tbody>
    10         <tr>
    11             <td></td>
    12             <td colspan="2"></td> <!--合并单元格-->
    13 
    14         </tr>
    15         <tr>
    16             <td rowspan="2"></td><!--合并列-->
    17             <td></td>
    18             <td></td>
    19         </tr>
    20         <tr>
    21 
    22             <td></td>
    23             <td></td>
    24         </tr>
    25         <tr>
    26             <td></td>
    27             <td></td>
    28             <td></td>
    29         </tr>
    30     </tbody>
    31 </table>

      

      label标签

      用于点击文字,使得关联的标签获取光标

    1 <form>
    2         <label for="username">用户名</label><!--和input合并,点击label直接进入输入框中-->
    3         <input type="text" name="user" id="username" />
    4         <input type="submit" value="提交"/>
    5     </form>

      fildset标签 

     1 <fieldset>
     2         <legend>登录</legend>
     3         <form>
     4         <label for="username1">用户名</label>
     5         <input type="text" name="user1" id="username1" />
     6             <br/>
     7             <label for="pass">密码</label>
     8         <input type="password" name="password" id="pass" /><br/>
     9         <input type="submit" value="提交"/>
    10     </form>
    11     </fieldset>

    二、CSS 

      1、概述

      CSS是英文Cascading Style Sheets缩写,称为层叠样式表,用于对页面进行美化

      存在三种方式:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。

      语法:style='key1:value1;key2:value2;'

    • 在标签中使用style=‘xx:xxx’
    • 在页面中嵌入<style type='text/css'></style>块
    • 引入外部CSS文件

      必要性:美工会对页面颜色搭配和图片美化负责,开发人员必须要知道如何实现

      备注:style的ID和CLASS均不能以数字开头,但是极少使用ID来标记CSS,CLASS选择器是最常用的

      注释:/*      */表示注释

      CSS样式:

      1、id 选择器  

    1 #a1{
    2             background-color: blueviolet;
    3         }

      2、class选择器(着重推荐)

    1 .b1{
    2             background-color: red;
    3         }

       3、标签选择器(推荐使用)

    1 div {
    2             background-color:black;
    3             color: white
    4         }

      满足div下面的所有样式均改为此类型

      4、层级选择器(空格)(推荐使用)

    1  span div{
    2             background-color:black;
    3             color: white;
    4         }
    .c1 div{
                background-color:blue;
                color: white;
            }
    
    
    <div class="c1">dd
            <span class="c1">
                <div>daaaaddaaa</div>
            </span>

      5、组合选择器(逗号)(推荐使用)

     1  <style>
     2         #i1,#i2,#i3{
     3             background-color:blueviolet;
     4             color: white;
     5         }
     6     </style>
     7 
     8 <div id="i1">f1</div>
     9     <div id="i2">f2</div>
    10     <div id="i3">f3</div>

      6、属性选择器(着重推荐)

       对选择到的标签再通过属性进行一次筛选

     1 <style>
     2         input[type='text']{
     3             width: 100px;
     4             height:200px;
     5         }
     6     </style>
     7 
     8 
     9 
    10  <form>
    11             用户<input type="text"/>
    12             密码<input type="password"/>
    13         </form>

       7、height/width/border/font-size/font-weight/line-height/font-weight/text-align

      height:表示高度,可以使用px,一般不能用%  因为会产生进度条

      width:表示宽度,可以使用px也可以使用%

      border:边框

      font-size:字体大小

      font-weight:字体是否加粗,bold表示加粗

      line-height:表示垂直居中,如果height为48px,line-height也填写为48px,表示垂直居中

      text-align:表示水平居中

    1 <div style="height: 48px  ; 200px;border: 1px solid black;font-size:16px;text-align:center;line-height: 48px;font-weight: bold;">
    2     bbbbbbb
    3     </div>

       8、float

      让标签浪起来,块级别的标签也可以堆叠

      父div控制子div:

      <div style='clear: both'></div>

    <div style=" 20%;background-color: red;float: left;">a</div>
     <div style=" 80%;background-color:blue;float: right;">b</div>

      9、display

      display:none;让标签显示消失  

      display: inline; 块级标签变为内联标签

      display:block;内联标签变为块级标签

      display:inline-block;具有inine:默认自己有多少占多少;block:可以设置高度、边框等属性

      内联标签:无法设置高度、边距

      块级标签:可以设置高度、边框

     

    1 <div style="background-color: red;display: inline;">a1</div>
    2 <span style="background-color: red;display: block;">b</span>

       10、padding     margin(0,auto)

      margin:外边距

      padding:内边距

     

  • 相关阅读:
    图书管理系统---基于form组件和modelform改造添加和编辑
    Keepalived和Heartbeat
    SCAN IP 解释
    Configure Active DataGuard and DG BROKER
    Oracle 11gR2
    我在管理工作中積累的九種最重要的領導力 (李開復)
    公募基金公司超融合基础架构与同城灾备建设实践
    Oracle 11g RAC for LINUX rhel 6.X silent install(静默安装)
    11gR2 静默安装RAC 集群和数据库软件
    Setting Up Oracle GoldenGate 12
  • 原文地址:https://www.cnblogs.com/xiaopi-python/p/6886339.html
Copyright © 2011-2022 走看看