html基础知识2

    xiaoxiao2021-03-25  220

    HTML 布局 网页布局对改善网站的外观非常重要 使用 <div> 元素的网页布局 <html> <head> <style type="text/css"> div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99;height:200px;width:150px;float:left;} div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;} div#footer {background-color:#99bbbb;clear:both;text-align:center;} h1 {margin-bottom:0;} h2 {margin-bottom:0;font-size:18px;} ul {margin:0;} li {list-style:none;} </style> </head> <body> <div id="container"> <div id="header"> <h1>Main Title of Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright W3School.com.cn</div> </div> </body> </html> 可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观 提示:即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!

    HTML 布局 - 使用表格

    使用 HTML <table> 标签是创建布局的一种简单的方式 <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#99bbbb;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr valign="top"> <td style="background-color:#ffff99;width:100px;text-align:top;"> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#99bbbb;text-align:center;"> Copyright W3School.com.cn</td> </tr> </table> </body> </html> 提示:使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局 提示:由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们) HTML 表单和输入 在 HTML 页面创建文本域。用户可以在文本域中写入文本 <body> <form> 名: <input type="text" name="firstname"> <br /> 姓: <input type="text" name="lastname"> </form> </body> 密码: <input type="password" name="password">

    表单

    表单是一个包含表单元素的区域。

    表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。

    表单使用表单标签(<form>)定义

    输入

    多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

    文本域(Text Fields)

    当用户要在表单中键入字母、数字等内容时,就会用到文本域。

    <form> First name:  <input type="text" name="firstname" /> <br /> Last name:  <input type="text" name="lastname" /> </form> 注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符

    单选按钮(Radio Buttons)

    当用户从若干给定的的选择中选取其一时,就会用到单选框。

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

    复选框(Checkboxes)

    当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。

    <form> <input type="checkbox" name="bike" /> I have a bike <br /> <input type="checkbox" name="car" /> I have a car </form> 简单的下拉列表 <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> selected="selected"   option里面加入这句可以让下拉列表显示这一行 HTML 框架 垂直框架 <frameset cols="25%,50%,25%">   <frame src="/example/html/frame_a.html">   <frame src="/example/html/frame_b.html">   <frame src="/example/html/frame_c.html"> </frameset> 水平框架 <frameset rows="25%,50%,25%">   <frame src="/example/html/frame_a.html">   <frame src="/example/html/frame_b.html">   <frame src="/example/html/frame_c.html"> </frameset>

    框架

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

    使用框架的坏处:

    开发人员必须同时跟踪更多的HTML文档很难打印整张页面

    框架标签(Frame)

    Frame 标签定义了放置在每个框架中的 HTML 文档。

    在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中:

    <frameset cols="25%,75%">    <frame src="frame_a.htm">    <frame src="frame_b.htm"> </frameset>

    Iframe - 删除边框

    frameborder 属性规定是否显示 iframe 周围的边框。

    设置属性值为 "0" 就可以移除边框:

    实例

    <iframe src="demo_iframe.htm" frameborder="0"></iframe>

    Iframe - 设置高度和宽度

    height 和 width 属性用于规定 iframe 的高度和宽度。

    属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。

    实例

    <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

    使用 iframe 作为链接的目标

    iframe 可用作链接的目标(target)。

    链接的 target 属性必须引用 iframe 的 name 属性:

    实例

    <iframe src="demo_iframe.htm"  name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn"  target="iframe_a">W3School.com.cn</a></p> 搭配良好的背景和颜色 <html> <body bgcolor="#d0d0d0"> <p> 这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。 </p> <p> 这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。 </p> </body> </html>

    背景(Backgrounds)

    <body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

    背景颜色(Bgcolor)

    背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

    <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">

    以上的代码均将背景颜色设置为黑色。

    背景(Background)

    背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

    <body background="clouds.gif"> <body background="http://www.w3school.com.cn/clouds.gif"> URL可以是相对地址,如第一行代码。也可以使绝对地址,如第二行代码。

    提示:如果你打算使用背景图片,你需要紧记一下几点:

    背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k。背景图像是否与页面中的其他图象搭配良好。背景图像是否与页面中的文字颜色搭配良好。图像在页面中平铺后,看上去还可以吗?对文字的注意力被背景图像喧宾夺主了吗? HTML 颜色 HTML <!DOCTYPE> <!DOCTYPE> 声明帮助浏览器正确地显示网页

    Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。

    HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

    <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。

    <head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

    以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>

    HTML <base> 元素

    <base> 标签为页面上的所有链接规定默认地址或默认目标(target):

    <head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head>

    HTML <link> 元素

    <link> 标签定义文档与外部资源之间的关系。

    <link> 标签最常用于连接样式表:

    <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

    HTML <style> 元素

    <style> 标签用于为 HTML 文档定义样式信息。

    您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:

    <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> HTML <meta> 元素

    元数据(metadata)是关于数据的信息。

    <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。

    典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

    <meta> 标签始终位于 head 元素中。

    元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 JavaScript 最常用于图片操作、表单验证以及内容动态更新 <noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时 HTML 字符实体

    HTML 实体

    在 HTML 中,某些字符是预留的。

    在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

    如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体

    HTML 中的常用字符实体是不间断空格( )。

    浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用   字符实体 HTML 统一资源定位器 scheme - 定义因特网服务的类型。最常见的类型是 httphost - 定义域主机(http 的默认主机是 www)domain - 定义因特网域名,比如 w3school.com.cn:port - 定义主机上的端口号(http 的默认端口号是 80)path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。filename - 定义文档/资源的名称 HTML 多媒体

    Web 上的多媒体指的是音效、音乐、视频和动画。

    现代网络浏览器已支持很多多媒体格式

    WAVE 是因特网上最受欢迎的无压缩声音格式,所有流行的浏览器都支持它。如果您需要未经压缩的声音(音乐或演讲),那么您应该使用 WAVE 格式。

    MP3 是最新的 压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐,那么 MP3 是一个选项。 HTML Object 元素

    辅助应用程序(helper application)是可由浏览器启动的程序。辅助应用程序也称为插件。

    辅助程序可用于播放音频和视频(以及其他)。辅助程序是使用 <object> 标签来加载的。

    使用辅助程序播放视频和音频的一个优势是,您能够允许用户来控制部分或全部播放设置。

    大多数辅助应用程序允许对音量设置和播放功能(比如后退、暂停、停止和播放)的手工(或程序的)控制  XHTML         XHTML 指可扩展超文本标签语言        XHTML 的目标是取代 HTML       XHTML 与 HTML 4.01 几乎是相同的         XHTML 是作为一种 XML 应用被重新定义的 HTML      所有新的浏览器都支持 XHTML         XHTML 是 HTML 与 XML(扩展标记语言)的结合物         XML 用来描述数据,而 HTML 则用来显示数据      最主要的不同: XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。            

    XHTML 文档必须拥有一个根元素

    所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下:

    <html> <head> ... </head> <body> ... </body> </html> 属性名称必须小写属性值必须加引号属性不能简写用 Id 属性代替 name 属性XHTML DTD 定义了强制使用的 HTML 元素

        重要的兼容性提示:

         你应该在 "/" 符号前添加一个额外的空格,以使你的 XHTML 与当今的浏览器相兼容                  语言属性(lang)      lang 属性应用于几乎所有的 XHTML 元素。它定义元素内部的内容的所用语言的类型。      如果在某元素中使用 lang 属性,就必须添加额外的 xml:lang,像这样:      <div  lang="no" xml:lang="no">Heia Norge!</div>      强制使用的 XHTML 元素      所有 XHTML 文档必须进行文件类型声明(DOCTYPE declaration)。在 XHTML 文档中必须存在html、head、body元素,而 title 元素必须位于在 head 元素中。      下面是一个最小化的 XHTML 文件模板: <!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> </head> <body> </body> </html>

    存在三种XHTML文档类型:

    STRICT(严格类型)TRANSITIONAL(过渡类型)FRAMESET(框架类型) XHTML 事件属性
    转载请注明原文地址: https://ju.6miu.com/read-2214.html

    最新回复(0)