初探HTML

第1章初探网页结构2020/1/162理论内容HTML文档的结构文本相关的标签图片标签超链接标签2020/1/1631.1HTML文档结构HTML（HyperTextMarkupLanguage）:超文本标签语言浏览器：“解释和执行”HTML源码的工具网页：浏览器对HTML代码进行解析后展示的页面解析2020/1/164html…/html标签标记HTML文档的开始和结束HTML的基本结构HTML文档的结构htmlheadtitle我的第一个网页/title/headbodyHelloWorld!/body/html网页标题网页内容，可以是文本、图像等head头部部分body主体部分HTML网页这部分包括标题和其他说明信息，包括在head…/head标签内这部分包含文本、图像和链接，它包括在body…/body标签内2020/1/165开发HTML页面记事本VisualStudio2012演示如何创建HTML文档2020/1/166使用记事本开发网页使用记事本开发网页步骤打开记事本编辑HTML代码保存为HTML文件使用浏览器打开HTML文件2020/1/167使用VisualStudio2012开发网页开发步骤打开VisualStudio2012新建网站添加网页编辑网页浏览网页2020/1/168使用VS开发网页菜单项目结构编辑区选择视图在VS中浏览网页本地打开网页2020/1/169设置网页的背景设置背景颜色bodybgcolor=“背景颜色”……/body设置背景图片bodybackground=“背景图片”……/body2020/1/1610htmlheadtitle背景色设置/title/headbodybgcolor=yellow背景为黄色的页面。It’ssocool!/body/html设置网页的背景……bodybackground=spring.jpg21世纪是互联网的时代，IT行业到处是欣欣向荣的景象！/body……背景图片2020/1/16111.2文本相关标签标题标签字体标签段落标签换行水平线特殊字符注释2020/1/1612标题标签h1标题/h1……h6标题/h6bobyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6/boby2020/1/1613字体标签fontsize=“5”color=“red”face=“隶书”文本内容/font2020/1/1614段落标签palign=”对齐方式”段落内容/ph3淘宝网商品分类/h3palign=centerfontsize=5color=blueface=黑体手机/fontstrongiPhonesup5/sup/strong安卓三星索尼HTCfontsize=5color=blueface=黑体笔记本/font联想fontcolor=red苹果/font戴尔HP华硕/ppalign=centerfontsize=5color=blueface=黑体运动鞋/font跑步板鞋篮球帆布拖鞋fontsize=5color=blueface=黑体运动服/font套装裤子POLO衫T恤/p2020/1/1615特殊字符如何在页面中显示“hr/”文字信息呢？HTML实体显示结果描述<小于号>大于号&&&符号®®己注册©©版权™™商标 空格空格符"“引号2020/1/16161.3图像标签常见的图像格式PNG、GIF、JPG等。imgsrc=路径alt=提示信息align=对齐方式border=边框大小width=宽度height=高度/2020/1/1617图片标签的使用h3苹果手机/h3pimgsrc=images/iphone.jpgalt=点击购买苹果5手机width=200height=200/br/Apple型号:iPhone5br/手机价格区间:4000元以上br/网络类型:GSM/WCDMA/LTEbr//p2020/1/1618相对路径与绝对路径相对路径：相对于当前页面的路径。绝对路径：文件所在位置的完整路径。网页如何找到要显示的图片？2020/1/1619图片与文本的对齐align属性的取值可为top、bottom、middle、left或right。如imgalign=”middle”。2020/1/16201.4marquee标签使用marqee标签可以实现文字或图片的滚动特效，在页面中实现滚动特效可以吸引浏览者的注意，实现页面的动态效果。marqueescrolldelay=”滚动延时”direction=”滚动方向”滚动文字或者图像/marquee2020/1/1621marquee的属性scrolldelay表示滚动延时时间，默认值为90ms。direction表示滚动的方向，默认为从右向左。可以取up、down、left和right这4个值。marqueescrolldelay=100direction=uph4aname=digital数码产品a/h4imgsrc=images/d1.png/imgsrc=images/d2.png/imgsrc=images/d3.jpg//marquee2020/1/16221.5超链接标签将网络中的资源连接成一个整体超链接是指从一个网页指向一个目标的连接关系实现信息之间的导航与跳转链接2020/1/1623超链接标签href属性表示链接资源的路径，可以是相对路径或绝对路径。target属性指定链接在哪个窗口打开，常用的取值有_self（自身窗口打开），_blank（新建窗口打开）等。ahref=”链接地址”target=”目标窗口位置”链接文字或图像/a2020/1/1624网页间链接pahref=img.htmltarget=_blank苹果手机/aahref=img_align.htmltarget=_blank联想电脑/a/p2020/1/1625锚点链接作用：在页面内跳转，方便用户阅读网页内容使用步骤：（1）在页面中创建锚点，使用a标签的name属性创建锚点。其语法如：aname=”锚点名称”内容/a。（2）在页面中创建锚点链接，语法如：ahref=”#锚记名称”内容/a。在超链接href属性值中的“#”中，通知浏览器该链接将链接到页面内的某个锚记点。2020/1/1626商品类别:ahref=#sport[运动服饰]/a ahref=#digital[数码产品]/a ahref=#goods[日用百货]/aph4aname=sport运动服饰a/h4imgsrc=images/s1.jpg/imgsrc=images/s2.jpg/imgsrc=images/s3.jpg//p......锚点连接2020/1/1627电子邮件链接bodyimgsrc=images/taobao.png/您好，欢迎来到淘宝网！ahref=mailto:[e-mail]站长信箱abr/商品类别:ahref=#sport[运动服饰]/a ahref=#digital[数码产品]/a ahref=#goods[日用百货]/a/body使用电子邮件链接，快捷发送Email。ahref=mailto:[e-mail]发送邮件2020/1/1628总结HTML（HypertextMarkupLanguage）即超文本标签语言，是用于描述网页文档的一种标记语言。HTML的基本结构分为两部分，包括头部（head）和主体（body）两部分。与文本相关的常用标签。常见的格式控制标签。图像标签使用img。使用a标签来实现超链接。HTML文档中的路径分为绝对路径和相对路径。2020/1/1629谢谢观看End