版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
网页制作基础HTML概要介绍Contents小结HTML中常用的特效常用的HTML标签HTML文档结构认识HTML语言HotTip认识HTML语言：HTML(HyperTextMarkupLanguage)超文本标记语言。是INTERNET上用于编写网页的主要语言不是一种程序，而只是控制网页内容显示的标记语言。即告诉浏览器如何正确显示信息。后缀名：html,htm编写工具：记事本,Dreamweaver,andsoon.来看实例代码修改HTML页面显示
CycleDiagram大小写标签双标签单标签标签的使用HTML的几个概念注意HTML文档结构<html><head><body><table><br><p><hr><font><hn><img><a><form><em>AddYourTitleTextText1Text2Text3Text4Text5HTML文档结构Text来看实例格式标签字体属性标签图片标签表格标签表单标签HTML常用标签其他补充格式标签格式标签：控制网页显示的格式换行标签<br>作用：相当于我们word办公中的回车符；段落标签<p>作用：创建一个段落；空格符： 作用：产生一个空格；看实例字体属性标签标题文字标签：<hn>作用：设置不同级别的标题；注意标题总是从新一行开始的；文字格式控制标签<font>作用：控制网页中文字的字体、大小和颜色；文字样式标签：粗体标签<b>斜体标签<i>下划线标签<u>水平线标签<hr>看实例图像标签<img>作用：在网页中插入一个图片换行标签<br>作用：相当于我们word办公中的回车符；段落标签<p>作用：创建一个段落；空格符： 作用：产生一个空格；看实例页面（PAGE）标记（TAG）HTML文件主要结构
<html>
<head>
<title>网页的标题</title>
</head>
<body>
。。。正文。。。
</body>
</html>两个最基本的属性代码:宽width高height大小size语言字符集（charsets）<metahttp-equiv=“Content-Type”content=“text/html;charset=#”>
“#”处填写的是语言的类型，如一般中国大陆基本上汉字用的是国标编码，则为gb2312；而港台地区则是big5；美国则为us-ascii。注意：我们在做模板时，如果找的是一些韩国网站，则出现的是<METAHTTP-EQUIV=“content-type”content=“text/html;charset=euc-kr”>如果你不修改此处为gb2312，则会页面出乱！背景色彩与背景图片设置背景色彩(bgcolor)
一般可以放在页面的任何需要背景的地方。如页面背景，表格背景，单元格背景，CSS样式背景等等。设置背景图片(background)
同上，可以放在任何需要背景的地方。
注意：当在对同一个对象既定义了背景色彩又定义了背景图片时，最终这个对象显示的结果则是显示背景图片。背景色彩与背景图片语法格式：
bgcolor=#ff4400
色彩是用16进制的红－绿－蓝(red-green-blue,RGB)值来表示。
16进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
background="image-URL“
例如：<bodybackground="image-URL">页面空白(Margin)页面左边的空白<bodyleftmargin=…>
页面上方的空白<bodytopmargin=…>
“…”
这里写数值合起来写时就是
<bodyleftmargin=2topmargin=5>
和以前学的背景知识联系到一起，我们可以写出如下代码：<bodyleftmargin=2topmargin=5background=“Img-URL”>
标尺线
<hr>即为布局而提供的一种直线
可以为标尺线设定大小、宽高、颜色、对齐方式等。
如:<hrsize=3><hrwidth=25><hrcolor=red>
表格（Table）标记（TAG）基本语法：<table>...</table>定义表格
<tr>定义表行
<th>定义表头
<td>定义表元(表格的具体数据)
一个表格的大致代码：
<tableborder=1width=170height=100cellspacing=10cellpadding=10><tr><th>TitleA</th><th>TitleB</th><th>TitleC</th>
</tr>
<tr><td>A</td><td>B</td><td>C</td>
</tr>
</table>
效果图片见下页
Border是表格的边框属性，在书写的时候直接写border=某个数值
cellspacing是单元格间隙的大小。
cellpadding是单元格内部空白部分的大小
cellspacing=10的效果图cellpadding=10的效果图
cellspacing=0的效果图cellpadding=0表格内文字的对齐/布局<tralign=#><thalign=#>#=left,center,right<tdalign=#><table>
<tr>
<th>Food</th><th>Drink</th><th>Sweet</th>
</tr>
<tr><tdalign=left>A</td><tdalign=center>B</td><tdalign=right>C</td></tr>
</table>
表格进阶5.3.1表格的色彩
单元格的背景色彩和背景图象
<thbgcolor=#>
<thbackground="URL">5.3.2表格边框的色彩
<tablebordercolor=#>例如：<tablecellspacing=5border=5bodercolor=#ffaa00>
5.3.3表格边框色彩的亮度控制
<tablebordercolorlight=#>
<tablebordercolordark=#>
<tablecellspacing=5border=5bordercolorlight=Whitebordercolordark=Maroon>
表格中边框的显示显示上边框<tableframe=above><tableborderframe=above><tr><th>Food</th><th>Drink</th><th>Sweet</th>
</tr><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr></table>
只显示下边框<tableframe=below>
同理，只显示上、下边框<tableframe=hsides>
只显示左、右边框<tableframe=vsides>
只显示左边框<tableframe=lhs>
只显示右边框<tableframe=rhs>
不显示任何边框<tableframe=void>
总结：以上课程从表格的基础到表格的
进一步深入，都体现了HTML的全面和强大。
表单如右图，这里“用户登陆”的功能就用到了“表单”的传递。可以说，任何网站的页面都离不开表单的应用，尤其是动态网页对表单的运用越来越广泛，因此，在这里我们有了解和学习表单的必要性。基本语法表单的基本语法<formaction=“url”method=*>关于action,它是表示表单要提交到哪里
，后面写上路径，一般是提交到一个核对密码与用户名的ASP页面
...
<inputtype=submit><inputtype=reset>
</form>*=GET,POST这里*号可以是GET，也可以是POST
GET是从别的页面获取信息传到本表单，而POST则是将本表单填写的内容传送给别的页面。两者是截然相反的过程。表单中提供给用户的输入形式
<inputtype=*name=*>
*=text,password,textarea,radio,image,hidden,submit,reset这里需要注意的type和name两个属性。Type是表示“类型”，如text则表示是个文本输入框，password表示的是密码输入框，textarea表示的是文本区（记事本留言经常用到）。其他的一些就不一一解释了，这里还有两个比较重要的类型就是submit和reset,submit表示“提交”，reset表示“重置”即“清空”。
name属性则是给表单的具体的这个控件一个名字，比如给密码框这个控件设置成<inputtype=passwordname=pw>这样在传递给别的页面的时候，这样别的页面就会知道知道你叫什么名字（“PW”），由你的名字就很容易找到你这个控件的type，原来你是密码框。这样就完成了别的页面对你本身所载信息（用户的密码）的识别。文字输入和密码输入<inputtype=textname=usernamevalue=…>
value这个属性表示的是在这个文本框中显示的默认的值。
我们看下面这个例子：<formaction=user.aspmethod=POST>
您的姓名:<inputtype=textname=un><br>br代表是换行，它是单个码
您的主页的网址:<inputtype=textname=weburlvalue=http://><br>
密码:<inputtype=passwordname=pw><br>
<inputtype=submitvalue=“发送”><inputtype=resetvalue=“重设”>
</form>
在这里，对分析这段代码，你的脑中就要
象我这样思维，这是我教的一种科学的方
法。不管是任何时候，对于表单，这样分
析，你都是最清楚最明白也是最科学的。
我的分析如下：action=user.asp表示此表单与user.asp建立了连接关系，到底是提交过去还是从那边获取信息，method=POST告诉了我们是把本表单填写信息提交给user.asp。接下来是输入姓名的文本框，再下一行是输入主页网址的文本框并且已经写好了http://（这里是把它写入value作为默认值）。再下一行是填写密码的密码框，最后一行则是“发送”与“重设”按钮
“发送”你可以改成“确认”，效果是一样的。点击“发送”则表单就开始提交。需要注意的是：“发送”按钮这里的type一定要写成submit（英文的提交）否则整个表单无法提交。关于文本框的大小长度你可以设置size和maxlength.size是你在页面看到的文本框的大小，而maxlength则是这个文本框可以填写的最多字符数。
5.4.3复选框(Checkbox)和单选框(Radio)
<inputtype=checkbox>
<inputtype=checkboxchecked>
什么是复选框？复选框就是可以多选的选择框。（如右图）
复选框的type类型是checkbox,checked表示默认选中的
选项。我们看下面的例子：
<formaction=diaocha.aspmethod=POST>
<inputtype=checkboxname=shuiguo1>Banana<p>
<inputtype=checkboxname=shuiguo2checked>Apple<p>
<inputtype=checkboxname=shuiguo3>Orange<p>
……
</form>
注意：在这个截图中我没有给出“确认”和“重设”按钮，大家不要以为用复选框不需要按钮。这两个按钮是实现表单功能的重要保证，和这个表单的内容到底是文本框还是复选框还是其他等等，都没有关系，只要这是一个表单，就必须要用这两个按钮。这是新手容易混淆的地方！另外说明的是p表示新建段落。它和br一样，也是单个出现的代码，没有</p>形式。单选框的语法格式<inputtype=radio>
<inputtype=radiochecked>什么是单选框？顾名思义，就是只能选择一个选项的选项框。
单选框的type类型是radio，checked表示某一项是默认选中的。
我们来看下面的例子：
<formaction=diaocha.aspmethod=POST>
<inputtype=radioname=shuiguo1>Banana<p>
<inputtype=radioname=shuiguo2checked>Apple<p>
<inputtype=radioname=shuiguo3>Orange<p>
……两个按钮……..
</form>
具体的语言含义我就不复述了。列表框基本语法
<selectname=…>
<option>...其中<optionselected>表示默认先显示的选项。
</select>
关于一个列表框的基本代码如下例，右为图。
<formaction=diaocha.aspmethod=POST>
<selectname=fruitssize=自己设定>这里也可不写size
<option>Banana</option>
<optionselected>Apple</option>
<option>Orange</option>
</select>
….两个按钮…..
</form><selectsize=…multiple>注意，是用Ctrl键配合鼠标实现多选。呵呵
是不是这项你还不太了解呢，没关系，跟我学吧。
在select行加了一个multiple,效果图如右所示:文本区域<textareaname=*rows=..cols=..>...<textarea>
文本区域是一个矩形区域，这里rows表示行数，cols表示列宽
<formaction=getwords.aspmethod=POST>
<textareaname=commentrows=5cols=60></textarea><P><inputtype=submit><inputtype=reset>
</form>
滚动文字标记<MARQUEE>属性
描述及示例
Direction
滚动方向(left,right,up,down)12-2.htm
Behavior
滚动方式12-3.htm
ScrollAmount
滚动速度12-4.htm
ScrollDelay
滚动延迟(毫秒)12-5.htm
Loop
滚动循环12-6.htm
Width,Height
滚动范围12-7.htm
BgColor
滚动背景颜色12-8.htm
OnMouseOver
当鼠标划过的时候=‘Stop()’
OnMouseOut
当鼠标移出的时候=‘Start()’
在页面中可以放置如MP3音乐、电影、SWF动画等多种多媒体内容。<EmbedSRC=“多媒体文件”Width=像素值Height=像素值></Embed>属性
等于
说明
Autostart
True|False
加载时是否自动启动
Loop
True|-1|False|nTrue(-1)
重复播放
Volume
N
音量大小
Hidden
True
将播放程序隐藏
Width
N
播放器的显示宽度
Height
N
播放器的显示高度
DiagramConceptAddYourTextTextTextTextTextTextTextDiagramAddYourTextAddYourTextAddYourTextAddYourTitleDiagramAddYourTextAddYourTextAddYourTextAddYourTextAddYourTextAddYourTextAddYourTextAddYourTextDiagramTitleThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.TitleThemeGallery
isaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.TitleThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.DiagramAddYourTitleTextTextTextText
CycleDiagramConceptBECDAAddYourTextAddYourTextAddYourTextAddYourTextAddYourTextDiagram1ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.2ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.3ThemeGalleryis
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 菏泽一调考试数学试卷
- 广州今年中考的数学试卷
- 广丰区初三二模数学试卷
- 健康管理重要性课件
- 《网络综合布线》教案 项目1任务1 综合布线系统
- 山东省泰安市宁阳一中2025届物理高一第二学期期末考试模拟试题含解析
- 中国可调射频衰减器行业市场前景预测及投资价值评估分析报告
- 工地自查报告(共6)
- 2018-2024年中国花生酱行业市场评估分析及投资发展盈利预测报告
- 2025年中国连续式回转窑行业市场发展前景及发展趋势与投资战略研究报告
- 2025至2030中国铁路货车行业深度调研及投资前景报告
- 浙里贷（数字贷款）复习试题附答案
- 2025年中国冷镦钢线行业市场发展前景及发展趋势与投资战略研究报告
- 山东档案职称考试《档案基础理论》完整题（附答案）
- 2025年食品安全管理考试试题及答案
- 2025年 吉林省长白山公安局警务辅助人员招聘考试试卷附答案
- 2025年公共卫生管理考试试卷与答案
- 2025至2030空调行业市场发展现状及竞争格局与投资价值报告
- 冠心病介入治疗术
- 2025至2030中国环氧活性稀释剂市场未来趋势及前景规划建议报告
- （新版）水利水电安全员考试题库及答案（含各题型）
评论
0/150
提交评论