zoukankan      html  css  js  c++  java
  • 学习第十一天@div+css

    问题:

    什么是meta标签?
    在一个网页中meta标签常常被用做网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签。

    网页显示字符集网页编码
    简体中文:<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    中文:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    繁体中文:<meta http-equiv="Content-Type" content="text/html; charset=BIG5" />

    英 语:<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    问题:

    2、网页制作者信息 
    <meta name="author" content="Evance" />

    3、网页关键字声明(搜索引擎优化地方) 
    <meta name="keywords" content="abc,xxx,defg,xyz" />

    4、网页简介说明(搜索引擎优化地方)
    <meta name="description" content="简介内容如本页div+css教程之meta标签说明-www.divcss5.com" />

    5、防止别人在框架里调用你的页面<meta http-equiv="Window-target" content="_top" />

    6、自动跳转(此标签用法可以让网页在多少秒后自动从当前页面跳转到另外一个网页页面或网站)
    <meta http-equiv="Refresh" content="5;URL=http://www.divcss5.com" /> 
    Content后跟值为当前页面在多少时间跳转;
    Url值为跳转到具体网页网站

    7、网页告诉搜索机器人向导对此网页操作(用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引)
    <meta name="robots" content="all" /> 
    content的参数有all,none,index,noindex,follow,nofollow。默认是all。如果在一个页面不加入此标签默认情况下content="all"意思是搜索并收录抓取爬行此网页及此网页指向页面。

    搜索引擎:robots取值
    none 
    搜索引擎将忽略此网页,等价于noindex,nofollow。 
    noindex 
    搜索引擎不索引此网页。 
    nofollow 
    搜索引擎不继续通过此网页的链接索引搜索其它的网页。 
    all 
    搜索引擎将索引此网页与继续通过此网页的链接索引,等价于index,follow。 
    index 
    搜索引擎索引此网页。 
    follow 
    搜索引擎继续通过此网页的链接索引搜索其它的网页。 

    问题:

    特别说明<script>标签和link标签一样不一定必须放置在<head></head>标签内,可以适当放置在<body>下</body>以上部分,效果相同,但是推荐标准的放置在head标签内。

    问题:

    什么是link标签?
    link标签通常放置在一个网页的头部标签head标签内的用于链接外部css文件、链接收藏夹图标(favicon.ico),<link> 标签最常见的用途是链接外部样式表,外部资源。

    link实例
    <link href="img/divcss5.css" rel="stylesheet" type="text/css" />
    链接外部css样式时候link标签的内容结构解释——css引用
    href的值为外部资源地址,这里是css的地址
    rel定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
    type规定被链接文档的 MIME 类,这里是值为text/css
    这样就构成了一个完整的link标签
    注意link标签因为不像<head></head>、<html></html>是一对的,解释还需一个斜杠的标签,这里link样式是放在<link>内的。
    根据W3C标准,需要直接用斜杠一个">"结束,如<link .... ... />构成完整的一个link标签。

    特别说明<link>标签不一定必须放置在<head></head>标签内,可以适当放置在<body>下</body>以上部分,效果相同,但是推荐标准的放置在head标签内。

    问题:

    定义:html,htm是一个完全的超文本静态网页——hypertext markup language
    shtml是一种用于SSI技术的文件——Server Side Include--SSI。

    shtml是什么格式,比html有何好处? shtml,html格式是差不多,shtml主要可以使用include(包含html),经过服务器生成静态页面。

    Shtml的页面可以使用include嵌入另外的html页面这样可以使得一个网站里共用相同办法分离出来使用include来嵌入到静态页面里。静态页面则不能!
    Shtml使用方法
    <!--#include file="网页文件地址"-->
    假如一个网站头部和导航、底部各个页面完全相同,则可以分离出这些部分分别放到一个html页面里,然后使用include嵌入到一个shtml页面里。特别说明html和htm不能使用include,即使使用也无效。

    要想服务器能解析shtml网页页面,必须在服务器IIS中开SSI。

     

    问题:

    什么是伪静态,伪静态作用
    伪静态即是网站本身是动态网页如.php、.asp、.aspx等格式动态网页有时这类动态网页还跟“?”加参数来读取数据库内不同资料。很典型的案例即是discuz论坛系统,后台就有一个设置伪静态功能,开启伪静态后,动态网页即被转换重写成静态网页类型页面,通过浏览器访问地址和真的静态页面没区别。前提服务器支持伪静态重写URL Rewrite功能。

    需要伪静态功能地方
    考虑搜索引擎优化SEO,将动态网页通过服务器处理成静态页面,如www.xxx.com/jk/fd.php?=12这样的动态网页处理成www.xxx.com/jk-fd-12.html这样格式静态页面,常见的论坛帖子页面,都是经过伪静态处理成静态页面格式html页面。
    考虑网站所用的程序语言不易被发现,经过重写来伪静态来将动态网页的程序后缀变为html的静态页面格式。

    问题:

    首先,相同之处是br和p都是有换行的属性及意思
    其次,区别<br /.>是只需一个单独使用,而<p>和</p>是一对使用
    再次,br标签是小换行提行,p标签是大换行(分段)各行作用。

    当然可以让p标签换行与br换行一样没有空白,可以使用css对对应p标签进行设置margin:0; padding:0;即可实现,实例p{ margin:0; padding:0;},即可实现<p>等于一个<br />。

    问题:

    PX\EM\PT单位介绍   -  TOP
    px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐;
    em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸,国外使用比较多;
    pt单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用。

    1. 以前IE无法调整那些使用px作为单位的字体大小,但现在几乎IE都支持 在这里也推荐使用PX作为单位;

    2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

    3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

    px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的,QQ截图也是使用PX作为长度宽度单位。

    em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

    empx换算  -  TOP
    任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

    em单位有如下特点:   -  TOP

      1. em的值并不是固定的;

      2. em会继承父级元素的字体大小。

    我们在写CSS的时候如果要用em为单位,需要注意两点:

      1. body选择器中声明Font-size=62.5%;

      2. 将你的原来的px数值除以10,然后换上em作为单位;

      3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

      也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

      但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

     

    问题:

    dl dt dd认识及dl dt dd使用方法

    <dl> 标签用于定义列表类型标签。
    如标题、标题对应列表效果。
    代码如下:

     <html>
    <body>
    <h1>一个定义列表:</h1>
    <dl>
    <dt>css网站</dt>
    <dd>网址为www.divcss5.com</dd>
    <dt>div css网站</dt>
    <dd>网址为www.divcss5.com</dd>
    <dt>div+css网站</dt>
    <dd>网址为www.divcss5.com</dd>
    </dl>
    </body>
    </html>
     

     演示截图
     

    扩展与提升
    dl dt dd是一个组合型标签
    标签标准用法,代码如下

     <dl>
    <dt>标题1</dt>
    <dd>列表1</dd>
    <dd>列表2</dd>
    </dl>

    问题:

    HTML <ul> 标签

    定义和用法

    <ul> 标签定义无序列表。

    实例

    无序 HTML 列表:

    <ul>

      <li>Coffee</li>

      <li>Tea</li>

      <li>Milk</li>

    </ul>

    问题:

    FTP里的几个文件夹分别有什么用处  TOP
    虚拟主机开通成功之后,会在您的FTP里面自动生成4个文件夹,分别是:"databases","logofiles"
    "others","wwwroot",他们作用如下:

    1、wwwroot文件夹:该文件夹内存放可以通过web访问的文件,您需要将您对外发布的网站文件上传到该目录下,输入域名访问到的文件将是该文件夹下的文件。

    2、databases文件夹:该文件夹同logofiles、others文件夹一样,属于不可通过web访问的文件夹,即用户无法通过输入网址来访问这些文件夹下的文件,您可以在这些文件夹下上传一些不希望别人能够访问的文件。比如您可以将access数据库存放在databases文件夹下,这样可以最大化的保证您的数据库安全。

    3、others文件夹:该站点存放不可以通过http方式下载的文件。

    问题:

    什么是虚拟主机   TOP
    虚拟主机(Virtual Host Virtual Server)又称网站空间或网络空间网页空间是使用特殊的软硬件技术,把一台计算机主机分成一台台“虚拟”的主机,每一台虚拟主机都具有独立的域名和IP地址(或共享的IP地址),具有完整的Internet服务器功能。在同一台硬件、同一个操作系统上,运行着为多个用户打开的不同的服务器程序,互不干扰;而各个用户拥有自己的一部分系统资源(IP地址、文件存储空间、内存、CPU时间等)。虚拟主机之间完全独立, 在外界看来, 每一台虚拟主机和一台独立的主机的表现完全一样。 
    随着业界的发展,虚拟主机从最开始的雏形模式慢慢的走向了高端模式。在虚拟主机上,越来越多的功能被挖掘,他将是网络的主流。

    问题:

    边框显示样式:
    border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 
    参数值解释:
    none :  无边框。与任何指定的border-width值无关
    hidden :  隐藏边框。IE不支持
    dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
    dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
    solid :  实线边框
    double :  双线边框。两条单线与其间隔的和等于指定的border-width值
    groove :  根据border-color的值画3D凹槽
    ridge :  根据border-color的值画菱形边框
    inset :  根据border-color的值画3D凹边
    outset :  根据border-color的值画3D凸边

    问题:

    三边有边而一边没有设置技巧
    如左右下有边框并且样式为黑色1PX宽度实线边框,而上边没有边框。
    CSS 代码: border:1px solid #000; border-top:none;
    注意border:1px solid #000; 和border-top:none;前后顺序不能调换。因为CSS读取有从上到下、从左到右读取原理,而先设置了整个边框样式,后再加上声明顶部上边边框为“none”没有意思,即实现该实例要的样式。从而无需分别设置下、左、右,从而节约一定代码。

    问题:

    字体样式(斜体)使用到css样式中font-style标签设置如font-style: italic,当然可以使用<em>标签将文字变为斜体。

    问题:

    text-transform语法text-transform : none | capitalize | uppercase | lowercase 

    参数:

    none :  无转换发生
    capitalize :  将每个单词的第一个字母转换成大写,其余无转换发生
    uppercase :  转换成大写
    lowercase :  转换成小写

    问题:

    Html常规加粗标签
    以前html直接对对象加粗的标签如下:
    <b></b><strong></strong>两者效果相同。

    问题:

    HTML常规下划线标签  -  TOP
    在HTML直接使用下滑线标签“U”即可对对象文字加下划线。
    实例:
    <u>我被U标签加下滑线</u>

    或者:

    text-decoration下划线CSS单词值参数:
    none :  无装饰
    blink :  闪烁
    underline :  下划线
    line-through :  贯穿线
    overline :  上划线

    问题:

    鼠标经过热点文字被加下划线?

     

    <style>
    .yangshi a{ text-decoration:none;}/* 鼠标经过热点文字被加下划线 */
    .yangshi a:hover{ text-decoration:underline;}/* 鼠标经过热点文字被加下划线 */
    </style>

    <p>
    <span class="yangshi">
    <a href="http://www.divcss5.com">divcss5</a>
    </span>
    </p>

    问题:

    带链接文字有虚线下划线
    这里也是通过CSS border边框属性来控制超链接a对象的CSS样式。

    演示CSS代码:
    a{ border-bottom:1px dashed #111;}/* 这里设置带链接文字下方出现虚线下划线*/
    a:hover{ border:0;}/* 这里设置鼠标经过被链接文字时不出现虚线 */

    说明:text-decoration:none;这个是去掉CSS 下划线(超链接默认自带的下划线属性)

    问题:

    CSS 注解用法,css注释用法
    (css注解)CSS注解是以“/*”斜杠一个星号开始,以“*/”星号斜杠结束,注解说明内容放到“/*”“*/”中间。

    问题:

    margin和padding的意义相信大家都很清楚,可是在具体应用中,到底应该使用哪一个,就比较难于判断了。何时应当使用margin

    • 需要在border外侧添加空白时。
    • 空白处不需要背景(色)时。
    • 上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。

    何时应当时用padding

    • 需要在border内测添加空白时。
    • 空白处需要背景(色)时。
    • 上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。
  • 相关阅读:
    成为JAVA(高级)工程师
    JVM的内存区域划分以及垃圾回收机制
    XML
    String.valueOf
    JAVA书籍(2)
    JAVA书籍(1)
    深入JAVA线程池
    FileWriter与BufferedWriter
    获取下拉框的文本或值
    删除字符串最后一个字符的几种方法
  • 原文地址:https://www.cnblogs.com/xiaxiazl/p/2348355.html
Copyright © 2011-2022 走看看