第1章使用HTML制作网页.docx
- 文档编号:7519061
- 上传时间:2023-01-24
- 格式:DOCX
- 页数:10
- 大小:1.82MB
第1章使用HTML制作网页.docx
《第1章使用HTML制作网页.docx》由会员分享,可在线阅读,更多相关《第1章使用HTML制作网页.docx(10页珍藏版)》请在冰豆网上搜索。
第1章使用HTML制作网页
第一章使用HTML制作网页
一HTML概述
1.1什么是HTML
HTML(HyperTextMark-upLanguage)是超文本标记语言,是用于描述网页文档的一种标记语言。
1.2HTML基本结构
在语法中:
◆
DOCTYPE>标签:
声明文档遵守的W3C标准和规范。
◆页面中所有内容都包含在……中
◆
…..表示头部部分◆
……表示网页主体部分◆
◆:
描述网页具体的摘要信息。
包括文档类型,字符编码,搜索关键字等。
二HTML基本标签
HTML页面中的内容都是由HTML标签组织起来的,如页面中的文本,图像,视频等文件都是通过HTML标签合理的显示在页面的各个位置。
2.1标题标签
~
标题标签表示一段文字的标题,HTML共提供了6级标题,分别为
…,所有标题字体加粗。
2.2图像标签
在网页中常用的图像格式有4种
在语法中:
src属性:
表示显示图像的地址.
alt属性:
指定图像的替代文本,也就是说当图像无法显示时所替代显示的文本。
width属性:
表示图像的宽度
height属性:
表示图像的高度。
2.3段落标签
……
段落标签表示一段文字组成一系列段落内容,段落通过
段落中的文本
标签定义。2.4换行标签
在希望不产生一个新段落的情况下进行换行,使用
标签。
2.5水平线标签
水平线标签表示一条水平线,与标签一样,没有结束标签。
2.6超链接标签…
超链接的语法:
2.6.1超链接分类
Ø页面链接
Ø锚链接 常常看见我们页面底部点击“回到顶部”链接就会转到网页顶部实现 Ø功能性链接 功能性链接: 注意也可以用
可以在面中调用其他程序功能
2.7特殊符号
如果要在页面中显示特殊符号,就必须使用HTML的代码表示,这些特殊符号对应的HTML代码被称为字符实体
常见的字符实体如下图所示:
2.8HTML列表
HTML列表支持无序列表,有序列表和定义列表
2.8.1无序列表:
无序列表的语法:
- 列表项内容
- 列表项内容
……..
在语法中:
◆
- :
- :
表示列表项,列表项内容可以使用段落,图像,连接等其他内容。
应用:
无序列表常常与CSS样式结合,制作网页导航,新闻列表,图片列表等。
2.8.2有序列表
有序列表的语法:
- 列表项内容
- 列表项内容
……..
在语法中:
◆
- :
- :
表示列表项,列表项内容可以使用段落,图像,连接等其他内容。
应用:
与无序列表相比,有序列表的侧重点在“有序”上,一般情况下,有序列表常用于排版有顺序的网页内容,如排行榜,步骤说明,服务条款等。
2.8.3定义列表
定义列表的语法:
- 标题
- 描述
- 描述
………
在语法中:
◆
- :
- :
每个自定义列表项以
- 开始
◆
- 开始
- :
自定义列表项的定义,可以使用段落,图像,连接等其他内容。
应用:
定义列表一般可以用于排版纵向带二级导航项的菜单,图片信息,类别导航等。
2.9HTML表格
表格主要是由行和列组成,用来布局以及以表格的方式显示数据。
2.9.1表格的组成
2.9.2表格的基本语法:
2.9.3使用表格布局(如何在网页中插入跨行跨列的表格)
◆rowspan:
表示单元格所跨的行数
◆colspan:
表示单元格所跨的列数
演示示例:
使用HTML基本标签制作网页
三表单
在HTML中,表单不仅能在网页上显示特定的信息,而且还可以用来收集用户的信息,并将收集的信息发送给服务器处理程序。
因此,它是客户端和服务器端传递数据的桥梁,是实现用户与服务器互动的最主要方式。
3.1表单的语法
3.2表单元素
除下拉列表框,多行文本域等少数表单元素外,大部分表单元素都使用标签定义,只是属性设置不同。
3.2.1表单元素的基本语法
Ø文本输入框(用户输入单行信息)
表单中最常用的输入元素就是文本框,它提供给用户输入单行文本信息.
示例代码:
用户名:
Ø密码输入框(输入的文字和字符是以星号显示的)
将表单元素的type属性设置为password就可以创建一个密码框,输入的字符全部都以”*”显示,提高数据的安全性
示例代码:
密码:
Ø单选按钮(在多个选项中只允许用户选择一项,可以使用单选按钮)
单选按钮用于一组相互排序的选项,组中每个选项应具有相同的名称(name),以确保用户只能选择一个选项,单选按钮对应的type属性为radio,使用checked选中属性设置初始状态是否被选中。
示例代码:
性别:
女 男 Ø复选框(可以再多个选项中选择多项)
复选框用于选择多个选项,将标签的type属性设置为checkbox就可以创建一个复选框
示例代码:
爱好:
吃 喝 玩 乐 Ø下拉列表(可以使用户快速,正确的选择信息,还可以节省页面空间)
下拉列表框通过
下拉列表框的语法:
Select:
Option:
示例代码
城市:
--请选择-- 西安 宝鸡 安康 Ø多行文本域
多行文本域用于显示或输入两行或两行以上的文本,它使用的标签时
多行文本框的语法:
注意事项
⏹不能使用Value属性为textarea赋初始值,而是应该把值放到
Ø按钮的分类
根据功能分类,按钮可分为提交按钮,重置按钮和普通按钮。
1)提交按钮:
type=”submit”提交表单数据。
2)重置按钮:
type=”reset”用来清除用户已经在表单中填写的信息
3)普通按钮:
type=”button”用来响应Javascript中常用的事件
示例代码:
Ø文件选择框
文件选择框使用户可以浏览计算机上的某个文件,如word文档,图形文件等,并将该文件作为表单数据上传,只需要把标签的type设置为file即可
示例代码:
Ø其他表单元素的应用
1.表单结构
为表单添加结构,将表单元素归纳在一个方框中,它使用的标签是
表示自定义列表
◆
表示无序列表
◆
表示无序列表
◆
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 HTML 制作 网页
![提示](https://static.bdocx.com/images/bang_tan.gif)