22
Apr

从零开始学06 — 做一个更复杂的网页

现在我们通过练习一个复杂的网页,综合运用一下网页的各种知识,仍然强烈建议大家用记事本敲一遍下面100行HTML代码(为了方便讲解标记了行号),对于其中不懂的部分先不要在意。尽管代码上的排版对浏览器来说不重要,但还是要有缩进和换行,好习惯什么时候都重要:

index.html

001.<html>
002.	<head>
003.		<title>做一个更复杂的网页</title>
004.		<style type="text/css">
005.			body{font-family: "Microsoft YaHei";}
006.			.subject{color:blue;}
007.			.tab tr td{border:1px solid #000; padding:5px;}
008.			.tab{border:1px solid #000;}
009.			.row{margin-top:50px;}
010.			.class1{color:green;}
011.			#example1{color:red;}
012.		</style>
013.	</head>
014.	<body>
015.		<h1 class="subject">做一个更复杂的网页</h1>
016.		<p>
017.			<span>我们通过操作一个复杂的页面,来学习一下这些知识:</span>
018.			<ul>
019.				<li>通用的id和class属性</li>
020.				<li style="color:#00aaff">什么是CSS</li>
021.				<li>什么是JS</li>
022.				<li>练习一下超链接</li>
023.				<li>&lt;DIV&gt;标签</li>
024.				<li>表格标签</li>
025.				<li>表单标签</li>
026.				<li>HTML转义</li>
027.			</ul>
028.		</p>
029.		<div class="row"><h3>通用的id和class属性 用DIV来组织内容 用CSS来定义颜色</h3></div>
030.		<div>
031.			<div id="example1">我有一个id</div>
032.			<div class="class1">我有一个class</div>
033.		</div>
034.		<div class="row"><h3>JS按钮点击</h3></div>
035.		<div>
036.			<span id="info">我没有变!</span>
037.			<input type="button" id="btn" value="点我试试!" />
038.		</div>
039.		<div class="row"><h3>表格里的超链接</h3></div>
040.		<table class="tab">
041.			<tr>
042.				<td>第一行第一列</td>
043.				<td><a href="http://www.w3school.com.cn/html/index.asp">HTML 教程</a></td>
044.				<td>第一行第三列</td>
045.			</tr>
046.			<tr>
047.				<td><a href="http://www.d7w.net">设计兵团</a></td>
048.				<td><img src="http://www.d7w.net/new_index/images/logo.png" /></td>
049.				<td>第二行第三列</td>
050.			</tr>
051.			<tr>
052.				<td>第三行第一列</td>
053.				<td>第三行第二列</td>
054.				<td><a href="http://www.baidu.com">百度</a></td>
055.			</tr>
056.		</table>
057.		<div class="row"><h3>表单标签联系</h3></div>
058.		<form method="post" action="#">
059.			<label>您的姓名:</label>
060.			<input type="text" name="fullname" id="fullname" placeholder="例如:张三" />
061.			<label>您的密码:</label>
062.			<input type="password" name="password" id="password" value="123456" />
063.			<input type="submit" value="提交" />
064.		</form>
065.		<div class="row"><h3>HTML转义</h3></div>
066.		<table class="tab">
067.			<tr>
068.				<td>字符</td>
069.				<td>转义</td>
070.			</tr>
071.			<tr>
072.				<td>&quot;</td>
073.				<td>&amp;quot;</td>
074.			</tr>
075.			<tr>
076.				<td>&amp;</td>
077.				<td>&amp;amp;</td>
078.			</tr>
079.			<tr>
080.				<td>&lt;</td>
081.				<td>&amp;lt;</td>
082.			</tr>
083.			<tr>
084.				<td>&gt;</td>
085.				<td>&amp;gt;</td>
086.			</tr>
087.			<tr>
088.				<td>空格</td>
089.				<td>&amp;nbsp;</td>
090.			</tr>
091.		</table>
092.		<script type="text/javascript">
093.			btn = document.getElementById("btn");
094.			info = document.getElementById("info");
095.			btn.onclick = function(){
096.				info.innerHTML="我已经改变了"; 
097.			}
098.		</script>
099.	</body>
100.</html>

浏览器效果如下:


1.jpg

这100行代码综合运用了一个网页涉及到的各类知识,下面我们来详细看一遍:

一、头部出现<style>标签,属性为type="text/css",这标记着即将定义本页面的CSS样式。什么事CSS样式?我们看到的网页,是内容精心设计排版的结果,这要求能够精确控制网页元素的各种属性:宽度、高度、距离、颜色等等,这些仅仅依靠HTML是不够的,所以引用了CSS来控制,我们可以查看<style>标签内的定义:

body{font-family: "Microsoft YaHei";} 定义页面body内的字体全部为微软雅黑;

.subject{color:blue;}定义了subject类样式字体为蓝色,什么是类样式?我们可以用标签属性class来定义一个类,然后为这个类定义CSS,那么这个标签就具备了相应的CSS样式,可以看下015行有这样一个属性定义:class="subject",subject你可以自由命名,这时我们在样式表里用“.”+subject的方式来定义具体样式,那么页面上呈现的就是蓝色的<H1>标题了,由此可知,样式的定义格式是,每个样式属性用“;”间隔:

.类名{样式属性1:值1;样式属性2:值2;样式属性3:值3; ... }

同理,.tab tr td{...}定义了tab类内包含的td元素边框和内间距;

.tab定义了066行<table>标签边框;

.row定义了所有使用了该样式的<div>的上边距为50px(50像素);

.class1定义了032行的文本颜色为绿色;

上面涉及到了<div>标签,该标签可以简单理解为块,可以理解为一个装内容的盒子,默认在网页中前后各有一个换行。现代网页技术使用<div>组织内容已经是非常普遍的了。

接下来我们看下011行:与上面的内容不同,该内容使用#example1定义了031行文本颜色为红色;031行的定义并不是通过class属性!而是id,即id="example1",同样example1你也可以自由定义,关于id你当前要记住的非常重要的一点:一个页面内严格禁止重复定义。由此可知:我们在<style>内定义样式可以通过设置class或id来实现。


二、接下来我们看到几个新标签:<p>、<span>、<ul>和<li>。

<p>表示段落;<span>是行内元素,也可以理解为简版的<div>,即前后无换行;<ul>和<li>的组合使用形成了无序列表。

2.jpg

注意020行,有个属性定义style="color:#00aaff",它使得该文字内容呈现青色(RGB颜色值,可以先行百度一下)。也就是说我们可以在任意标签上用属性和属性值来定义CSS样式。


三、现在我们可以点击“点我试试!”按钮,来体验一下JS交互效果。你会发现文字“我没有变!”在点击后变成“我已经改变了”。按钮的定义在037行,在上面第036行你也看到了改变文字的<span>标签。这两行定义了两个id:info和btn。能让你的点击起作用的代码在第092~098行,我们看到出现的<script>标签,属性为type="text/javascript",这就是JS代码了。


什么是JS?JS即javascript。是一种脚本语言,这个可以说是准程序语言了,这么说吧,你精通HTML不能叫自己程序员,但你掌握了JS可以说是JS程序员了。


而这里,则是最简单的一个演示,我们先大致了解下:id是JS中的身份标识,在JS代码中代表了是哪个网页元素,document.getElementById("id名")用来获取指定id的网页元素,所以

btn = document.getElementById("btn");

info = document.getElementById("info");

分别得到id为btn的按钮和id为info的<span>,接下来btn.onclick表示按钮被点击,{}里面说明发生了什么事:info.innerHTML="我已经改变了"即<span>的文字内容改成“我已经改变了”。onclick我们称为JS事件,是一个动作,你可以联想一下网页上会遇到很多交互效果,都有哪些动作来支持。JS我们就先简单了解这些,希望你能仿照上面提到的效果多尝试,多体会。


四、表格和表单。表格是几个标签的组合运用:<table>、<tr>和<td>。<table>代表整个表格区域,<tr>代表一行,嵌套的<td>代表每个单元格。具体可以看看040行~056行,留意一下里面的链接哦,有彩蛋!HTML教程点进去是相当全面的学习资料。


表单看下058行~064行,这里只演示了文本框和密码框,以及一个提交按钮。表单是有一个区域的,即<form>标签,属性method说明了表单提交方式为post,属性action代表接收数据的服务器地址,需要了解的是,HTML是你浏览器解释执行的结果,你的数据需要从你本地通过浏览器发送到服务器进行处理,表单提供了这样的机制。思考一下,一个表单域提交一次是不是只负责自己包含的表单标签?


表单这里重复使用<input>标签,注意<input>是一个单标签,呈现的表单不同是因为其属性type的值的不同,"text"代表普通文本框;"password"代表密码框,输入的字符将被隐藏显示;"submit"是提交按钮,点击提交会将所在表单域的表单提交到<form>标签action属性指定的地址。


<input>标签的name属性用来命名当前表单的,方便服务器接收,value可以理解为默认值。


<label>标签是标注,一般配合表单使用。


五、到此我们将整个网页都看过一遍,最后补充一下什么是HTML转义,简单来说,就是我们的标签还有相关字符已经被HTML占用了,比如“<”和“>”,那么我们就要在网页上显示尖括号怎么办,这时就用到了转义字符,参见下第023行,我们这个示例网页的最下方也展示了常用的转义字符:

3.jpg


小练习:

1.改变row定义的多个上边距,看看页面效果,体会一下这样做的好处

2.尝试做不少于三个按钮,点击不同按钮改变不同位置的文字

3.百度百科搜一下HTML表单,对照联系一遍所有表单标签

About Me

Nothing is impossible!

Friends
倩倩的网站儿子的网站丽丽
CATEGORIES
Tags
ChatGPT四舍五入GOBeatles想像冰雪奇缘北京编程SSL证书认知障碍Docker春天行政区域名列表域名体系nginxopen_basedir思维指令编程语言程序URL网站上线域名FTP云服务器搜索引擎JSCSS网页超链接聚合内容列表元素网页构成网站的构成网站的分类网站单标签HTML第一个网页简单网页博域科技2018香山春游AJAX字体
Copyright©2022 王阳 版权所有  京ICP备14005672号-6