HTML&CSS设计与构建网站 笔记HTML
更新:HHH   时间:2023-1-7


1.<p>中的特殊符号

    当浏览器遇到2个或更多的空格(回车)会显示成一个空格。


&nbsp;  空格

&amp;   &

&lt;       <

&gt;      >

&quot;   "

&qpos;   '

<br /> 回车

2.语义标记


<em> 重点文字

<blockquote>  缩进,表明引用


3.<a>


target='_blank'

href='mailto:sldjfd@163.com'

href='#id' 返回到当前页面指定id的元素位置

href='http://sdfsdf/#id' 返回到sdfsdf页面指定id的元素位置



4.<figure>

  <figcaption>


大家在写xhtml、html中常常用到一种图片列表,图片+标题或者图片+标题+简单描述。以前的常规写法:

<li>
<img src="" /><p>title</P>
</li>

而在html5中有了新标签更能语义化的定义出这中图片列表,那就是figure标签。

w3c赋予的定义:figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

实例代码:

<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

figure用来代替原来li标签,P标签谁来取代呢?答案就是:figcaption


w3c赋予的定义:figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

那么上面的代码就变成了:

<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>



5.<label>


<form>  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。



6.SWFObject


<form>  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。




使用

 SWFObject library 

播放flash

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject - step 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">
        swfobject.registerObject("myId", "9.0.115", "expressInstall.swf");
    </script>

  </head>
  <body>
    <div>

      <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">

        <param name="movie" value="C:\Users\Administrator\Desktop\1.swf" />
        
            <object type="application/x-shockwave-flash" data="C:\Users\Administrator\Desktop\1.swf" width="780" height="420">
       
                <p>Alternative content</p>
        
             </object>
        
      </object>
    </div>
  </body>
</html>


  • classid (outer object element only, value is always clsid:D27CDB6E-AE6D-11cf-96B8-444553540000)

  • type (inner object element only, value is always application/x-shockwave-flash)

  • data (inner object element only, defines the URL of a SWF)

  • width (both object elements, defines the width of a SWF)

  • height (both object elements, defines the height of a SWF)


  1. The first argument (String, required) specifies the id used in the markup.

  2. The second argument (String, required) specifies the Flash player version your content is published for. It activates the Flash version detection for a SWF to determine whether to show Flash content or force alternative content by doing a DOM manipulation. While Flash version numbers normally consist of major.minor.release.build, SWFObject only looks at the first 3 numbers, so both "WIN 9,0,18,0" (IE) or "Shockwave Flash 9 r18" (all other browsers) will translate to "9.0.18". If you only want to test for a major version you can omit the minor and release numbers, like "9" instead of "9.0.0".

  3. The third argument (String, optional) can be used to activate Adobe express install and specifies the URL of your express install SWF file. Express install displays a standardized Flash plugin download dialog instead of your Flash content when the required plugin version is not available. A default expressInstall.swf file is packaged with the project. It also contains the corresponding expressInstall.fla and AS files (in the SRC directory) to let you create your own custom express install experience. Please note that express install will only fire once (the first time that it is invoked), that it is only supported by Flash Player 6.0.65 or higher on Win or Mac platforms, and that it requires a minimal SWF size of 310x137px.

  4. The fourth argument (JavaScript function, optional) can be used to define a callback function that is called on both success or failure of creating a Flash plug-in <object> on the page (see API documentation)


https://code.google.com/p/swfobject/wiki/documentation



使用

 SWFObject 自动加载

播放flash

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>
    
    <script type="text/javascript">
    swfobject.embedSWF("1.swf", "myContent", "300", "120", "9.0.0");
    </script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>
  </body>
</html>


swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)has five required and five optional arguments:

  1. swfUrl (String, required) specifies the URL of your SWF

  2. id (String, required) specifies the id of the HTML element (containing your alternative content) you would like to have replaced by your Flash content

  3. width (String, required) specifies the width of your SWF

  4. height (String, required) specifies the height of your SWF

  5. version (String, required) specifies the Flash player version your SWF is published for (format is: "major.minor.release" or "major")








返回web开发教程...