html基础知识学习总结_第1页
html基础知识学习总结_第2页
html基础知识学习总结_第3页
html基础知识学习总结_第4页
html基础知识学习总结_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

目录HYPERLINK\o"一：HTML元素"HTML元素HYPERLINK基本HTML标签HTML属性文本格式化字符实体（特殊字符）HTML链接框架HYPERLINK表格HTML列表HTML表单和输入HTML图片HTML背景HTML颜色HTML基本知识总结一:HTML元素HTML文档是由HTML元素构成的文本文件。HTML元素是通过使用HTML标签进行定义的。HTML标签1.HTML标签是用来标记HTML元素的。2.HTML标签被<和>符号包围。3.这些包围的符号叫作尖括号。4.HTML标签是成对出现的。例如<b>和</b>。5.位于起始标签和终止标签之间的文本是元素的内容。6.HTML标签对大小写不敏感，<b>和<B>的作用的相同的<html><head><title>页面的标题</title></head><body><p>这是我的第一个页面。</p><b>此文本是粗体的。</b></body></html>这就是一个HTML元素：<b>此文本是粗体的。</b>这个HTML元素由起始标签<b>开始。这个元素的内容是：“此文本是粗体的。”。这个HTML元素由终止标签</b>结尾。<b>标签的作用是定义一个显示为粗体的HTML元素。这也是一个HTML元素：<body><p>这是我的第一个页面。</p><b>此文本是粗体的。</b></body>这个HTML元素开始于<body>标签，结束于</body>标签。<body>标签的作用是定义HTML文件中的容纳body的HTML元素。二:基本HTML标签1.标题标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题。<h6>定义最小的标题。<h1>标题一</h1><h2>标题二</h2>*HTML会自动在标题前后添加一个额外的折行。2.段落 段落使用<p>标签进行定义。 <p>Thisisaparagraph</p> *HTML会自动在段落前后添加一个额外的空行。3.换行符 <p>This<br>isapara<br>graphwithlinebreaks</p><br>标签是空白标签，由于关闭标签没有任何意义，因此它没有类似</br>的终止标签。4.HTML注释 格式:<!--注释内容-->注意:当您写HTML文本的时候，你永远也没法确定这些文本在另一台显示器上是如何显示的。一些人使用大显示器，而另一些使用小的。当用户调整视窗的分辨率时，这些文本就会被重新格式化。所以不要通过在文本中添加空行和空格的办法在你的编辑器中格式化文本。HTML会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外，在HTML中，一个空行也被当作一个空格。使用空的段落标记<p>去插入一个空行是个坏习惯。用<br>标签代替它！（但是不要用<br>标签去创建列表。不要着急，您将在稍后的篇幅学习到HTML列表。）您也许已经注意到了，在没有结束标签</p>的情况下，<p>标签依然可以正常工作。不过不要这样做！下一个版本的HTML将不允许忽略任何的结束标签。HTML会自动地在某些元素前后添加一个额外的空行，比如段落、标题元素前后。使用水平线(<hr>标签)来分隔文章中的小节是一个办法（但并不是唯一的办法）。三.HTML属性作用:属性为HTML元素提供附加信息。1.HTML标签的属性属性总是以名称/值对(类似于java中的键值对)的形式出现，比如：name="value"*属性总是在HTML元素的开始标签中规定。例:(红字部分为属性)<h1>定义标题的开始。</h1><h1align="center">拥有关于对齐方式的附加信息</h1>2.使用小写属性属性和属性值对大小写不敏感。不过，万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值，而XHTML要求使用小写属性/属性值。3.始终为属性值加引号属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John"ShotGun"Nelson'四:文本格式化五:字符实体字符实体一些字符在HTML中拥有特殊的含义，比如小于号(<)用于定义HTML标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在HTML源码中插入字符实体。字符实体有三部分：一个和号(&)，一个实体名称，或者#和一个实体编号，以及一个分号(;)。要在HTML文档中显示小于号，我们需要这样写：<或者<注意：实体对大小写敏感。六:HTML链接关键标签:<a></a>1.锚标签和Href属性HTML使用<a>（锚）标签来创建连接另一个文档的链接。锚可以指向网络上的任何资源：一张HTML页面，一幅图像，一个声音或视频文件等等。创建锚的语法：<ahref="url">Texttobedisplayed</a><a>用来创建锚(锚的开始)。href属性用于定位(注意格式)需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。下面这个锚定义了指向w3school的链接：<ahref="/">VisitW3School!</a>上面的这行在浏览器中显示为这样：VisitW3School!2.Target属性使用Target属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：<ahref="/"target="_blank">VisitW3School!</a>3.锚标签和Name属性Name属性用于创建被命名的锚（namedanchors）。当使用命名锚（namedanchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。以下是命名锚的语法：<aname="label">Texttobedisplayed</a>name属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。下面这行定义了命名锚：<aname="tips">UsefulTipsSection</a>你会注意到，命名锚会以特殊的方式来显示。将#符号和锚名称添加到URL的末端，就可以直接链接到tips这个节，就像这样：<ahref="/html/html_links.asp#tips">JumptotheUsefulTipsSection</a>*跳转当前页面的部分关键符号#详解见文件”标签列表01.html”创建没有下划线的链接：关键字text-decoration:none<ahref="../example/html/lastpage.html"style="text-decoration:none">这是一个链接！</a>七:框架关键字:frame简介:通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。使用框架的坏处：开发人员必须同时跟踪更多的HTML文档很难打印整张页面框架结构标签（<frameset>）框架结构标签（<frameset>）定义如何将窗口分割为框架每个frameset定义了一系列行或列rows/columns的值规定了每行或每列占据屏幕的面积框架标签（Frame）Frame标签定义了放置在每个框架中的HTML文档。例:(注意格式)<framesetcols="25%,75%">

