声明：本教程源于本人学习的一些经验的总结，希望大家帮忙完善与指正，也希望会给初学者带来方便，希望大家不要随便转载，写的不是很好，还不完善，不过转载时要注明作者和出处，附加原文的链接地址，谢谢了
上讲回顾：上一讲我主要讲解了一下网页的基本结构与网页主体部分的基本结构，以及常用的html标签。
非常感谢网友对我的大力支持，谢谢你们给我的鼓励！
我继续上一讲：又开始实战了，代码敲起来！
1
<
div id
=
”logo”
>
2
<
a href
=
”http:
//
online.cumt.edu.cn”>
3
<
/
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：
1
<
body
>
2
<
img alt
=
“
我是图片
“
title
=
“
Hello!
“
src
=
“
../images/images.jpg
“
/
>
3
<
/
body>
So easy !
插播广告：../images/images.jpg：..代表返回到上一级文件，什么意思呢，我们的目的是找到html文件夹外面的images文件夹中的images.jpg文件，那我们就一步一步的进行，首先从html文件夹跳出来（..），这是我们已经指向E盘了，然后找E盘中的images文件夹（/images）;最后找到文件（/ images.jpg）;光听我讲是不行的，要多实践哦！
当然img标签还有两个常用属性width和height，分别来限制显示图片的宽度和高度；默认为图片的实际尺寸，不妨试试这段代码，你就明白啦：
1
<
body
>
2
<
img alt
=
“
我是图片
“
title
=
“
Hello!
“
src
=
“
../images/images.jpg
“
/
>
3
<
img alt
=
“
我是图片
“
title
=
“
Hello!
“
src
=
“
../images/images.jpg
“
width
=
“
20
“
height
=
“
20
“
/
>
4
<
img alt
=
“
我是图片
“
title
=
“
Hello!
“
src
=
“
../images/images.jpg
“
width
=
“
200
“
height
=
“
200
“
/
>
5
<
/
body>
So easy !
好，我们继续头部讲解,导航的搜索框部分代码被我省略了，表单元素准备单独进行将讲解。
1
<
div id
=
“
nav
“
>
2
<
ul
>
3
<
li
><
a href
=
“
#
“
>
首页
<
/
a><
/
li
>
4
<
li
><
a href
=
“
#
“
>
新闻中心
<
/
a><
/
li
>
5
<
li
><
a href
=
“
#
“
>
资源下载
<
/
a><
/
li
>
6
<
li
><
a href
=
“
#
“
>
论坛
<
/
a><
/
li
>
7
<
/
ul>
8
<
ul
>
9
<
li
><
a href
=
“
#
“
>
个人空间
<
/
a><
/
li
>
10
<
li
><
a href
=
“
#
“
>
博雅园
<
/
a><
/
li
>
11
<
li
><
a href
=
“
#
“
>
跳蚤市场
<
/
a><
/
li
>
12
<
li
><
a href
=
“
#
“
>
音乐站
<
/
a><
/
li
>
13
<
/
ul>
14
<
/
div>
So easy !
有人可能疑问这代码的运行结果与所给的图片差的太多了，哈哈，这是正常的，但到目前为止至少文字还是对的，如果感兴趣可以提前去学习一下css；
好标签继续：
标签5：ul
使用指数：*****
功能：构造一个无序列表，必须配合li来使用
类型：块级元素
常用属性：id，class
标签6：ol
使用指数：*****
功能：构造一个有序列表，必须配合li来使用
类型：块级元素
常用属性：id，class
何为无序？何为有序？运行一下代码便知分晓：
1
<
div id
=
“
nav
“
>
2
<
ul
>
3
<
li
><
a href
=
“
#
“
>
首页
<
/
a><
/
li
>
4
<
li
><
a href
=
“
#
“
>
新闻中心
<
/
a><
/
li
>
5
<
li
><
a href
=
“
#
“
>
资源下载
<
/
a><
/
li
>
6
<
li
><
a href
=
“
#
“
>
论坛
<
/
a><
/
li
>
7
<
/
ul>
8
<
ol
>
9
<
li
><
a href
=
“
#
“
>
个人空间
<
/
a><
/
li
>
10
<
li
><
a href
=
“
#
“
>
博雅园
<
/
a><
/
li
>
11
<
li
><
a href
=
“
#
“
>
跳蚤市场
<
/
a><
/
li
>
12
<
li
><
a href
=
“
#
“
>
音乐站
<
/
a><
/
li
>
13
<
/
ol>
14
<
/
div>
So easy !
感兴趣的可以提前去看看他们的list-style属性，你会觉得很有意思，这里就不介绍了，这部分还是在讲解css的时候再说吧。到这里header就完成了。
整理：
1
<
div id
=
“
header
“
>
2
<
div id
=
“
banner
“
>
3
<
span
>
你还没有登录，请登录
<
/
span>
4
<
a target
=
“
_blank
“
href
=
“
#
“
title
=
”注册只需要5分钟！”
>
登陆
<
/
a>注册<
/
a
>
5
<
/
div>
6
<
div id
=
“
logo
“
>
7
<
img src
=
“
../images/images.jpg
“
alt
=
“
logo
“
title
=
“
其实这不是logo
“
/
>
8
<
/
div>
9
<
div id
=
“
nav
“
>
10
<
ul style
=
“
list-style:
“
>
11
<
li
><
a href
=
“
#
“
>
首页
<
/
a><
/
li
>
12
<
li
><
a href
=
“
#
“
>
新闻中心
<
/
a><
/
li
>
13
<
li
><
a href
=
“
#
“
>
资源下载
<
/
a><
/
li
>
14
<
li
><
a href
=
“
#
“
>
论坛
<
/
a><
/
li
>
15
<
/
ul>
16
<
ul
>
17
<
li
><
a href
=
“
#
“
>
个人空间
<
/
a><
/
li
>
18
<
li
><
a href
=
“
#
“
>
博雅园
<
/
a><
/
li
>
19
<
li
><
a href
=
“
#
“
>
跳蚤市场
<
/
a><
/
li
>
20
<
li
><
a href
=
“
#
“
>
音乐站
<
/
a><
/
li
>
21
<
/
ul>
22
<
/
div>
23
<
/
div>
So easy !
效果好难看。。。
至于content部分我只讲三小块，不要惊讶，因为其他的大体都是一样的啊，目的还是为了让大家认识一些常用的标签，ok，Begin！Right now！
1:
代码：
1
<
div
>
2
<
a title
=
“
全国高校百佳网站网络评选活动即将进入投票阶段
“
href
=
“
#
“
>
3
<
img alt
=
“
全国高校百佳网站
“
src
=
“
tempImg/nschool_pic.jpg
“/
>
4
<
/
a>
5
<
h3
>
6
<
a href
=
“
#
“
>
全国高校百佳网站
<
/
a>
7
<
/
h3>
8
<
p
>
9
由教育部思想政治工作司指导、中国大学生在线网站主办…
10
<
a href
=
“
#
“
>
【详情点击】
<
/
a>
11
<
/
p>
12
<
/
div>
So easy !
标签7：h1,h2,h3,h4,h5,h6
使用指数：***
功能：构造一个标题，通常用于显示一块的标题部分，或者文章的标题部分，默认的字体是加粗的，不同级别的标题标签只是字体大小不同而已
类型：块级元素
常用属性：id，class
标签8：p
使用指数：*****
功能：构造一个段落
类型：块级元素（但是不同与div）
常用属性：id，class
例子（这里我引用了w3cSchool的例子）：
1
<
body
>
2
<
p
>
3
这个段落
4
在源代码中
5
包含许多行
6
但是浏览器
7
忽略了它们。
8
<
/
p>
9
<
p
>
10
这个段落
11
在源代码 中
12
包含 许多行
13
但是 浏览器
14
忽略了 它们。
15
<
/
p>
16
<
p
>
17
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
18
<
/
p>
19
<
/
body>
2.
看这个结构显然是一个没有顺序的列表：我们借此来巩固学习一下ul，毕竟他很重要，另外的目的就是为下文铺垫：
代码：
1
<
ul
>
2
<
li
>
3
<
a href
=
“
#
“
>
老师对文法学院2010届…
<
/
a>
4
<
/
li>
5
<
li
>
6
<
a href
=
“
#
“
>
外文学院举行2010届毕…
<
/
a>
7
<
/
li>
8
<
li
>
9
<
a href
=
“
#
“
>
我校举行校领导与2010…
<
/
a>
10
<
/
li>
11
<
li
>
12
<
a href
=
“
#
“
>
校领导深情寄语2010届毕业生
<
/
a>
13
<
/
li>
14
<
/
ul>
So easy !
像这种文字以列表形式存在，而且没有顺序性，也没有标题，我们通常可以使用ul和li的组合来描述
3.
这个与上面一个唯一的不同点就是多了一个标题（“求购信息”），可能有人会想到用这样的组合完成：
1
<
h4
>
求购信息
<
/
h4>
2
<
ul
>
3
<
li
>
…
<
/
li>
4
<
li
>
…
<
/
li>
5
<
/
ul>
当然是很好的，不过这里我要介绍里一个标签组合来实现这个架构：
1
<
dl
>
2
<
dt
>
求购信息
<
/
dt>
3
<
dd
>
4
<
a href
=
“
#
“
>
求个二手手机给老爹用
<
/
a>
5
<
/
dd>
6
<
dd
>
7
<
a href
=
“
#
“
>
求购二手显示器
<
/
a>
8
<
/
dd>
9
<
dd
>
10
<
a href
=
“
#
“
>
寻找自行车钥匙
<
/
a>
11
<
/
dd>
12
<
dd
>
13
<
a href
=
“
#
“
>
求购移动手机（简单功…
<
/
a>
14
<
/
dd>
15
<
dd
>
16
<
a href
=
“
#
“
>
求购天翼电信手机
<
/
a>
17
<
/
dd>
18
<
/
dl>
好乱啊，但其实你耐心一点就很容易了。
标签9：dl
使用指数：*****
功能：构造一个列表，与dt，dd配合使用
类型：块级元素
常用属性：id，class
例子：
1
<
body
>
2
<
h4
>
一个定义列表：
<
/
h4>
3
<
dl
>
4
<
dt
>
咖啡
<
/
dt>
//
相当于一个小标题
5
<
dd
>
黑色的热饮料
<
/
dd>
//
该标题下面的内容
6
<
dd
>
黑色的热饮料
<
/
dd>
7
<
dd
>
黑色的热饮料
<
/
dd>
8
<
dt
>
Milk
<
/
dt>
//
一个dl中可以有多个dt
9
<
dd
>
白色的冷饮料
<
/
dd>
//
一个dt中可以有多个dd
10
<
dd
>
白色的冷饮料
<
/
dd>
11
<
dd
>
白色的冷饮料
<
/
dd>
12
<
/
dl>
13
<
/
body>
至于尾部我就不讲了，相信你已经可以写出他的html部分了
下一讲我将为大家重点讲解表单元素和table元素。
1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。
2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途
![[JavaScript]阻止冒泡事件-千百度社区](https://qbd.heng.ink/wp-content/uploads/2024/08/20240826193942571-frontend_web.svg)
暂无评论内容