HTML的作用和新标签

语义化标签的含义:

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码同时让浏览器的爬虫和机器很好地解析。可以在没有CSS的情况下,页面也能呈现出好的内容结构、代码结构:

一、为了裸奔是更好看;

二、用户体验,例如title、alt用于解释名词或解释图片信息、label标签的活用;

三、有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

四、方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

五、便于团队开发和维护,语义化更具有可读性,下一步把网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

hgroup元素

hgroup元素代表网页“section”的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合

<hgroup>

    <h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1>

    <h2>HTML 5</h2>

</hgroup>

aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。(特殊的section

article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。

<article>

    <p>内容</p>

    <aside>

        <h1>作者简介</h1>

        <p>小北,前端一枚</p>

    </aside>

</article>

section元素

section元素代表文档中的可以是指一篇文章里按照主题的分段;可以是指一个页面里的分组。

section通常还带标题,虽然html5section会自动给标题h1-h6降级,但是最好手动给他们降级。如下:

<section>

    <h1>section是啥?</h1>

    <article>

        <h2>关于section</h1>

        <p>section的介绍</p>

        <section>

            <h3>关于其他</h3>

            <p>关于其他section的介绍</p>

        </section>

    </article>

</section>

 

表格代码

<table>

     <tr>

        <td>娱乐项目</td>

        <td>项目支出</td>

    </tr>

    <tr>

        <td>聚餐</td>

        <td>200元</td>

    </tr>

</table>

time 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码,这样, 举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

-- 示列 
<p>我们在每天早上 <time>9:00</time> 开始营业。</p> 
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

 

mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

-- 示列 
<p>Do not forget to buy <mark>milk</mark> today.</p>

 

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

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

 

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

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

 

contextmenu 添加到系统右键菜单 [貌似这个功能只有firefox支持,很悲催的]

-- 示列 
<div>添加到系统右键菜单< contextmenu=mymenu /div> <menu type="context" id="mymenu" />

 

 

CSS标签盒子模型

包括:内容、内边距、边框、外边距;

 

document对象有哪些

writeln()

等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

close()

关闭用document.open()方法打开的输出流,并显示选定的数据。

getElementById()

返回对拥有指定id的第一个对象的引用

getElementsByName()

返回带有指定名称的对象集合

getElementsByTagName()返回带有指定标签名的对象集合

open()

打开一个流,一收集来自任何document.write()或document.writeIn方法的输出。

writeIn()

等同于write()方法,不同的在每一个表达式之后写一个换行符。

例如:

<html>

<body>

 

<script type="text/javascript">

document.write("Hello World! ","Hello You! ","<p style='color:blue;'>Hello World!</p>")

</script>

 

</body>

</html>

 

padding的属性

padding:1px 1px 1px 1px;上 右 下 左

padding:1px 1px 1px;上 左右 下

padding:1px 1px;上下 左右

padding:1px;上 下 左 右

 

<!doctype html>的含义

 

html5标准网页声明,原先的是一串很长的字符串,现在是这个简介形式,支持html5标准的主流浏览器都认识这个声明,表明网页采用html5

 

列出你所知道的可以改变网页布局的属性(越多越好).

相对定位relative\绝对定位absolute。定位块级元素进行布局的方法

使用leftrighttopbottom属性布局相对定位元素

 

 

 

全局属性

 

事件属性:
就是当用户操作一个 HTML 元素(如按钮,文本框,选择框等)时,触发某种事件(如点击事件onclick、值变化事件onchange等),从而启动一段 JavaScript动作。
常用的事件有几类:
1. 窗口事件,如onload(当页面被载入时执行),onunload;
2. 表单元素事件,如onchange, onsubmit,onreset,onselect,onblur,onfocus;
3. 键盘事件,如onkeydown,onkeypress,onkeyup;
4. 鼠标事件,如onclick, ondbclick,onmousedown, onmouseup,onmouseover,onmouseout,onmousemove;
等等

 

 

 

iframe

  经常和网站打交道或者经常建站的朋友对iframe肯定不陌生,网站有了iframe会变得更加美观、大气。对于初涉互联网的新手来说,iframe并不熟悉,那么iframe到底是什么?iframe用法有哪些呢?
 

 

  iframe是什么

  iframe就是我们常用的iframe标签:<iframe>。iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多,主要区别在于对iframe标签定义的形式不同,例如定义iframe的长宽高。

  iframe用法详解

  首先需要了解iframe标签的写法,和大多HTML标签写法相同,iframe标签输入形式为:<iframe>和</iframe>。以<iframe>开头,以</iframe>结尾,将需要的文本内容添加到两个标签之间即可。iframe标签内的内容可以做为浏览器不支持iframe标签时显示。

  iframe标签的属性

  align:left、right、top、middle、bottom。用于规定如何根据周围的元素来对齐此框架。不赞成使用。请使用样式代替。

  frameborder:1、0。用于规定是否显示框架周围的边框。

  height:pixels、%。用于规定iframe的高度。

  longdesc:URL。规定一个页面,该页面包含了有关iframe的较长描述。

  marginheight:pixels。定义iframe的顶部和底部的边距。 

  marginwidth:pixels。定义iframe的左侧和右侧的边距。 

  name:frame_name。规定iframe的名称。 

  scrolling:yes、no、auto。规定是否在iframe中显示滚动条。
 
  src:URL。规定在iframe中显示的文档的URL。 

  width:pixels。%。定义iframe的宽度。 
 
  iframe用法案例

  例子1。

  <iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>

 width插入页的宽;height插入页的高;scrolling 是否显示页面滚动条(可选的参数为 auto、yes、no,如果省略这个参数,则默认为auto);frameborder  边框大小;

 注意:URL建议用绝对路径

 传说中百DU用:<iframe width=0 height=0 frameborder=0 scrolling=auto src=www.zzidc.com></iframe>

  黑了88*8。。。

 例子2。

 如果一个页面里面有框架。。随便点页面里的连接,要求在这个<iframe> 里打开。在iframe 中加入name=** (**自己设定)

<iframe name=**  ></iframe>

 然后在修改默认打开模式,:网页HEAD中加上<a href=URL target=**>或部分连接的目标框架设为(**)

 例子3。

 要插入一个页面。要求只拿中间一部分。其他的都不要。,。。

 代码:

<iframe name=123  align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="http://host.zzidc.com/"  frameborder=no scrolling=no  width=776  height=2500></iframe>

 控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0;控制框架覆盖上部分的深度 vspace=-170

 scrolling滚动条要否(auto、yes、no)   frameborder框架的边框大小,width=776  height=2500此框架的大小。

 一、页面内加入iframe

<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>,

scrolling表示是否显示页面滚动条,可选的参数为auto、yes、no,如果省略这个参数,则默认为auto。

 二、超链接指向这个嵌入的网页,只要给这个iframe命名就可以了。方法是<iframe name=**>,例如我命名为aa,写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src=http://host.zzidc.com></iframe>,然后,网页上的超链接语句应该写为:<a  href=URL target=aa>

 三、如果把frameborder设为1,效果就像文本框一样

 透明的iframe的用法

 必需IE5.5以上版本才支持

 在transparentBody.htm文件的<body>标签中,我已经加入了style="background-color=transparent" 通过以下四种iframe的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解:

 <iframe ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></iframe>

 <iframe ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE=" </iframe>

 <iframe ID="Frame3" SRC="transparentBody.htm"></iframe>

 <iframe ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </iframe>

 

posted @ 2016-07-16 09:18  黄昏大侠  阅读(977)  评论(0编辑  收藏  举报