html傻瓜式教程----html入门_html自学怎么入门资源-CSDN下载

共6个文件

htm：6个

4星 · 超过85%的资源需积分: 33 40 浏览量 2008-09-16 16:42:19 上传评论收藏 16KB ZIP 举报

HTML，全称HyperText Markup Language，是用于创建网页的标准标记语言。这个“html傻瓜式教程——html入门”应该是为了帮助初学者快速掌握HTML基础知识。HTML由一系列元素组成，这些元素通过标签来定义，用于组织网页的内容和结构。在HTML中，最基本的元素包括标题（`<h1>`至`<h6>`）、段落（``）、链接（`<a>`）、图像（`<img>`）等。标题元素用于设定网页的主要标题，按照级别从1到6，数字越大，标题越小。段落元素``则用于组织文本内容，而链接元素`<a>`则可以创建超链接，指向其他网页或资源。图像元素`<img>`用于插入图片，通常需要指定`src`属性来指定图片的URL。 HTML文档的结构通常分为头部（`<head>`）和主体（`<body>`）。头部包含元信息，如字符集设置（`<meta charset="UTF-8">`），而主体则包含用户可见的内容。在主体中，我们还可以使用`<div>`元素进行分块，`<ul>`和`<li>`创建无序列表，`<ol>`和`<li>`创建有序列表，`<table>`构建表格，`<form>`创建表单，以及`<input>`定义各种类型的输入字段，如文本输入、复选框、单选按钮等。此外，HTML5引入了一些新的元素，如`<header>`、`<footer>`、`<nav>`和`<article>`，这些元素帮助更好地描述网页的结构，提升语义化。例如，`<header>`常用于页眉，`<footer>`用于页脚，`<nav>`用于导航链接，`<article>`则代表独立的内容单元。 CSS（Cascading Style Sheets）通常与HTML一起使用，以控制网页的样式和布局。通过选择器（如元素选择器、类选择器、ID选择器等）和属性（如color、font-size、background-color等），我们可以改变HTML元素的颜色、字体、大小、位置等视觉效果。CSS还可以实现响应式设计，使网页在不同设备上显示得更友好。 HTML学习的过程中，理解盒模型（Box Model）的概念至关重要，它包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。这些元素决定了元素的实际尺寸和相互间距。 HTML是构建网页的基础，掌握了HTML，就能创建出具有基本结构和内容的静态网页。通过进一步学习CSS和JavaScript，你可以创建更具交互性和动态效果的网页。这个“html傻瓜式教程——html入门”应该会覆盖这些基础概念，帮助初学者迈入Web开发的大门。

资源推荐

资源详情

资源评论

收起资源包目录

html.zip （6个子文件）

html

5.htm 6KB

1.htm 16KB

6.HTM 17KB

3.HTM 5KB

2.HTM 13KB

4.htm 6KB

