自己动手设计一个简单的HTML网页

目录

HTML介绍

HTML难不难?

HTML重要吗?

示例网页

网页显示效果

写在最后


HTML介绍

HTML是英文单词(HyperText Markup Language)的缩写,也就是超文本标记语言,之所以称之为超文本,那是因为它除了可以用来说明文字以外,还可以用来说明图形、动画、声音等等。

HTML难不难?

HTML不是编程语言,而是一种解释性语言,和C#、Java、JavaScript不同,HTML没有逻辑顺序,只有结构,只需简单了解就可以自己动手做,本文后面就会简单列举一个例子来帮助理解。

HTML重要吗?

网页一般由三个部分组成,HTML文件、CSS文件、JavaScript文件。我们把网页看成一个房子,大致可以理解为HTML是房子的结构,CSS文件是房子的装修,JavaScript是房子的管家,来响应人对房子的控制,比如开关灯操作。

示例网页

  1. 在桌面创建一个文本文件,一般默认名为“新建文本文档.txt”,如果你无法看到结尾的.txt后缀,那么可以参考 如何显示后缀名 。
  2. 将文件重命名为 HelloHTML.html 
  3. 右击文件,选择用记事本打开。
  4. 将代码复制进记事本并保存
  5. 右击文件,选择用浏览器打开即可
<!-- 这句告诉浏览器这是一个HTML网页 -->
<!DoctType html/>
<!-- 这是整个网页的根元素,也可以称作 节点或标签,本文称之为标签 -->
<html lang="zh"> <!-- lang="zh" 用来声明这是一个中文网页,这样浏览器就不会问你是不是需要翻译此网页了 -->
	<!-- 一般在里面配置编码、标题或是引入其他资源文件 -->
	<head>
		<meta charset="utf-8" />
		<!-- 网页标题 -->
		<title>小重山·昨夜寒蛩不住鸣</title>
	</head>
	<body>
		<!-- 标题标签 -->
		<h2>小重山·昨夜寒蛩不住鸣</h2>
		<!-- 段落标签 -->
		<p>昨夜寒蛩不住鸣。</p>
		<p>惊回千里梦,</p>
		<p>已三更。</p>
		<p>起来独自绕阶行。</p>
		<p>人悄悄,</p>
		<p>帘外月胧明。</p>
		<p>白首为功名。</p>
		<p>旧山松竹老,</p>
		<p>阻归程。</p>
		<p>欲将心事付瑶琴。</p>
		<p>知音少,</p>
		<p>弦断有谁听?</p>
	</body>
</html>

网页显示效果

 如果顺利的完成了这个步骤,那么恭喜你,你现在已经初步踏入HTML的世界了。

写在最后

希望本文对你有所帮助,如果有不理解、建议或意见欢迎留言、私信交流讨论,感谢阅读!

