杰晶网络

web标准教程，帮你走进web标准设计的世界 第二讲
网页制作 2024/11/24 佚名
3 2
上一讲我主要讲解了一下网页的基本结构与网页主体部分的基本结构，以及常用的html标签。

非常感谢网友对我的大力支持，谢谢你们给我的鼓励！

我继续上一讲：又开始实战了，代码敲起来！

复制代码代码如下:
<div id=”logo”>
<a href=”http://online.cumt.edu.cn”><img src=”logo.jpg” title=”Welcome!” alt=”logo” /></a>
</div>

So easy !

标签4：img

使用指数：****

功能：导入图片

类型：内联元素

常用属性：id，class，title

特别属性：1.src:导入图片总要知道图片在哪不是，src就解决这个问题。他的值就是图片存放的路径啦。

 　　　　 2.alt:与title功能类似，都是提示功能，我们知道有的时候一个网页的图片不一定及时（或者就是不能成功）加载，那么为了给用户一个友好的说明，故用此属性

例子：1.在E盘新建两个文件夹，命名为html，和images。在html文件夹中建一个html文件命名为：index.html，复制一张你比较喜欢的图片到images文件夹中（例如images.jpg），ok，代码开始了：

index.html：

复制代码代码如下:
<body>
<img alt="我是图片" title="Hello!" src="/UploadFiles/2021-03-30/images.jpg"></body>

So easy ! 

插播广告：../images/images.jpg：..代表返回到上一级文件，什么意思呢，我们的目的是找到html文件夹外面的images文件夹中的images.jpg文件，那我们就一步一步的进行，首先从html文件夹跳出来（..），这是我们已经指向E盘了，然后找E盘中的images文件夹（/images）;最后找到文件（/ images.jpg）;光听我讲是不行的，要多实践哦！

当然img标签还有两个常用属性width和height，分别来限制显示图片的宽度和高度；默认为图片的实际尺寸，不妨试试这段代码，你就明白啦：

复制代码代码如下:
<body>
<img alt="我是图片" title="Hello!" src="/UploadFiles/2021-03-30/images.jpg"><img alt="我是图片" title="Hello!" src="../images/images.jpg"><img alt="我是图片" title="Hello!" src="/UploadFiles/2021-03-30/images.jpg"></body>

So easy !
好，我们继续头部讲解,导航的搜索框部分代码被我省略了，表单元素准备单独进行将讲解。


复制代码代码如下:
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">论坛</a></li>
</ul>
<ul>
<li><a href="#">个人空间</a></li>
<li><a href="#">博雅园</a></li>
<li><a href="#">跳蚤市场</a></li>
<li><a href="#">音乐站 </a></li>
</ul>
</div>

So easy !
有人可能疑问这代码的运行结果与所给的图片差的太多了，哈哈，这是正常的，但到目前为止至少文字还是对的，如果感兴趣可以提前去学习一下css；
好标签继续：
标签5：ul
使用指数：*****
功能：构造一个无序列表，必须配合li来使用
类型：块级元素
常用属性：id，class
标签6：ol
使用指数：*****
功能：构造一个有序列表，必须配合li来使用
类型：块级元素
常用属性：id，class
何为无序？何为有序？运行一下代码便知分晓：


复制代码代码如下:
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">论坛</a></li>
</ul>
<ol>
<li><a href="#">个人空间</a></li>
<li><a href="#">博雅园</a></li>
<li><a href="#">跳蚤市场</a></li>
<li><a href="#">音乐站 </a></li>
</ol>
</div>

So easy !
感兴趣的可以提前去看看他们的list-style属性，你会觉得很有意思，这里就不介绍了，这部分还是在讲解css的时候再说吧。到这里header就完成了。
整理：


复制代码代码如下:
<div id="header">
<div id="banner">
<span>你还没有登录，请登录</span>
<a target="_blank" href="#" title=”注册只需要5分钟！”>登陆</a><a href="#">注册</a>
</div>
<div id="logo">
<img src="/UploadFiles/2021-03-30/images.jpg"></div>
<div id="nav">
<ul style="list-style:">
<li><a href="#">首页</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">论坛</a></li>
</ul>
<ul>
<li><a href="#">个人空间</a></li>
<li><a href="#">博雅园</a></li>
<li><a href="#">跳蚤市场</a></li>
<li><a href="#">音乐站 </a></li>
</ul>
</div>
</div>

