第2章HTML语言基础$[知识目标] 了解HTML文件的基本结构 掌握HTML中文本及多媒体元素的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中
表格
关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载
和
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
单的基本语法8[能力目标]能够编写简单的HTML网页 掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 掌握HTML文件中表格和表单的使用2.1HTML概述 HTML（HyperTextMarkupLanguage）又称超文本标识语言，是网页
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
的最初语言。文件的扩展名：“html”或“htm”。HTML文档是一种纯文本格式的文件，HTML文档的基本结构为：<html><head><title>网页的标题，显示在浏览器标题栏</title></head><body>这是网页上显示的内容，网页的主体部分</body></html> 由“<”和“>”组成的就是标记。在HTML语言中标记分“单标记”和“围堵标记”。2.1.1HTML简介2.1HTML概述 1．围堵标记 格式：<标记>……</标记> 2．单标记 格式：<标记> 只有起始标记，没有结束标记。最常用的单标记是<br>，它表示段内换行。 3．标记属性 格式：<标记属性1属性2属性3……> 各属性间无前后顺序，属性也可以省略，当省略属性时取标记的默认值。2.1.1HTML简介实例 <HTML> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>欢迎访问我的主页</title> <styletype="text/css"> .STYLE11{FONT-SIZE:12px;color:#666666;} </style> <scripttype="text/JavaScript"> <!-- functionMM_jumpMenu(targ,selObj,restore){//v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if(restore)selObj.selectedIndex=0; } //--> </script> </head> <body> <tableborder="0"cellspacing="0"cellpadding="0"width="100%"height="100%"id="table1"> ...... </table> ...... </body> </HTML>2.2.1段落标记 2.2.2文本标记 2.2.3标题显示等级2.2.4列表 2.2文本的编辑 1．段落（<p>） <palign=left/center/right>……</p> 参数align用于设定段落的位置是靠左、靠右还是居中。默认值是靠左. 2．换行<br>不换行<nobr>……</nobr> 单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文本、图像和表格等内容显示于下一行。3.注释标记<!--……-->2.2.1段落标记2.2文本的编辑 1．字体标记<font> 其基本语法格式为： <fontface=？size=？color=？>…</font> Size：设置字体的显示字号，范围是从“1～7”，其中“3”是默认值。 Color：设置文本的颜色，值可以是颜色名（英文，如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FFFFFF代表白色）。 Face：设置文本显示的字体，值为字体的名称。 在文本的标记中还有很多常用的标记，比如表示字体效果的，<b>(黑体)，<i>（斜体），<u>（加下划线）。2.2.2文本标记2.2文本的编辑 2．特殊字符 HTML中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如“<”，这些特殊字符在HTML语言中都有相应的转义符，常用的转义符与特殊字符参见下表：2.2.2文本标记2.2文本的编辑 2．特殊字符2.2.2文本标记2.2文本的编辑 3．水平线标记<hr> 水平线是在网页上划出一条水平的分割线，用<hr>来标记水平线。语法格式为： <hralign=left/center/rightnoshadesize=？width=？color=？> Size：设置水平线的高度，以像素为单位。 Color：设置水平线的颜色。 Width：设置水平线的宽度，单位是像素或百分比，像素是绝对大小，不会随着浏览器窗口的大小而改变，百分比是相对于浏览器窗口水平线所占的比例，会随着浏览器窗口的大小而改变。 Align：设置水平线的对齐方式。对齐方式有三种：左对齐、居中、右对齐。2.2.2文本标记2.2文本的编辑 语法格式为： <Hn>…</Hn> n：表示不同级别的标题，n值可以是1-6中的任意数字，其中1表示的标题字体最大，6表示的标题字体最小。另外，可以用align属性设置对齐方式，常用的有左对齐、居中、右对齐三种对齐方式。2.2.3标题显示等级2.2文本的编辑<html><head><title>使用Hn标记</title></head><body><H1>一级标题</H1><H2>二级标题</H2><H3>三级标题</H3><H4>四级标题</H4><H5>五级标题</H5><H6>六级标题</H6></body></html> 在HTML中，列表常用的有“有序列表”和“无序列表”。 1．有序列表<OL> 基本语法结构为： <oltype=nstart=？> <li>项目1 <li>项目2 …… <li>项目n </ol>2.2.4列表2.2文本的编辑 有序列表<OL>参数解释： Type：设置列表的序号类型，常用序号： n=1：用数字作为序号。 n=A：用大写字母作为序号。 n=a：用小写字母作为序号。 n=I：用大写罗马数字作为序号。 n=i：用小写罗马数字作为序号。 Start：为可选参数，用于设置序号的起始数值。如不添加“start”则从每类序号的第一个序号开始。2.2.4列表2.2文本的编辑 2．无序列表 基本语法结构为： <ultype=n> <li>项目1 <li>项目2 …… <li>项目n </ul> Type：设置符号形状，有实心圆、小正方形、空心圆三种，具体情况如下： n=disc：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。2.2.4列表2.2文本的编辑2.3.1插入图像2.3.2使用背景图像 我们在网页上经常会浏览图像，适当使用图像可以增加网页的美观。在网页中最常用到的是插入图像和设置背景图像。2.3图像编辑 1．语法格式： <imgsrc="url">，单标记 Src：指明要添加的图像所在的具体路径和文件名。路径可以是相对路径，也可以是绝对路径。例：<imgsrc="images/ball.gif">。 绝对路径：完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。 相对路径：所谓相对路径，顾名思义就是当前文档与目标的相对位置。例：<imgsrc="1.bmp">。2.3.1插入图像2.3图像编辑 2．图像的属性 除了“src”以外，<img>还有其他属性，可以定义图像的对齐方向，与周围元素的距离等，各属性及作用见表2.2。表2.2图像属性列表2.3.1插入图像2.3图像编辑 语法格式为： <bodybackground="url">2.3.2使用背景图像2.3图像编辑2.4.1建立超链接2.4.2使用书签2.4.3标记新窗口和基准链接2.4建立超链接 建立超链接的标记是<a>，语法格式为： <ahref="url">超链接标识</a> url：指明链接目标的具体路径和文件名。 超链接标识：是网页中链接的载体，可以是文字或图像、热区等页面元素，用户点击它就会跳到超链接的目标位置。2.4.1建立超链接2.4建立超链接 1．定义书签 在HTML中，首先要定义书签，然后才能在链接中使用。定义书签的语法格式为： <aname="书签名"> 书签名不能用中文，只能用英文和数字。 2．使用书签链接 其链接的格式为： <ahref="#书签名">超链接标识</a> #与书签名之间不能有空格。2.4.2使用书签2.4建立超链接 1．标记新窗口（target） “target="_blank"”，是链接标记的一个参数。语法格式为：<ahref="url"target=_blank>超链接标识</a> 点击链接载体就会在新窗口打开链接目标。2.4.3标记新窗口和基准链接2.4建立超链接2.5.1建立表格2.5.2表格属性2.5表格2.5表格 表格标记有<table>、<th>、<tr>和<td>4个，具体含义如下： <table></table>：定义表格。 <th></th>：定义标题单元格，在这个单元格中的文字将用粗体显示。 <tr></tr>：定义表格中的行。 <td></td>：定义单元格，使用<td>标记一定要放在<tr>标记内部。 可以省略<th></th>，其它三个是必需的。 <Table>标记中可以添加属性和参数，其中的 border用于设置表格的边框宽度，值为大于等于0的整数，当值为0时，在浏览器中显示为无边框表格，无边框表格是网页布局最主要的手段。2.5.1建立表格2.5表格 除了border外，常用的表格属性参数有： <tablecellspacing=?>：定义单元格之间的距离，值为大于等于0的整数，单位是像素，0表示无间距。 <tableCellpadding=?>：定义单元格内的文字或其他元素到边框的距离，值为大于等于0的整数，单位是像素，0表示没有距离。 <tableheight=?>：定义表格的高度，其值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页高度的百分比。 <tablewidth=?>：定义表格的宽度，与高度一样有像素和百分比两种表示方法。 <tablebordercolor=?>：定义表格边框的颜色。 <tablebgcolor=?>：定义表格的背景色。2.5.2表格属性2.6表单表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。表单的基本语法<formname=“..”action="url"method=*><inputtype=“*”name=“name”value=“默认值”size=“x”maxlength=“y”></form>2.6.1表单基本概念2.6表单<html><head><title>输入用户姓名</title></head><body><formaction="http://www.blabla.cn/asdocs/html_tutorials/yourname.asp"method="get">请输入你的姓名：<inputtype="text"name="yourname"><inputtype="submit"value="提交"></form></body></html> 学习HTML表单(Form)最关键要掌握的有三个要点： 表单控件(FormControls) Action Method 先说表单控件(FormControls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，inputtype="text"就是一个表单控件，表示一个单行输入框。 用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的http://www.blabla.cn/asdocs/html_tutorials/yourname.asp。 至于method，表示了发送表单信息的方式。 get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。 post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。 inputtype="text"单行文本输入框 inputtype="submit"将表单(Form)里的信息提交给表单里action所指向的文件 inputtype="checkbox"复选框 inputtype="radio"单选框 select下拉框 textArea多行文本输入框 inputtype="password"密码输入框(输入的文字用*表示)HTML表单(Form)常用控件有：单行文本输入框(inputtype="text") 单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下： <inputtype="text"name="yourname">复选框(inputtype="checkbox") 复选框允许用户在一组选项里，选择多个。示例代码： <inputtype="checkbox"name="fruit"value="apple">苹果<br> <inputtype="checkbox"name="fruit"value="orange">桔子<br> <inputtype="checkbox"name="fruit"value="mango">芒果<br> 用checked表示缺省已选的选项。单选框(inputtype="radio") 使用单选框，让用户在一组选项里只能选择一个。示例代码： <inputtype="radio"name="fruit"value="Apple">苹果<br> <inputtype="radio"name="fruit"value="Orange">桔子<br> <inputtype="radio"name="fruit"value="Mango">芒果<br> 用checked表示缺省已选的选项。下拉框(select) 下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下： <selectname="fruit"> <optionvalue="apple">苹果 <optionvalue="orange">桔子 <optionvalue="mango">芒果 </select> 如果要变成复选，加muiltiple即可,用户用Ctrl来实现多选 用size属性来改变下拉框(Select)的大小多行输入框(textarea) 多行输入框(textarea)主要用于输入较长的文本信息。例句如下： <textareaname="yoursuggest"cols="50"rows="3"> </textarea> 其中cols表示textarea的宽度，rows表示textarea的高度。密码输入框(inputtype="password") 密码输入框主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是特殊字符。 例句如下： <inputtype="password"name="yourpw">提交(inputtype="submit") 通过提交可以将表单(Form)里的信息提交给表单里action所指向的文件。格式如下：<inputtype=“submit”name=“控件名”value="提交"><inputtype=“reset”name=“控件名”value=“重置">
浙公网安备 33021202002483