这一次我来给大家介绍frame的使用技巧： frame作为html语言中的一部分，在网页制作中占据着重要的地位。大家看到很多网页上都好像windows下的资源管理器一样，在左边点击相应的唇樱冶呔突嵊邢嘤Φ耐诚允尽＞腿缥颐墙胗氏涞氖焙蛞谎Ｕ庑┒际鞘褂胒rame的结果。 下面我来给大家介绍frame的具体使用方法。 使用frame必须首先用frameset来定义，可以说frameset就是frame的一个“统治者”。在html文档中，可以有frameset元素或者body元素，但是绝对不能同时使用这两种元素。 frameset元素的使用： <TABLE class=code style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=5 width="100%" bgColor=#e0e0e0 border=0> <TBODY> <TR> <TD width="100%">(1) <html> (2) <head><title>frameset元素的使用</title></head> (3) <frameset> (4)  <frame> (5)  <frame> (6) </frameset> (7) </html></TD></TR></TBODY></TABLE> 当然了，这个html文档在浏览器上什么也显示不出来。只是告诉大家最基本的frameset及frame的使用方法。 frameset是确定网页分框的定义，其属性<A href="http://www.frontfree.net/view/article_667_page1.html#cols及rows">rols及rows</A>、<A class=blue href="http://www.frontfree.net/view/article_667_page1.html#border">border</A>将在下面给大家介绍。 frame是frameset定义的每个“网页分框”的定义，其属性<A class=blue href="http://www.frontfree.net/view/article_667_page1.html#name">name</A>、<A class=blue href="http://www.frontfree.net/view/article_667_page1.html#scrolling">scrolling及noresize</A>、<A class=blue href="http://www.frontfree.net/view/article_667_page1.html#margin">marginHeight及marginWidth</A>、<A class=blue href="http://www.frontfree.net/view/article_667_page1.html#frameborder">frameborder</A>也将在下面给大家介绍。 在本篇文章中，我还要给大家介绍<A class=blue href="http://www.frontfree.net/view/article_667_page1.html#iframe">浮动框架</A>、<A class=blue href="http://www.frontfree.net/view/article_667_page1.html#frame_page">超链接与框架</A>的制作方法。 <A id=cols及rows name=cols及rows>frameset元素的cols及rows属性</A> 属性说明：cols及rows的作用是设置frame的宽度及高度 <TABLE class=code style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=4 width="100%" bgColor=#e0e0e0 border=0> <TBODY> <TR> <TD width="100%">(1) <html> (2) <head><title>frameset元素中cols及rows属性的使用</title></head> (3) <frameset cols="20%,200,*"> (4)  <frame> (5)   <frameset rows="30%,*"> (6)    <frame> (7)    <frame> (8)   </frameset> (9)  <frame> (10)  <frame> (11) </frameset> (12) </html> </TD></TR></TBODY></TABLE> 这段文档的显示效果如下图所示 <IMG height=282 src="http://www.netbei.com/Article/UploadFiles/200505/20050524003139231.gif" width=435 border=0> 示例说明： 第三行中的语句cols="20%,400,*" 定义了浏览器中frame的“列数”。20%说明最左边的frame占据整个浏览器宽度的百分比，400说明中间的frame占据整个浏览器的宽度是400个像素，*则说明除去左边和中间的frame以外的地方，其余全部留给最右边的frame。 第4、9、10行的frame是<frameset cols="20%,400,*">语句定义后的每个“框架”的各自定义。同样，第6、7行的frame是<frameset rows="30%,*">语句所定义的“框架”的各自定义。  第二个frameset定义在一个frame之内，大家也从浏览器的结果看来了，横向的“框架”只出现在最中间的列向“框架”之中。 可以试图改变浏览器窗口的大小，就可以看出中间的frame的宽度是始终不变的，大小总是400像素。最左边的frame所占的比例总是总宽度的20%，剩下的宽度就留给了最右边的frame。横向frame同理。 <A id=border name=border>frameset元素的border属性</A> 属性说明：设置frame之间的距离，包括3-D边框 <TABLE class=code style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=4 width="100%" bgColor=#e0e0e0 border=0> <TBODY> <TR> <TD width="100%">(1) <html> (2) <head><title> frameset元素中border属性的使用</title></head> (3) <frameset cols="20%,60%,*" border=10> (4)  <frame> (5)  <frame> (6)  <frame> (7) </frameset> (8) </html> </TD></TR></TBODY></TABLE> 这段文档的显示效果如下图所示 示例说明： <UL type=square> <LI>如图，frame之间的宽度现在为10个像素。 <LI>如果定义border属性的值为0，则在浏览器中将不会看到边界。 <LI>同样，framespacing也可以设定frame之间的宽度，只不过framespacing设定的是附加的空间。 <LI>另外：bordercolor属性作用是设定边框的颜色，颜色值为标准RGB颜色值。 </LI></UL> <IMG height=282 src="http://www.netbei.com/Article/UploadFiles/200505/20050524003140480.gif" width=435 border=0> <A id=name name=name>frame元素的name属性</A> 属性说明：设置frame的名字 <TABLE class=code style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=4 width="100%" bgColor=#e0e0e0 border=0> <TBODY> <TR> <TD width="100%">(1) <html> (2) <head><title> frame元素中name属性的使用</title></head> (3) <frameset cols="50%,*"> (4)  <frame name="left" src="html语言教程1.htm"> (5)  <frame name="right" src="html语言教程2.htm"> (6) </frameset> (7) </html> </TD></TR></TBODY></TABLE> 说明：框架的名称并不会影响到框架内显示的内容，名称的作用是指定相应框架链接的显示内容。 <A id=scrolling name=scrolling>frameset元素的scrolling属性及noresize属性</A> 属性说明： <BLOCKQUOTE> scrolling:决定frame是否可以使用滚动条 noresize:决定frame是否可以改变大小</BLOCKQUOTE> <TABLE class=code style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=4 width="100%" bgColor=#e0e0e0 border=0> <TBODY> <TR> <TD width="100%">(1) <html> (2) <head><title> frame元素中scrolling属性及noresize属性的使用</title></head> (3) <frameset cols="30%,40%,*"> (4)  <frame name="left" src="html语言教程1.htm" scrolling=no> (5)  <frame name="center" src="html语言教程2.htm" noresize=true> (6)  <frame name="right" src="html语言教程3.htm" scrolling=yes> (7) </frameset> (8) </html> </TD></TR></TBODY></TABLE> 这段文档的显示效果如下图所示 示例说明： 如图，左边的frame使用了scrolling=no的属性，则无论需要显示的页面有多大，都不会有滚动条出现。中间的frame使用了noresize=true属性，这用户不能调整frame的大小（大家可以看到以前例子中的frame是可以调整大小的）。最右边的frame使用了scrolling=yes的属性

评论收藏

内容反馈