|
1、<body>标签，网页上显示的内容放在body标签中 在网页上要展示出来的页面内容要放在body标签中。 Html代码为：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <h1>了不起的盖茨比</h1> <p>1922年的春天，一个想要成名名叫<em>尼克·卡拉威</em>（托比·马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html> 效果图： 了不起的盖茨比 1922年的春天，一个想要成名名叫尼克·卡拉威（托比·马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。 菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。
<hx>标签HTML中提供了六级标题，为<h1>至<h6>。其中，<h1>字体最大，<h6>字体最小。 代码： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>标题标签的使用示例</title> </head> <body> <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> </body> </html>
效果：
<br>标签：换行<br/> 代码： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>换行标签的使用</title> </head> <body> 春眠不觉晓<br/>处处闻啼鸟<br/>夜来风雨声<br/>花落知多少 </body> </html>
段落标签<p>：可以使文字排列更加整齐、清晰。可以成对使用，也可以单独使用。 <p>标签有一个属性align，用来指定文本显示时的对齐方式，可取center、left、right三个值。 代码： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>段落标签使用示例</title> </head> <body> <p align="center">春晓</p> <p align="center"> 春眠不觉晓<br/>处处闻啼鸟<br/>夜来风雨声<br/>花落知多少 </p> </body> </html>
效果：
转义字符 三部分组成，第一部分是“&”符号；第二部分是实体名字或者是“#”加上实体编号；第三部分是分号，表示转义字符结束。同一个符号，既可以使用实体名称，例如“<”，也可以使用实体编号，例如“<”，这两种方式都表示符号“<”。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>转义字符的使用示例</title> </head> <body> 在HTML中，常用的特殊字符有：<br/> <、>、&、"、©、®、™、×、÷等。 </body> </html>
效果：
任务：在 “来源：作文网”文本的后面输入两个空格。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>空格讲解</title> </head> <body> <h1>感悟梦想</h1> 来源：作文网作者：为梦想而飞 </body> </html>
<hr>标签，添加水平横线 其属性及可取值如表所示。
任务:在二段之间添加一条水平横线，高度：100px,宽50% <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>hr标签使用</title> </head> <body> <p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p> <p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p> </body> </html>
无序列表使用标签<ul>定义，列表项使用<li>标签定义，列表项的内容位于一对<li>标签之内。 <li>标签的type属性可以定义列表项的标记符。其中： disc是默认值，为实心圆； circle为空心圆； square为实心方块；
代码： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>无序列表的使用示例</title> </head> <body> 常见的体育运动有：<br/> <ul> <li>篮球</li> <li>排球</li> <li>乒乓球</li> <li>足球</li> </ul> </body> </html>
效果图：
<ol>有序列表 标签的type属性可以指定有序列表的项目符号的类型，type属性各个取值的含义如表所示。
代码： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>有序列表的使用示例</title> </head> <body> <ol> <li>春思</li> <li>望岳 <ol type="i"> <li>岱宗夫如何，齐鲁青未了。</li> <li>造化钟神秀，阴阳割昏晓。</li> <li>荡胸生层云，决眦入归鸟。</li> <li>会当凌绝顶，一览众山小。 </li> </ol> </li> <li>送别</li> <li>渭川田家</li> </ol> </body> </html>
效果图：
<a>标签，其格式如下： <a href=“…” target=“…”>文本</a> 其中，href指文本链接的目标资源的地址，target指在何处打开目标资源。target的可取值及其含义如表所示。
代码： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>文本链接示例</title> </head> <body> 常用的门户网站有： <ul> <li><a href="http://www.sina.com.cn">新浪</a></li> <li><a href="http://www.sohu.com">搜狐</a></li> <li><a href="http://www.163.com">网易</a></li> </ul> </body> </html>
效果图：
任务：在右部编辑器中的的“托比·马奎尔Tobey Maguire”这几个字做链接，链接到的目标网址为“http://www./mdb/star/3316/” <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <ul> <li><a href="#" title="前端开发面试心法">前端开发面试心法</a> </li> <li><a href="#" title="零基础学习html">零基础学习html</a></li> <li><a href="#" title="JavaScript全攻略">JavaScript全攻略</a></li> </ul> <p>1922年的春天，一个想要成名名叫尼克·卡拉威（托比·马奎尔Tobey Maguire饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body></html> 任务：把编辑器中的超链接改为在新窗口中打开。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <p>1922年的春天，一个想要成名名叫尼克·卡拉威（<a href="http://www./mdb/star/3316/">托比·马奎尔Tobey Maguire </a>饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html>
<img>标签在网页中嵌入图像，并设置图像的属性。 其格式如下： <img src=“…” alt=“…” height=“…” width=“…” /> 其中，src属性和alt属性是必需的。 src属性指的是引用图像的URL，一般使用相对路径； alt指的是图像的替代文本； height指的是图像的高度； width指的是图像的宽度。
代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>图像标签使用示例</title> </head> <body> <h4>一幅鲜花图像</h4> <img src="image/flower.jpg" width="200"/> </body> </html>
|
|
|
