1. 首页
  2. IT资讯

前端开发教程之HTML(二)

“u003Cdivu003Eu003Cpu003E今天的主要分享的是一些最基本、最常用的标签:<imgu002F>、<a><u002Fa>、<table><u002Ftable>、<ul><u002Ful>,以及文件路径。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F31d500037cfee7652119″ img_width=”600″ img_height=”350″ alt=”前端开发教程之HTML(二)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E首先,先来了解一下<imgu002F>标签,它表示图片标签,在页面中会出现很多的图像,主要的编码方式就是通过<imgu002F>来实现的;那是怎么实现的呢?它通过一些自己的属性来规定了这个图像的样式,要实现一个图像最基本的属性有 src属性、width属性、height属性、alt属性,详解一下他们的属性分别是做什么的,是实现图像的哪一个部分的?u003Cu002Fpu003Eu003Cpu003Esrc属性:就是你要放置图像,该图像的文件路径,你的文件是放在C盘里面的文件还是D盘里面的文件,那么src就是这个图像的路径;u003Cu002Fpu003Eu003Cpu003Ewidth属性:就是你的图像的宽度,同理height就是图像的高度;u003Cu002Fpu003Eu003Cpu003Ealt属性:是指一种提示,比如你的鼠标在移动到你的图片的时候或有文字提示、或者因为某种原因图片不能正常显示的时候,会有直接文字提示;u003Cu002Fpu003Eu003Cpu003E完整的语法:<img src=”图像路径” width=”100px” height=”100px” alt=”提示”u002F>u003Cu002Fpu003Eu003Cpu003E接下来,我们分享<a><u002Fa>链接标签,它是一个能够实现跳转的标签,在小编还是没有完全总结<a>标签的情况下,可以先简单的可以理解为从一个页面跳转到另外一个页面。要实现一个跳转也是需要它自有的一些属性来完成,href属性,target属性,name属性。解一下他们的属性分别是做什么的,是实现跳转的哪一个部分的?u003Cu002Fpu003Eu003Cpu003Ehref属性:就是你要跳转到哪个页面,就是这个页面的路径;u003Cu002Fpu003Eu003Cpu003Etarget属性:就是你要跳转的网页的打开方式,它有自己的备选答案,其中_blank代表在新的标签中打开,_self代表在当前页面中打开(这个是缺省值)u003Cu002Fpu003Eu003Cpu003Ename属性:就是定义锚点名称(只有当<a>标签当做锚点使用时需要该属性)u003Cu002Fpu003Eu003Cpu003E完整的语法:<a href=”网页路径” target=“_blank”><u002F.a>u003Cu002Fpu003Eu003Cpu003E总结一下<a>标签常用的表现形式(作用)u003Cu002Fpu003Eu003Cpu003E1、网页面间跳转u003Cu002Fpu003Eu003Cpu003E <a href=”页面路径”><u002Fa>u003Cu002Fpu003Eu003Cpu003E 2、页面上的文档(资源)下载u003Cu002Fpu003Eu003Cpu003E <a href=”资源路径”><u002Fa> 其中:资源路径是指非html,htm,txt的资源,一般常见有为压缩包形式 <a href=”xxx.rar”>下载<u002Fa>u003Cu002Fpu003Eu003Cpu003E 3、返回页面顶部的空连接u003Cu002Fpu003Eu003Cpu003E <a href=”#”>返回顶部<u002Fa> 跳转到本页(一般在开发、测试阶段使用)u003Cu002Fpu003Eu003Cpu003E 4、电子邮件链接u003Cu002Fpu003Eu003Cpu003E <a href=”mailto:zhaoxu@tarena.com.cn”><u002Fa>u003Cu002Fpu003Eu003Cpu003E 5、链接到Javascriptu003Cu002Fpu003Eu003Cpu003E <a href=”javascript:js代码段落”><u002Fa> 就是在点击<a>标签的时候,执行一段js代码u003Cu002Fpu003Eu003Cpu003E 锚点:就是在页面的任意位置处定义一个标识,随时随地的都可以跳转到这个标识上;如果你想要在同一个页面中,快速的到达某个点,这时候用锚点的方式是非常好的。u003Cu002Fpu003Eu003Cpu003E 锚点的使用方式(2步骤):u003Cu002Fpu003Eu003Cpu003E 1、定义锚点 <a name=”anchorName”><u002Fa>u003Cu002Fpu003Eu003Cpu003E 2、链接到锚点 <a href=”#anchorName”>文本 或 图像<u002Fa> 或者 <a href=”url#anchorName”><u002Fa>u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F31d8000118fd1148e4bf” img_width=”659″ img_height=”440″ alt=”前端开发教程之HTML(二)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E第三、关于<table>表格标签u003Cu002Fpu003Eu003Cpu003E 表格:有行有列,按照一定的格式(从左到右,从上到下)排列里面的内容;它能组织结构化的信息,按照一定的格式来进行数据显示u003Cu002Fpu003Eu003Cpu003E 要想创建表格:u003Cu002Fpu003Eu003Cpu003E 1.定义表格:<table><u002Ftable>u003Cu002Fpu003Eu003Cpu003E 2. 定义行:<tr><u002Ftr> u003Cu002Fpu003Eu003Cpu003E 3.创建列(单元格):<td><u002Ftd> u003Cu002Fpu003Eu003Cpu003E 注意:原始的表格中,每行的列数全部都是统一的。u003Cu002Fpu003Eu003Cpu003E在一些情况下,表格会有:表头,表主体,表尾u003Cu002Fpu003Eu003Cpu003E 表头:<thead><u002Fthead>u003Cu002Fpu003Eu003Cpu003E 表主体:<tbody><u002Ftbody>u003Cu002Fpu003Eu003Cpu003E 表尾:<tfoot><u002Ftfoot>u003Cu002Fpu003Eu003Cpu003E实战:创建一个表格,有4行3列u003Cu002Fpu003Eu003Cpu003E <table>u003Cu002Fpu003Eu003Cpu003E<tr>u003Cu002Fpu003Eu003Cpu003E <td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E <td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E<td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E<u002Ftr>u003Cu002Fpu003Eu003Cpu003E<tr>u003Cu002Fpu003Eu003Cpu003E <td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E <td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E<td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E<u002Ftr>u003Cu002Fpu003Eu003Cpu003E<tr>u003Cu002Fpu003Eu003Cpu003E <td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E <td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E<td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E<u002Ftr>u003Cu002Fpu003Eu003Cpu003E<tr>u003Cu002Fpu003Eu003Cpu003E <td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E <td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E<td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E<u002Ftr>u003Cu002Fpu003Eu003Cpu003E <u002Ftable>u003Cu002Fpu003Eu003Cpu003E表格的属性:表格也是通过自己的属性来形成自己风格的tableu003Cu002Fpu003Eu003Cpu003Ewidth:宽度u003Cu002Fpu003Eu003Cpu003Eheight:高度u003Cu002Fpu003Eu003Cpu003Ealign:水平对齐方式(left,center,right)u003Cu002Fpu003Eu003Cpu003Eborder:设置表格的变宽,以px(像素)为单位u003Cu002Fpu003Eu003Cpu003Ecellpadding:内边距,(单元格边框与内容之间的距离)u003Cu002Fpu003Eu003Cpu003Ecellspacing:外边距,(单元格与单元格之间的距离)u003Cu002Fpu003Eu003Cpu003Ebgcolor:表格背景颜色u003Cu002Fpu003Eu003Cpu003Ealign:设置该行内容的水平对齐方式(left,center,right)u003Cu002Fpu003Eu003Cpu003Evalign:设置该行内容的垂直对齐方式(top,middle,bottom)u003Cu002Fpu003Eu003Cpu003Ecolspan:单元格跨列(向右合并单元格)u003Cu002Fpu003Eu003Cpu003Erowspan:单元格跨行(向下合并单元格)u003Cu002Fpu003Eu003Cpu003E 表格标题:即表格第一行,文字加粗 语法:<caption>标题<u002Fcaption>u003Cu002Fpu003Eu003Cpu003E <table>u003Cu002Fpu003Eu003Cpu003E<caption><u002Fcaption>u003Cu002Fpu003Eu003Cpu003E<tr>u003Cu002Fpu003Eu003Cpu003E <td><u002Ftd>u003Cu002Fpu003Eu003Cpu003E<u002Ftr>u003Cu002Fpu003Eu003Cpu003E <u002Ftable>u003Cu002Fpu003Eu003Cpu003E表格除了中规中矩,还有复杂应用,可以形成不规则的表格,实现不规则表格主要是通过跨列:colspan、跨行:rowspanu003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F31d7000394d019361678″ img_width=”617″ img_height=”363″ alt=”前端开发教程之HTML(二)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E第四:关于列表<ul>u003Cu002Fpu003Eu003Cpu003E列表根据使用情景,可以分为:有序列表、无序列表、自定义列表,其中u003Cu002Fpu003Eu003Cpu003E 1、有序列表u003Cu002Fpu003Eu003Cpu003E 语法:<ol><li><u002Fli> 列表项<u002Fol> u003Cu002Fpu003Eu003Cpu003E 常用属性:u003Cu002Fpu003Eu003Cpu003E type : 列表类型,取值可以为:u003Cu002Fpu003Eu003Cpu003E 1 :表示数字(默认值)u003Cu002Fpu003Eu003Cpu003E a : 表示小写字母u003Cu002Fpu003Eu003Cpu003E A : 表示大写字母u003Cu002Fpu003Eu003Cpu003E i : 表示小写罗马数字u003Cu002Fpu003Eu003Cpu003E I : 表示大写罗马数字u003Cu002Fpu003Eu003Cpu003E start : 起始编号u003Cu002Fpu003Eu003Cpu003E 2、无序列表u003Cu002Fpu003Eu003Cpu003E 语法:<ul><li><u002Fli><u002Ful> u003Cu002Fpu003Eu003Cpu003E 属性: type 取值可以为:u003Cu002Fpu003Eu003Cpu003E disc : 实心圆(默认)u003Cu002Fpu003Eu003Cpu003E circle : 空心圆u003Cu002Fpu003Eu003Cpu003E square : 实心矩形u003Cu002Fpu003Eu003Cpu003E 3、自定义列表u003Cu002Fpu003Eu003Cpu003E <dl> 定义列表u003Cu002Fpu003Eu003Cpu003E <dt><u002Fdt> 列表内容标题u003Cu002Fpu003Eu003Cpu003E <dd><u002Fdd> 列表数据u003Cu002Fpu003Eu003Cpu003E <u002Fdl>u003Cu002Fpu003Eu003Cpu003E 有序、无序使用场景:u003Cu002Fpu003Eu003Cpu003E 1、从上到下,只有一列显示数据u003Cu002Fpu003Eu003Cpu003E 2、从左到右,只有一行显示数据(导航)u003Cu002Fpu003Eu003Cpu003E 自定义列表使用场景:做图文混排的布局u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F31db00028839e6807d25″ img_width=”429″ img_height=”298″ alt=”前端开发教程之HTML(二)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E最后是关于文件路径,即URLu003Cu002Fpu003Eu003Cpu003E 目录结构的表示方式u003Cu002Fpu003Eu003Cpu003E URL : Uniform Resource Locator , 统一资源定位器 ,俗称,路径u003Cu002Fpu003Eu003Cpu003E 作用:用来标识网络中的资源位置u003Cu002Fpu003Eu003Cpu003E http:u002Fu002Fwww.baidu.comu003Cu002Fpu003Eu003Cpu003E imagesu002Flogo.gifu003Cu002Fpu003Eu003Cpu003E URL的三种形式: 绝对路径 相对路径 根相对路径u003Cu002Fpu003Eu003Cpu003E 1、绝对路径u003Cu002Fpu003Eu003Cpu003E 文件从最高级目录开始的完整的路径u003Cu002Fpu003Eu003Cpu003E 绝对路径就是完整的URLu003Cu002Fpu003Eu003Cpu003E 1、从本机目录结构查找,从盘符开始u003Cu002Fpu003Eu003Cpu003E C:\\xxx\\xxx.jpgu003Cu002Fpu003Eu003Cpu003E 2、网络资源目录结构开始查找u003Cu002Fpu003Eu003Cpu003E 协议、主机、目录路径、文件名称u003Cu002Fpu003Eu003Cpu003E http:u002Fu002Fwww.baidu.comu002Fimagesu002Flogo.jpgu003Cu002Fpu003Eu003Cpu003E 2、相对路径u003Cu002Fpu003Eu003Cpu003E 相对于当前文件的位置,查找资源文件u003Cu002Fpu003Eu003Cpu003E 1、同级目录(直接找)u003Cu002Fpu003Eu003Cpu003E 直接输入资源文件名称即可u003Cu002Fpu003Eu003Cpu003E 2、子级目录(先进入)u003Cu002Fpu003Eu003Cpu003E 先进入到指定文件夹,再查找资源文件u003Cu002Fpu003Eu003Cpu003E 3、父级目录(先返回)u003Cu002Fpu003Eu003Cpu003E 先返回到指定的父级目录出,再查找指定资源文件u003Cu002Fpu003Eu003Cpu003E..u002F : 表示返回上一级u003Cu002Fpu003Eu003Cpu003E..u002F..u002Fimagesu002Flogo.pngu003Cu002Fpu003Eu003Cpu003E 3、根相对路径u003Cu002Fpu003Eu003Cpu003E file:u002Fu002Fu002FC:u002Fzhaoxuu002F …….. 本地访问u003Cu002Fpu003Eu003Cpu003E http:u002Fu002Fwww.baidu.comu003Cu002Fpu003Eu003Cpu003E http:u002Fu002Flocalhostu002F …… 从服务器访问数据u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:前端开发教程之HTML(二)

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11262.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code