第三章:html语言基础 html是构成网页最基础的要素，我们在开发asp.net的项目时，是把编程与html结合起来一起使用的，所以一 定学好html语言.在这一章中，我们要学习以下几点内容 1:标记的概念： 2:区域的概念： 3:标记的属性： 4:html文档结构 5:超链接概念： 6:段落的概念： 7:换行符的概念： 8:常用的html标记 9:在html文档如使用图像 10:在html文档中使用表格 11:在html文档中使用播放歌曲 12:在html文档中做滚动文字 13:表单与表单元素 14:表单元素的基本知识 标记的概念： 首先看一个简单的html文件： <html> <body gbcolor=red> <head> <title>我的确良</title> </head> <font color=yellow>我的中国心</font> </body></html>其中<html>,<head>,<title>等被称一个标记,这些标记都是有意义的，每一个标记就好像是给浏览器下一个命令，所以我们称这些为标记命令相当于"\n"是在换行一样。标记是用于控制html文档的内容和外观。html中的标记大多数是成对出现的(但不是全部)。一般是形如：<标记> </标记> 区域的概念 我们把<标记> </标记>这一整体被称为一个区域，区域的好处是让html具有结构性，可提高其可读性 标记的属性有些标记是可以含有属性的。比如： <body gbcolor=red>这个标记就是表示把窗体整个的背景色作为红色 html文档结构 html有三个基本部分 1:html部分，每个html文档必须以<html>标记开头，以</html>标记结束 作用：通知浏览器这两个标记之间的内容是一个html文档 2:头部分：形如：<head> </head>。此部分包含文档的标题标题包含在title标记内，以 <title>开始，以</title>结束 3:正文部分：跟在头部分之后的内容。正文包含所需要要显示在网页内的文本，图像，链接，表格等内容。正 文部分以<body>标记开始，以</body>部分结束 一般的html格式形如： <html> <head> <title>标题</title> </head <body> 在这里写上html其它的标记 </body> </html> 超链接概念 在浏览网页时，将鼠标光标移到某一段文字或图片上面，如果会出现"手指形"光标，就表示这是一个链接，在此按下鼠标会链接到另外一个网页 要设置超链接必须要使用<a>标记 其格式如下： <a href="链接的目的对像">链接文本</a> 其中链接的目的对像可以为以下几点情况 1:链接到其它的文档 比如：<a href="test.html">我的链接</a> 2:链接到指定网站: 比如：<a href="http://www.163.net">我的网站</a> 段落的概念 在写文章时，我们可以把某些文字做成一个段。在html中也可以将原文某些内容组成一个段。 <p>用于标记新段落的开始。 比如： 这是我的希望<p>你是多么的快活 说明：标记<p>并没有对应的结束符合</p>请记住 换行符： 标记<br>用于在html文档中指定换行，<br>会在标记的位置添加一个回车符 比如： <p>请跟我学习html语法基础<br>行吗? <P>另一个段落的开始 常用的html标记 上一节谈了html的基本概念，这一节，我们要学习一下html基本的标记 1):设置文字外观的标记 A):<B>： 实现文字加粗<B>文字</B> B):<I>: 实现文字的斜体 C):<U>: 给文字加下画线 D):<SUP>: 给文字设置成上标字 E):<SUB>: 给文字设置为下标字 F):<font>: 用来设置文字的字体,font标记通常带有属性(size,color,face(字体名字)) size:最大值为7,最小值为7 练习： 我是一只小小小鸟 (小字越来越来小,加粗) 想要飞也飞不高(第一，二个飞作为上标，高作为下标) <html> <body> <font size=7>我是一只</font> <b> <font size=7>小</font> <font size=6>小</font> <font size=1>小</font> </b> <font size=7>鸟<p> 想要<sup>飞</sup>也<sup>飞</sup>不<sub>高</sub></font> </body> </html> 2):设置段落的样式标记： a):<H1>--<H6>:这几个标记的用途是设置段落标题的大小级数。 <html> <body> <h1>标题第一级</h1> <h2>标题第二级</h2> <h3>标题第三级</h3> <h4>标题第四级</h4> <h5>标题第五级</h5> <h6>标题第六级</h6> </body> </html> b):<pre>:希望结果显示的文本与html源定义一致。 由于正常下，在浏览器会把多个空格当一个空格来处理，换行符不会作为换行符来对待 <html> <body> <pre> //不要pre试一下 for i=1 to 10 for j=1 to 10 printf("%d",i); </pre> </body> </html> c):使用水平标尺标记 <hr>有几个属性： align:对齐方式 width:对齐宽度(用文档宽度的百分比) size:粗细 noshade:不带阴影 在html文档中使用图像 img标记可以将图像插入到html文档中.语法为 <img src="带路径的图像文件"> 属性： align属性：用来说明图片的对齐位置但是align只能够取left,right不能取中间 下面的方法<center><img src="图像文件"></center>能够把图像放在文档中间 也可以利用图像来实现超级连接： <html> <body> <p align=center> 我的留言板</p> <a href="青鸟.html"><center><img align=center src="c:\a.bmp"></center></a> </body> </html> 在html文档中使用播放歌曲 <embed> 在html文档中做滚动文字 <marquee>标记 behavior:决定如何滚动 direction:滚动方向 scrollamount:每次移动的增量 在html文档中使用表格 1:<tabel>标记可以用来在html文档中创建表. 2:<tr>标记可以用来产生一行 3:<td>标记可以用来产生一列 原则： 每个<td>..</d>构成单栏数据，多个<td>..</td>放在<tr>..</tr>之间构成一行数据。 多个<tr>..</tr>放在<table>..</table>之间即构成一个表格 4:boder属性用于指定边框的宽度。如果将该值设为零，则不显示边框 6:<caption>标记用于添加表的标题:必须紧跟随在<table>之后的位置指定 7:align属性可以设置单元格,或某一行的水平对齐方式它的取值为left,right,center 8:valign性可以设置单元格，或某一行的垂直对齐方式它的取值为top,middle,bottom 9:bgcolor属性用来设置表格的背景色 9:nowrap不自动换行 10:witdh属性用来设置表格的宽度 1):以网页的显示宽度为百分比： 比如：<table width=80%> 2):指定宽度： 比如：<table width=350> 3):如果不设宽度，表格会自动以其中的文字为宽度 11:heigh:用来设置表格的高度 12:cellspacing属性用来设置单元格之间的间距 13:cellpadding属性用来设置单元格边界与内容之间的距离 比如:<table cellspacing=10 cellpadding=10> 练习： 创建不规格表格 1：通过colspan来指定单元格要跨多少列 2: 通过rowspan来指定单元格要跨多少行 3:一定要用在<td colspan或rowspan>中 什么是表单与表单元素(form) 1:表单就相当于vb里面的窗体,而表单元素就相当于一些控件。 所以表单可以看成是表单元素的一个容器,当用户在表单元素里面填写一些信息之后， 就可以直接把表单从客户端传给服务器，服务器那边就通过表单来获取其中表单元素的值 2:表单的标记是：<form> </form> 表单元素的基础知识 表单与表单元素都是属于Html标记，它们直接可以通过IE来解释，不需要通过IIS 所以表单与表单元素都是在客户端来运行的,这些表单元素一定要写在<form>与</form>之间 1:按钮： <input type=button value="显示的文字 name="名字"> 2:文本： <input type=text name="名字" size=大小> 3:密码框： <input type=password name="名字" size=大小> 4:复选框： <input type=checkbox name="名字">显示的文字 5:单选按钮： <input type=radio name="名字">显示的文字 6:下拉框元素： <select name="名字"> <option value="文本" selected>项文本</option> <option value="文本" >项文本</option> </select>
评论