1、第1章 初探网页结构,理论内容,HTML文档的结构 文本相关的标签 图片标签 超链接标签,1.1 HTML文档结构,HTML（Hyper Text Markup Language）: 超文本标签语言 浏览器：“解释和执行”HTML源码的工具 网页：浏览器对HTML代码进行解析后展示的页面,解析,标签标记 HTML 文档的开始和结束,HTML的基本结构,HTML文档的结构,我的第一个网页 Hello World!,网页标题,网页内容，可以是文本、图像等,头部部分,主体部分,HTML 网页,这部分包括标题和其他说明信息，包括在 标签内,这部分包含文本、图像和链接，它包括在 标签内,开发HTML页面
2、,记事本 Visual Studio 2012,演示如何创建HTML文档,使用记事本开发网页,使用记事本开发网页步骤打开记事本编辑HTML代码保存为HTML文件使用浏览器打开HTML文件,使用Visual Studio 2012 开发网页,开发步骤 打开Visual Studio 2012 新建网站 添加网页 编辑网页 浏览网页,使用VS开发网页,菜单,项目结构,编辑区,选择视图,在VS中浏览网页,本地打开网页,设置网页的背景,设置背景颜色设置背景图片 , 背景色设置 背景为黄色的页面。Its so cool!,设置网页的背景,21世纪是互联网的时代，IT行业到处是欣欣向荣的景象！,背景图片,
3、1.2 文本相关标签,标题标签 字体标签 段落标签 换行 水平线 特殊字符 注释,标题标签,标题 标题, 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ,字体标签,文本内容 ,段落标签,段落内容,淘宝网商品分类手机 iPhone5 安卓 三星 索尼 HTC 笔记本 联想 苹果 戴尔 HP 华硕 运动鞋 跑步 板鞋 篮球 帆布 拖鞋 运动服 套装 裤子 POLO衫 T恤 ,特殊字符,如何在页面中显示“”文字信息呢？,1.3 图像标签,常见的图像格式 PNG、GIF、JPG等。,图片标签的使用,苹果手机 Apple型号: iPhone 5 手机价格区间: 4000元以上 网络类型:
4、GSM/WCDMA/LTE ,相对路径与绝对路径,相对路径：相对于当前页面的路径。 绝对路径：文件所在位置的完整路径。,网页如何找到要显示的图片？,图片与文本的对齐,align属性的取值可为top、bottom、middle、left或right。如。,1.4 标签,使用标签可以实现文字或图片的滚动特效，在页面中实现滚动特效可以吸引浏览者的注意，实现页面的动态效果。,滚动文字或者图像 ,marquee的属性,scrolldelay表示滚动延时时间，默认值为90ms。 direction表示滚动的方向，默认为从右向左。可以取up、down、left和right这4个值。,数码产品,1.5 超链接
5、标签,将网络中的资源连接成一个整体 超链接是指从一个网页指向一个目标的连接关系 实现信息之间的导航与跳转,链接,超链接标签,href属性表示链接资源的路径，可以是相对路径或绝对路径。 target属性指定链接在哪个窗口打开，常用的取值有_self（自身窗口打开），_blank（新建窗口打开）等。, 链接文字或图像 ,网页间链接, 苹果手机 联想电脑 ,锚点链接,作用：在页面内跳转，方便用户阅读网页内容使用步骤： （1）在页面中创建锚点，使用标签的name属性创建锚点。其语法如： 内容 。 （2）在页面中创建锚点链接，语法如： 内容 。在超链接href属性值中的“#”中，通知浏览器该链接将链接到页面内的某个锚记点。,商品类别: 运动服饰 日用百货运动服饰,锚点连接,电子邮件链接, 您好，欢迎来到淘宝网！ 站长信箱 商品类别:运动服饰 日用百货 ,使用电子邮件链接，快捷发送Email。 ,发送邮件,总结,HTML（Hypertext Markup Language）即超文本标签语言，是用于描述网页文档的一种标记语言。 HTML的基本结构分为两部分，包括头部（head）和主体（body）两部分。 与文本相关的常用标签。 常见的格式控制标签。 图像标签使用。 使用标签来实现超链接。 HTML文档中的路径分为绝对路径和相对路径。,