<framesrc="frame_a.htm">

<framesrc="frame_b.htm"></frameset>基本的注意事项：假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：(属性)noresize="noresize"。为不支持框架的浏览器添加<noframes>标签。例:<html><framesetcols="25%,50%,25%"> <framesrc="../example/html/frame_a.html"> <framesrc="../example/html/frame_b.html"> <framesrc="../example/html/frame_c.html"><noframes><body>您的浏览器无法处理框架！</body></noframes></frameset></html>例:<ahref="p1.html"target="right">现金收银</a></li><!--target="right"是为了让链接p1.html文件在name=right的地方显示-->(文件:老师文件简单银行界面中的menu.html文件)八:表格1.简介:表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（tabledata），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 2.格式:<table><tr><td></td></tr></table>基本:<thead>,<tbody>和<tfoot>像上述没有指名时一般默认使用其<tbody>表格的表头表格的表头使用<th>标签进行定义。表格中的空单元格在大多数浏览器中，没有内容的表格单元显示得不太好。注意：这个空的单元格的边框没有被显示出来。（不过Firefox(火狐浏览器)可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。常用属性:跨行:rowspan=”n”n表示要跨行的具体数值跨列:colspan=”n”n表示要跨行的具体数值单元格边距:cellpadding表示单元格内容与其边框之间的距离。单元格间距:cellspacing表示单元格之间的距离。bgColor:表示给单元格添加颜色(背景颜色)注意:这里背景颜色为bgColorbackground:单元格背景,可以是纯色,也可是图片例:<tdbgcolor="red">First</td>(纯色)<tdbackground="../i/eg_bg_07.gif">Second</td>(图片)单元格中内容排列问题:<html><body><tablewidth="400"border="1"><tr>//在第一行中<thalign="left">消费项目</th>//消费项目这一列左对齐<thalign="right">一月</th>//这一列右对齐<thalign="right">二月</th>//这一列右对齐(这三列前提是在第一行中)</tr><tr><tdalign="left">衣服</td><tdalign="right">$241.10</td><tdalign="right">$50.20</td></tr><tr><tdalign="left">化妆品</td><tdalign="right">$30.00</td><tdalign="right">$44.45</td></tr><tr><tdalign="left">食物</td><tdalign="right">$730.40</td><tdalign="right">$650.00</td></tr><tr><thalign="left">总计</th><thalign="right">$1001.50</th><thalign="right">$744.65</th></tr></table></body></html>关键字:align(对齐用)九:HTML列表1.无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签。每个列表项始于<li>。例:<ul><li>Coffee</li><li>Milk</li></ul>2.有序列表有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。例:<ol> <li>Coffee</li> <li>Milk</li></ol>3.定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。例:<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>显示结果:CoffeeBlackhotdrinkMilkWhitecolddrink不同类型的无序列表:(关键字:type指定类型)常见类型:disc:实心圆circle:空心圆squre:实心正方形<h4>Disc项目符号列表：</h4><ultype="disc"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>桔子</li></ul><h4>Circle项目符号列表：</h4><ultype="circle"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>桔子</li></ul><h4>Square项目符号列表：</h4><ultype="square"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>桔子</li></ul>不同类型的有序列表:同上指定不同类型的type默认:数字序号A:大写字母序号a:小写字母序号I:大写罗马数字序号(I,II,III,IV,V,VI,VII)I:小写罗马数字序号嵌套列表:<ul><li>茶<ul> <li>红茶</li> <li>绿茶</li></ul></li></ul>十:HTML表单和输入1.表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（<form>）定义。2.文本域（TextFields）当用户要在表单中键入字母、数字等内容时，就会用到文本域。<form>Firstname:<inputtype="text"name="firstname"><br>Lastname:<inputtype="text"name="lastname"></form>3.单选按钮（RadioButtons）当用户从若干给定的的选择中选取其一时，就会用到单选框。<form><inputtype="radio"name="sex"value="male">Male<inputtype="radio"name="sex"value="female">Female</form>4.复选框（Checkboxes）当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。<form><inputtype="checkbox"name="bike">Ihaveabike<br><inputtype="checkbox"name="car">Ihaveacar</form>*5.表单的动作属性（Action）和确认按钮当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。<formname="input"action="html_form_action.asp"method="get">Username:<inputtype="text"name="user"><inputtype="submit"value="Submit"></form>假如您在上面的文本框内键入几个字母，并且点击确认按钮，那么输入数据会被传送到名为"html_form_action.asp"的页面。那一页将显示出输入的结果。6.下拉列表 <select> <optionvalue="hn">湖南省</option> <optionvalue="hb">湖北省</option> <optionvalue="bj"selected>北京市</option>//加上selected:当前选项默认被选中 </select><br> 分组下拉列表: 分组下拉列表: <select> <optgrouplabel="湖北省"> <option>武汉</option> <option>黄冈</option> <option>荆州</option> <option>襄阳</option> </optgroup> <optgrouplabel="湖南省">//optgroup:让”湖南省出现在下拉列表中并加粗” <option>长沙</option> <option>岳阳</option> <option>湘潭</option> <option>张家界</option> </optgroup> </select><br><br>7.按钮 <inputtype="button"value="普通按钮"><br> <inputtype="reset"value="重置按钮"><br> <inputtype="submit"value="提交按钮"><br> *此处的图片也可以当作提交按钮 <inputtype="image"src="001.PNG"><br>十一:HTML图片1.图像标签（<img>）和源属性（Src）在HTML中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。定义图像的语法是：<imgsrc="url"/>URL指存储图像的位置。如果名为"boat.gif"的图像位于的images目录中，那么其URL为/images/boat.gif。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。2.替换文本属性（Alt）alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<imgsrc="boat.gif"alt="BigBoat">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。基本的注意事项：假如某个HTML文件包含十个图像，那么为了正确显示这个页面，需要加载11个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。3.实例:1.调整图片大小<p><imgsrc="../i/eg_mouse.jpg"width="40"height="40"></p><p><imgsrc="../i/eg_mouse.jpg"width="80"height="80"></p>2.制作图像链接<html><body><p>您也可以把图像作为链接来使用：<ahref="../example/html/lastpage.html"><imgborder="0"src="../i/eg_buttonnext.gif"/></a></p></body></html>3.创建图像映射（图像地图）创建带有可供点击区域的图像地图。其中的每个区域都是一个超链接。<html><body><p>请点击图像上的星球，把它们放大。</p><imgsrc="../i/eg_planets.jpg"border="0"usemap="#planetmap"alt="Planets"/><mapname="planetmap"id="planetmap"><areashape="circle"coords="180,139,14"href="../example/html/venus.html"target="_blank"alt="Venus"/>//定位<areashape="circle"coords="129,161,10"href="../example/html/mercur.html"target="_blank"alt="Mercury"/><areashape="rect"coords="0,0,110,260"href="../example/html/sun.html"target="_blank"alt="Sun"/></map><p><b>注释：</b>img元素中的"usemap"属性引用map元素中的"id"或"name"属性（根据

人人文库> 全部分类> 图纸下载 > 毕业设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论