So easy !
效果好难看。。。
至于content部分我只讲三小块，不要惊讶，因为其他的大体都是一样的啊，目的还是为了让大家认识一些常用的标签，ok，Begin！Right now！
web标准教程，帮你走进web标准设计的世界 第二讲
代码：

复制代码代码如下:
<div>
<a title="全国高校百佳网站网络评选活动即将进入投票阶段" href="#">
<img alt="全国高校百佳网站" src="/UploadFiles/2021-03-30/nschool_pic.jpg"></a>
<h3>
<a href="#">全国高校百佳网站</a>
</h3>
<p>
由教育部思想政治工作司指导、中国大学生在线网站主办...
<a href="#">【详情点击】</a>
</p>
</div>

So easy !
标签7：h1,h2,h3,h4,h5,h6
使用指数：***
功能：构造一个标题，通常用于显示一块的标题部分，或者文章的标题部分，默认的字体是加粗的，不同级别的标题标签只是字体大小不同而已
类型：块级元素
常用属性：id，class
标签8：p
使用指数：*****
功能：构造一个段落
类型：块级元素（但是不同与div）
常用属性：id，class
例子（这里我引用了w3cSchool的例子）：

复制代码代码如下:
<body>
<p>
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
</p>
<p>
这个段落
在源代码 中
包含 许多行
但是 浏览器
忽略了 它们。
</p>
<p>
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
</p>
</body>

web标准教程，帮你走进web标准设计的世界 第二讲
看这个结构显然是一个没有顺序的列表：我们借此来巩固学习一下ul，毕竟他很重要，另外的目的就是为下文铺垫：
代码：

复制代码代码如下:
<ul>
　　 <li>
　　　　<a href="#">老师对文法学院2010届...</a>
　　</li>
　　<li>
　　　　<a href="#">外文学院举行2010届毕...</a>
　　</li>
　　<li>
　　　　<a href="#">我校举行校领导与2010...</a>
　　</li>
　　<li>
　　　　<a href="#">校领导深情寄语2010届毕业生</a>
　　</li>
</ul>

So easy !
像这种文字以列表形式存在，而且没有顺序性，也没有标题，我们通常可以使用ul和li的组合来描述
web标准教程，帮你走进web标准设计的世界 第二讲
这个与上面一个唯一的不同点就是多了一个标题（“求购信息”），可能有人会想到用这样的组合完成：

复制代码代码如下:
<h4>求购信息</h4>
<ul>
<li>…</li>
　　<li>…</li>
</ul>

当然是很好的，不过这里我要介绍里一个标签组合来实现这个架构：

复制代码代码如下:
<dl>
<dt>求购信息</dt>
<dd>
<a href="#">求个二手手机给老爹用</a>
</dd>
<dd>
<a href="#">求购二手显示器</a>
</dd>
<dd>
<a href="#">寻找自行车钥匙</a>
</dd>
<dd>
<a href="#">求购移动手机（简单功...</a>
</dd>
<dd>
<a href="#">求购天翼电信手机</a>
</dd>
</dl>

好乱啊，但其实你耐心一点就很容易了。
标签9：dl
使用指数：*****
功能：构造一个列表，与dt，dd配合使用
类型：块级元素
常用属性：id，class
例子：

复制代码代码如下:
<body>
<h4>一个定义列表：</h4>
<dl>
<dt>咖啡</dt>//相当于一个小标题
<dd>黑色的热饮料</dd>//该标题下面的内容
　<dd>黑色的热饮料</dd>
<dd>黑色的热饮料</dd>
<dt>Milk</dt>//一个dl中可以有多个dt
<dd>白色的冷饮料</dd>//一个dt中可以有多个dd
<dd>白色的冷饮料</dd>
<dd>白色的冷饮料</dd>
</dl>
</body>

至于尾部我就不讲了，相信你已经可以写出他的html部分了
下一讲我将为大家重点讲解表单元素和table元素。

标签：
web标准
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网