zoukankan      html  css  js  c++  java
  • HTML和CSS

    Web语言

    1.虚线边框

    border:2px dotted black;

    2.设置左右外边距分别占页面的20%

    margin-left:20%

    margin-right:20%

    3.相对路径

    子级文件访问父级文件:../文件(上行两级文件夹../../文件)

    父级文件访问子级文件:下级文件夹名称/文件

    4.web通用分割符

    对于Mac、Windows、Linux还是其他操作系统,在HTML的路径都要使用斜线"/"

    5.引用元素

    <q>表示短引用,内联(inline)元素,作为现有段落的一部分,部分浏览器会在节点两边增加双引号。

    <blockquote>表示长引用,块(block)元素,需要单独显示

    6.换行元素

    <br>:无结束标记,无其他内容的void元素

    7.列表元素

    <li>:显示列表项

    <ol>或<ul>:包围列表项,其中,<ol>将作为有序列表显示,<ul>将显示为一个无序列表。(unordered list = ul,ordered list = ol,list item = li)

    可以在列表中嵌一个列表,在<li>元素中嵌套,称为嵌套列表。

    还有另外一类列表:定义列表

    <dt>:定义术语

    <dd>:定义描述

    8.使用字符实体

    当遇到某个字符在编辑器无法输入(如<、>、或者版权符号)时使用

    <:&lt

    >:&gt

    &:&amp

    版权符号:&copyright

    9.其它元素

    <code>:用来显示计算机程序代码

    <em>:用来标记想用不同方式展示的文本,比如想强调一个要点

    <time>:用来告诉浏览器这个内容是一个日期或时间,或者同时包含日期和时间

    <strong>:用来标记希望特别强调的文本

    <pre>:当希望浏览器按你输入的方式原样显示文本时,使用这个元素来指定文本的格式。

    10.页面创建过程

    画出草图—创建略图—写出HTML

    使用与内容含义最接近的元素,如使用列表就不要使用段落元素

    11.<a>的title属性

    提供链接信息,一般鼠标悬浮显示内容。不要使用类似“单击这里”或“这一页”之类的无意义链接标签。

    12.使用id属性为<a>创建目标

    当需要链接目标页的指定位置时,可以在链接中加入#和目标标识符来定位,如

    <a href="index.html#chai">See Chai Tea</a>

     可以在长文档的顶部定义一个"top",然后再下面定义一个"Back to top",如

    <a href="#top">Back to top</a>

    13.<a>的target属性

    target="_blank":浏览器总是打开一个新窗口来显示页面

    当指定了相同的target名称,会在同一个弹出窗口中打开。

    14.在网页中使用图像

    web上最常用的是3种格式:JPEG 、PNG和GIF

    JPEG:照片和复杂图像使用

    • 最适合连续色调图像,如照片
    • 可以表示包含多达1600万种不同颜色的图像
    • 是一种“有损”格式,因为缩小文件大小时会丢掉图像的一些信息
    • 不支持透明度
    • 文件比较小,以便web页面更高效地显示
    • 不支持动画

    PNG或GIF:单色图像、logo和几何图形使用

    • PNG最适合单色图像和线条构成的图像(如logo、剪贴画和图像中的小文本)
    • PNG可以表示包含上百万种不同颜色的图像,有3种:PNG-8、PNG-16、PNG-32,取决于需要表示多少种颜色
    • PNG会压缩文件来缩小文件大小,不过不会丢掉信息,是“无损”格式
    • 允许设置为“透明”,使图像下面的东西可以显示出来
    • 与相应的JPEG文件相比会更大一些,不过取决于使用的颜色数,可能比相应的GIF文件小,也可能更大
    • 类似于PNG,GIF最适合单色图像和线条构成的图像(如logo、剪贴画和图像中的小文本)
    • GIF可以表示最多256种不同颜色的图像
    • GIF也是一种“无损”的格式
    • GIF也支持透明度,不过只允许一种颜色设置为“透明”
    • GIF文件往往比相应的JPEG文件大
    • 支持动画

    <img>是内联元素,不会在前面或后面插入换行。并且也是void元素。

     alt属性可以显示提示内容,如果图像未能显示,则使用这个文本来代替,如

    <img src = "http://www.baidu.com" alt = "百度一下">

    width和height属性控制页面中显示图像的宽度和高度,使用像素数指定,不需要px,如果通过这两个属性来调整图片大小,仍会下载原图,占用网络资源

    CSS像素:1英寸的1/96(96ppi),对于一个3''宽X3''高的图像,要使用96(像素)X3(英寸)=288*288像素

    标准及其他

    1.发展

    HTML1.0~2.0:1989~1991,页面不好看,已经支持超文本,没有人关心表现。

    HTML3:1995,浏览器战争在Netscape和Microsoft之间展开,通常必须写两个单独的页面,一个用于Netscape,一个用于IE。

    HTML4:1998,战争结束,万维网协会成立(World Wide Web Consortium),创建了唯一一个HTML标准,结构和表现分离。

    HTML4.0.1:1999,只是做了一些修补。

    XHTML1.0:2001,XML与HTML的结合体,XHTML承诺由于其严格,再加上提供的一些新方法,只要遵循这个标准,Web争端就可平息。但是大多数人很讨厌。

    HTML5:2009~2012,支持HTML4.0.1标准的大部分特性,还提供了一些新特性,如支持类似博客的元素、新的视频和图形功能,HTML5注定成为标准。

    2.doctype

    <!DOCTYPE html PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml111/DTD/xhtml111.dtd">
    <!doctype html>

    html:表示<html>是页面的根元素

    PUBLIC:表示HTML4.01标准时公共可用的

    "-//W3C//DTD HTML 4.01//EN":表示我们在使用HTML4.01版本,另外这个HTML标记用英语编写

    "http://www.w3.org/TR/html4/strict.dtd":指向一个文件,标识这个特定的标准

    3.浏览器适用版本

    HTML2012:可用于IE9,chrome17,Firefox10,Safari5,Opera11

    HTML2012+:可用于以上所有浏览器以及它们各自的新版本



     

     

  • 相关阅读:
    js打印的两种方法
    C# VS2010中,用微软自带的System.Data.OracleClient来连接Oracle数据库
    js获取本月第几周和本年第几周
    [转]优化数据库大幅度提高Oracle的性能
    sass的循环for,while,each
    sass的mixin,extend,placeholder,function
    float,absolute脱离文档流的总结
    React ref的用法
    cloneNode与事件拷贝
    mobx动态添加observable
  • 原文地址:https://www.cnblogs.com/KevinG/p/3615051.html
Copyright © 2011-2022 走看看