简单语法讲解与举例课件

超文本标记语言 HTML HyperTextMarkupLanguage HTML基本语法 一 标记语法1 什么是标记语法HTML是用于描述功能的符号称为 标记 比如 等 都是标记 标记表示HTML文档的开始 标记在使用时必须用尖括号 括起来 2 单标记之所以称为 单标记 是因为它只需单独使用就能完整地表达意思 这类标记语法是最常用的单标记 它表示换行 3 双标记 双标记 由 始标记 和 尾标记 两部分构成 必须成对使用 始标记告诉WEB浏览器从此处开始执行该标记所表示的功能 尾标记告诉WEB浏览器在这里结束该功能 始标记前加一个正斜杠 即为尾标记 内容其中 内容 部分就是要被这对标记施加作用的部分 HTML基本语法 二 属性语法1 什么是属性这里的属性指的是标记的属性2 属性语法三 HTML文件的命名应注意以下几点 1 文件的扩展名要以 htm或 html结束2 文件名中只可由英文字母 数字或下划线组成3 文件名中不要包含特殊字符 比如空格 4 网站首页文件名默认是index htm或index html HTML基本语法 四 编写HTML文件的注意事项1 所有标记都要有尖括号括起来 这样 浏览器就可以知道尖括号内的标记语言是HTML命令2 对于成对出来的标记 最好同时输入起始标记或结束标记 以免忘记3 采用标记嵌套的方式可以为同一个信息应用多个标记 如下同一信息4 在代码中 不区分大小写5 任何空格或回车在代码中都无效6 标记中不要有空格 否则浏览器可能无法识别 HTML文件的整体结构 一 文件头部内容一个完整的HTML文件包括头部文件和主体文件 头部标记是成对的主体标记是成对的1 设置页面标题HTML文件标题在浏览器的标题栏中显示 每个HTML文件都有一个标题 用于说明文档的属性 在HTML文件中 页面标题标记位于头部标记之间基本语法请在此输入标题名 HTML文件的整体结构 语法说明在网页中设置网页的标题 只要在HTML文件的头部文件的中输入标题信息就可以在浏览器上显示实例代码 我的标题名 网站设计与开发请看标题栏 HTML文件的整体结构 HTML文件的整体结构 2 设置基底网址基底网址用于设定浏览器中文件的路径 标识一般用于设计文件的URL地址 一个HTML文件只能有一个标识 同时该标记必须放于头部文件中 基本语法语法说明href用于设置网页文件链接的地址 target用于设置页面显示的目标窗口 HTML文件的整体结构 实例代码 2009年10月16日 东北大学秦皇岛分校 HTML文件的整体结构 HTML文件的整体结构 HTML文件的整体结构 3 定义元信息在HTML文件中 标记通过一些属性来定义文件的信息 比如文件的关键字 作者信息 网页过期时间等 HTML文件的头部文件可以有多个标记 不是成对标记基本语法语法说明标记中的http equiv属性用于设置一个http的标题域 但确定值由content属性决定 name属性用于设置元信息出现形式 conent属性用于设置元信息出现的内容 HTML文件的整体结构 4 设置页面关键字 keywords基本语法语法说明keywords用于说明定义的是关键字 value用于说明为该页定义的关键字 可以是多个关键字 HTML文件的整体结构 实例代码 设置文件关键字 HTML文件的整体结构 二 主体内容在HTML文件中 主体内容被包含在成对的标记之间 同时标记也有很多本身的属性 例如设置页面背景 设置页面边距等 HTML文件的整体结构 1 设置页面背景bgcolor基本语法语法说明利用标记中的bgcolor属性 可以设置网页的背景颜色 HTML文件的整体结构 设置页面背景 HTML文件的整体结构 HTML文件的整体结构 2 设置网页边距 topmargin leftmargin rightmargin bottommargin在HTML文件中 可以设置页面边距 通过设置页面边距属性的属性值来设置页面显示内容与浏览器的距离 使显示的内容更加美观 语法说明设置到顶端的距离设置到左边的距离设置到右边的距离设置到底边的距离 HTML文件的整体结构 实例代码 设置页面边距财政部有关负责人说 所谓 首购 是指对于国内企业或科研机构生产或开发的 暂不具有市场竞争力 但符合国民经济发展要求 代表先进技术发展方向的首次投向市场的产品 通过政府采购方式由采购人或政府首先采购的行为 HTML文件的整体结构 HTML文件的整体结构 3 设计正文颜色text在HTML文件中 设置页面的背景颜色以后 网页中可能有部分文字的颜色需要改变才能显示 利用text属性可以给页面中无连接的文字设置颜色基本语法语法说明在标记中 利用text属性设置文档的颜色时 还可以进行其他的设置 例如 背景 字体等 HTML文件的整体结构 实例代码 设置正文颜色财政部有关负责人说 所谓 首购 是指对于国内企业或科研机构生产或开发的 暂不具有市场竞争力 但符合国民经济发展要求 代表先进技术发展方向的首次投向市场的产品 通过政府采购方式由采购人或政府首先采购的行为 HTML文件的整体结构 段落编辑 一 段落1 回车2 分段控制标签基本语法段落文字 可以省略参数值 right left 默认 center 段落编辑 3 居中显示文字基本语法 文字内容4 预格式基本语法 文字内容5 插入并设置水平线基本语法 Aling 水平摆放位置 可选right left center 默认 Size 水平线的粗细 以像素为单位Width 水平线的长度 以像素或百分比为单位Color 水平线的颜色noshade 设定水平线是否显示3D阴影 段落编辑 实例代码 预格式化登鹳鹊楼白日依山尽 黄河入海流 欲穷千里目 更上一层楼 段落编辑 段落编辑 实例代码 设置水平线添加水平线后的效果财政部有关负责人说 所谓 首购 是指对于国内企业或科研机构生产或开发的 暂不具有市场竞争力 但符合国民经济发展要求 代表先进技术发展方向的首次投向市场的产品 通过政府采购方式由采购人或政府首先采购的行为 版权 清华大学出版社 段落编辑 段落编辑 6 插入特殊符号基本语法 amp copy trade reg yen sect 段落编辑 实例代码插入特殊符号下面这段文字是插入版权符号后显示的效果 版权所有 清华大学出版社 段落编辑 文字编辑 一 编辑内容1 添加文字基本语法请在此处添加文字语法说明在网页中添加文字 只要在之间 需要插入文字的地方输入文字就可以实现 文字编辑 2添加注释或在HTML文件中 为了增加代码的可读性 需要对代码添加必要的注释 这些注释语句可方便编写者的检查与维护 同时这些注释信息也不会在网页中被显示 基本语法添加语句此处也可以添加语句 文字编辑 实例代码 添加注释清华大学出版社版权所有 违者必究 此处也可以添加注释语句 文字编辑 文字编辑 3 添加空格在HTML文件中 添加空格的方式与其他文档添加空格的方式不同 网页中添加空格是通过代码控制 在Word 记事本 写字板中输入空格可以直接通过键盘空格键输入 基本语法 文字编辑 实例代码 添加空格财政部有关负责人说 所谓 首购 是指对于国内企业或科研机构生产或开发的 暂不具有市场竞争力 但符合国民经济发展要求 代表先进技术发展方向的首次投向市场的产品 通过政府采购方式由采购人或政府首先采购的行为 文字编辑 文字编辑 4 添加删除线在HTML文件中 给需要添加删除线的文字使用成对的标记 就可以添加删除线基本语法请在此输入需要添加删除线的文字语法说明在成对的标记之间输入文字 在网页中显示改标记之间的文字就是被添加了删除线后的显示效果 文字编辑 实例代码 添加删除线给下面文字添加删除线添加了删除线的文字 文字编辑 文字编辑 二 文字效果1 标题文字标签标签一共为6级基本语法 标题文字Aling属性值为right left 默认 center 文字编辑 实例代码 标题文字标签HeaderLevel1HeaderLevel2HeaderLevel3HeaderLevel4HeaderLevel5HeaderLevel6 文字编辑 文字编辑 2 编辑网页文字样式基本语法语法说明在HTML文件中 利用成对标记就可以将网页中的文字根据需要 对其进行样式的编辑 文字编辑 实例代码 编辑网页文字样式没有使用效果后的文字 使用效果后的文字 文字编辑 文字编辑 3 设置文字标注标记在HTML文件中 有时需要对某个字 词或者某个段进行说明 可以通过添加文字的标注标记来完成对网页中文字的说明 基本语法 被说明的文字文字的标注语法说明 利用成对的标记 可以对网页中的文字进行标注 文字编辑 设置文字标注标记当代最可爱的人志愿军 文字编辑 文字编辑 三 文字修饰1 简单修饰文字基本语法普通文字的显示加粗的文字斜体的文字添加下划线的文字放大缩小 文字编辑 实例代码 简单修饰文字普通文字的显示加粗的文字斜体文字添加下划线文字 文字编辑 文字编辑 2 确定文字上下标基本语法 上标内容下标内容语法说明 在HTML文件中 成对的标记可以表示上标 利用成对的标记表示下标 文字编辑 实例代码 确定文字上下标解下面方程 x2 3x 2 0解 x1 1 x2 2 文字编辑 文字编辑 3 设置地址文字在网页中添加地址文字 是为了更方便地突出显示联系方式 将联系人的地址信息突出显示 基本语法 请在此添加地址信息语法说明 在HTML文件中 利用成对标记就可以将网页需要显示的地址文件突出显示 文字编辑 实例代码 设置地址文字书中有不恰当的地方 请您及时与我们联系 清华大学出版社E mail market 文字编辑 列表和使用列表 一 列表类型定义列表 dl无序列表 ul有序列表 ol 列表和使用列表 二 插入定义列表基本语法名称说明定义组成列表项名称部分解释说明定义的项目名称 列表和使用列表 插入定义列表联系人XXX联系地址北京市丰台区邮政编码100036 列表和使用列表 列表和使用列表 三 插入无序列表基本语法 项目名称 列表和使用列表 无序列表联系人 xxx联系地址 北京市丰台区邮政编码 100036 列表和使用列表 列表和使用列表 四 插入有序列表基本语法项目名称Type 设定符号类型 属性值有1 A a i IStart 设定列表的符号从第几项开始 列表和使用列表 有序列表联系人 xxx联系地址 北京市丰台区邮政编码 100036 列表和使用列表 插入图像 一 插入图片基本语法 插入图像 实例代码插入图片网页中插入图片 插入图像 插入图像 二 添加图片提示文字基本语法Alt提示文字可以是中文也可以是英文 插入图像 实例代码 添加图片提示文字添加图片提示文字 插入图像 插入图像 三 设置图片的宽度和高度基本语法 图片高度和宽度的单位可以是像素也可以是百分比 插入图像 实例代码 设置图片宽度和高度设置图片宽度和高度原图宽150像素高80像素 插入图像 插入图像 四 设置图片对齐方式基本语法关键字 Top middle bottom left right 插入图像 设置图片对齐方式设置图片对齐方式 图片顶部与同行的文字顶部对齐图片中部与同行的文字中部对齐图片底部与同行的文字底部对齐 插入图像 超链接的使用 一 路径概念相对路径 以引用文件的网页所在的位置为参考基础而建立的目录路径 绝对路径 以WEB站点的根目录为参考基础的目录路径 二 超链接的建立基本语法 链接文字Target 用于指定打开链接的目标窗口 默认属性为原窗口 如果是打开一个新窗口 可以设置target blank 超链接的使用 插入外部链接新浪网 超链接的使用 超链接的使用 插入内部链接基本语法目录文字在链接的目标处使用超链接目标 超链接的使用 考倒你考倒你世界上哪里的海不产鱼 第一题答案辞海不产鱼 超链接的使用 超链接的使用 超链接的使用 三 图像链接基本语法 超链接的使用 图像链接 超链接的使用 超链接的使用 四 邮箱链接基本语法 描述文字 超链接的使用 发送邮件给你写信 超链接的使用 表单的设计 一 表单标记基本语法 Name 设置表单名称Method 设置表单发送的方法 可以是 post 或者 get Action 设置表单处理方式Enctype 设置表单的编码方式target 设置表单的显示目标 表单的设计 插入文本框请输入你的姓名 表单的设计 表单的设计 二 插入文本框基本语法 表单的设计 插入文本框请输入你的姓名 表单的设计 表单的设计 三 插入密码框基本语法 表单的设计 插入密码框用户登录用户名 密码 表单的设计 表单的设计 四 插入文件域基本语法 表单的设计 插入文件域请上传你的照片 表单的设计 表单的设计 五 插入标准按钮基本语法 表单的设计 插入标准按钮 表单的设计 表单的设计 六 插入提交按钮基本语法 表单的设计 插入提交按钮 表单的设计 表单的设计 七 插入重置按钮基本语法 表单的设计 插入重置按钮 表单的设计 表单的设计 八 插入单选框基本语法 表单的设计 插入单选按钮对讲机设置自动接听呼叫拒绝接听呼叫 表单的设计 表单的设计 九 插入复选框基本语法 表单的设计 插入复选框QQ系统设置 综合设置拒绝陌生人消息自动播放魔法表情禁止所有用户上线提示 表单的设计 表单的设计 十 插入文字域基本语法 Rows 行数Cols 列数 表单的设计 插入文字域QQ系统设置 留言设置离开时自动回复 50字以内 表单的设计 表单的设计 十一 插入下拉列表和列表项基本语法 选择项选择项Size 显示的选项数目Multiple 列表中的项目多选 表单的设计 插入下拉菜单和列表请选择你喜欢的特长唱歌画画长跑 游泳体操足球篮球羽毛球棒球 表单的设计 表格的使用 一 插入表格并定义表格结构 基本语法 语法说明 定义表结构 定义行结构 定义列结构 表格的使用 设置基本表格结构 表格的使用 表格的使用 二 设置表格标题插入表格标题 表格的使用 插入表格标题计算机语言DreamweaverAccessC FrontPageSQLSERVER2000C 表格的使用 表格的使用 三 设置表格表头基本语法 表格的使用 设置表格表头网页设计数据库开发程序设计 DreamweaverAccessC FrontPageSQLSERVERC 表格的使用 表格的使用 四 设置表格的宽度和高度基本语法 表格的使用 设置表格的宽度和高度 表格的使用 表格的使用 五 设置表格的边框属性基本语法 Border 边框粗细Bordercolor 边框颜色Bordercolorlight 亮边框颜色Bordercolordark 暗边框颜色 表格的使用 设置表格的边框属性 表格的使用 表格的使用 六 设置单元格边距与间距1 间距 2 边距 表格的使用 设置单元格间距 表格的使用 表格的使用 设置单元格边距脚本语言 脚本语言 表格的使用 表格的使用 七 设置表格背景基本语法 表格的使用 设置