css标签,网页模板/* Author: W3layout Author URL: http://w3layouts.com License: Creative Commons Attribution 3.0 Unported License URL: http://creativecommons.org/licenses/by/3.0/ */ /* reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} ol,ul{list-style:none;margin:0;padding:0;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} table{border-collapse:collapse;border-spacing:0;} /* start editing from here */ a{text-decoration:none;} .txt-rt{text-align:right;}/* text align right */ .txt-lt{text-align:left;}/* text align left */ .txt-center{text-align:center;}/* text align center */ .float-rt{float:right;}/* float right */ .float-lt{float:left;}/* float left */ .clear{clear:both;}/* clear float */ .pos-relative{position:relative;}/* Position Relative */ .pos-absolute{position:absolute;}/* Position Absolute */ .vertical-base{ vertical-align:baseline;}/* vertical align baseline */ .vertical-top{ vertical-align:top;}/* vertical align top */ .underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */ nav.vertical ul li{ display:block;}/* vertical menu */ nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ img{max-width:100%;} /*end reset*/ body, html { font-size: 100%; height: 100%; } body { font-family:Arial, Helvetica, sans-serif; background:url(../images/bg2.jpg)no-repeat; background-color:#FFF; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-attachment: fixed; background-position:100% center; } .wrap{ width:95%; margin:0 auto; } /***** Header ****/ .header{ border-top:5px solid #111; } .logo{ text-align:center; margin:10px 0; } .menu { text-align:center } .menu li a{ font-size:0.8em; padding:10px; display:block; color:#FFF; text-transform: uppercase; background-color:rgba(70, 70, 70, 0.47); border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 5px; } .menu li a:hover{ background:#222; } .bl-content{ background:rgba(0, 0, 0, 0.58); } .bl-main > section { display:inline-block; width:24%; } .bl-box { position: relative; width: 100%; height: 100%; cursor: pointer; } .bl-box h2 a{ font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; color:#FFF; text-align: center; margin: 0; padding:15px 0; width: 100%; font-size:0.8em; display: block; text-transform: uppercase; background-color:rgba(70, 70, 70, 0.45); } .bl-box h2:hover { background:#222; color:#FFF; } /* Custom content */ .works > ul { list-style: none; padding: 0; margin: 0; } .works > ul li { display: inline-block; width:48.5%; padding:0%; } .works > ul li a { display: block; padding: 0; border:3px solid #FFF; } .works > ul li a img { display: block; max-width: 100%; width:100%; } .works p{ font-size:0.8em; color:#FFF; line-height:1.6em; padding:5px 0; } /* Panel Items */ div.bl-panel-items, div.bl-panel-items > div { width: 100%; height: 100%; } div.bl-panel-items > div > div { margin: 0 auto; opacity: 1; padding:0 10px; } div.bl-panel-items > div > div h3 { font-size:1.2em; color:#000; margin: 0 0 5px 0; } div.bl-panel-items > div > div p { font-size:0.8em; color:#5A5A5C; line-height:1.6em; } div.bl-panel-items > div > div img { float:none; margin:20px 0px 5px 0; max-width: 100%; } div.bl-panel-items { top: 100%; z-index: 9999; } div.bl-panel-items > div { background:rgba(252, 252, 252, 0.760784); } /**** About ***/ .bl-content h2 { font-size:1.2em; color:#FFF; padding: 5px 0; margin-top:20px; text-transform:uppercase; } .about_img img{ padding:2px; background:#FFF; border:1px solid #DBDBDB; margin:5px 0; width:98%; } .about_data p{ font-size:0.9em; color:#FFF; line-height:1.6em; padding:5px 0; } .content_bottom_right { margin-top:80px; padding-bottom:20px; } .posts{ padding:10px 0 20px; border-bottom: 1px dashed #EEE; } .date{ float:left; width:40px; } .posts figure{ font-weight:bold; font-size:10px; color: #FFF; text-align:center; border-right:1px solid #EEE; padding:0 10px 2px 0; } .posts figure span{ font-size:3em; line-height: 52px; color:#F18D05; display:block; margin-bottom:-10px; letter-spacing:-1px; } .post_desc{ float:left; padding-left:4%; width:77%; } .post_desc p{ color:#FFF; font-size:0.9em; line-height:1.6em; } /***** Blog*****/ .image { clear: both; padding: 0px; margin: 0px; padding:10px 0; } .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; } .grid { display: block; float:none; margin: 0% 0 0% 0%; } .grid:first-child { margin-left: 0; } .images_3_of_1 { width:100%; position:relative; margin-bottom:10px; } .blog-leftgrids{ padding-top:10px; } .blog-desc{ width:100%; } .images_3_of_1 img { max-width:100%; display:block; padding:2px; background:#FFF; border:1px solid #FFF; width:98%; } .blog-desc h3{ padding-bottom:5px; } .blog-desc h3 a{ color:#FFF; font-size:0.9em; font-weight:bold; } .blog-desc p { color:#FFF; font-size:0.823em; line-height:1.6em; } /*** Buttons ****/ .button { float:right; font-size:0.9em; text-transform:uppercase; margin-top: 15px; display: inline-block; font-weight: bold; line-height: 18px; padding:8px 10px; background-color: #f18d05; border-color: #bf7004; color: white; } .button:hover { background-color: #f18d05; } .button:active { background: #d8891e; color: #8d5303; } /*----artical-links---*/ .artical-links{ padding: 10px 0px; border: 1px solid rgba(255, 255, 255, 0.19); border-left: none; margin-top: 5px; border-right: none; } .artical-links ul li{ display:inline-block; } .artical-links ul li img{ vertical-align:middle; padding-right:10px; } .artical-links ul li a{ font: 400 14px/22px Arial; color:#F18D05; padding-right: 20px; } .artical-links ul li a:hover{ color:#FFF; } /*** Page numbers ***/ .content-pagenation{ padding:35px 0; } .content-pagenation li { display: inline-block; } .content-pagenation li a { color:#F18D05; font-size: 0.8em; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; background:#FFF; padding:8px 10px; } .content-pagenation li a:hover{ background:#F18D05; color:#FFF; } /* Contact Form ============================================================================= */ .section { clear: both; padding: 0px; margin: 0px; } .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; } .col{ display: block; float:left; margin: 2% 0 2% 0%; } .col:first-child{ margin-left:0; } .span_2_of_3 { width:100%; padding:0%; } .span_1_of_3 { width:100%; padding:0%; margin-top:10px; } .span_2_of_3 h3, .span_1_of_3 h3 { color:#FFF; font-size:1.5em; margin-bottom:10px; } .contact-form{ position:relative; padding-top:15px; } .contact-form div{ padding:5px 0; } .contact-form span{ display:block; font-size:0.9em; color:#F18D05; padding-bottom:5px; font-family :verdana, arial, helvetica, helve, sans-serif; } .contact-form input[type="text"],.contact-form textarea{ padding:6px; display:block; width:94%; background: rgba(252, 252, 252, 0); border:1px solid rgba(255, 255, 255, 0.38); outline:none; font-size:1.2em; font-family:Arial, Helvetica, sans-serif; color:#FFF; -webkit-appearance:none; } .contact-form textarea{ resize:none; height:120px; } .myButton { text-transform:uppercase; display: inline-block; font-weight: bold; line-height:18px; border:none; background: #465467; color: #fff; font-size:1em; padding:8px 12px; background-color: #f18d05; border-color: #bf7004; cursor:pointer; } .myButton:hover { background-color: #f18d05; } .myButton:active { background: #d8891e; color: #8d5303; } .company_address p{ color:#FFF; font-size:0.9em; line-height:1.8em; } .company_address p span{ text-decoration:underline; color:#EEE; cursor:pointer; } .contact_info{ padding-top:30px; } .map{ border:1px solid #CCC; margin-bottom:10px; } .copy_right{ padding:25px 0 10px 0; text-align:center; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; } .copy_right p{ font-size:0.8123em; color: #FFF; line-height:1.8em; } .copy_right p a{ color: #FFF; font-size:1em; text-decoration:underline; } .copy_right p a:hover{ color:#FD9200; text-decoration:none; }
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值