HTML 实例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>h5混合开发(www.zixue365.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>
尝试一下 »
实例解析
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
什么是HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
HTML 元素:
<p>这是一个段落。</p>
Web 浏览器
Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。
浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:
HTML 网页结构
下面是一个可视化的HTML页面结构:
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
</body>
</html>
只有 <body> 区域 (白色部分) 才会在浏览器中显示。 |
版本 | 发布时间 |
---|---|
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2012 |
XHTML5 | 2013 |
<!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的,以下方式均可:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用声明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整网页声明类型 DOCTYPE 参考手册。
中文编码
目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8。
HTML 实例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>页面标题</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>
HTML 编辑器推荐
可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器:
Notepad++:https://notepad-plus-plus.org/
Sublime Text:http://www.sublimetext.com/
HBuilder:http://www.dcloud.io/
你可以从以上软件的官网中下载对应的软件,按步骤安装即可。
接下来我们将为大家演示如何使用Notepad++工具来创建 HTML 文件,其他两个工具操作步骤类似。
Notepad++
Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。
步骤 1: 新建 HTML 文件
在 Notepad++ 安装完成后,选择" 文件(F)->新建(N) ",在新建的文件中输入以下代码:
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>h5混合开发提供(www.zixue365.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>
步骤 2: 另存为 HTML 文件
然后选择" 文件(F)->另存为(A) ",文件名为 runoob.html:
当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别,完全根据您的喜好。
在一个容易记忆的文件夹中保存这个文件,比如h5混合开发
步骤 3: 在浏览器中运行这个 HTML 文件
启动您的浏览器,然后选择"文件"菜单的"打开文件"命令,或者直接在文件夹中双击您的 HTML 文件,
运行显示结果类似如下:
Notepad++ 和 Sublime Text 还可以配合 Emmet 插件来提高编码速度。
Emmet 官网:http://emmet.io/
不要担心本章中您还没有学过的例子,
您将在下面的章节中学到它们。
HTML 标题
HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.
实例
<h1>这是一个标题</h1><h2>这是一个标题</h2><h3>这是一个标题</h3>
尝试一下 »
HTML 段落
HTML 段落是通过标签 <p> 来定义的.
实例
<p>这是一个段落。</p><p>这是另外一个段落。</p>
尝试一下 »
HTML 链接
HTML 链接是通过标签 <a> 来定义的.
实例
<ahref="http://www.zixue365.com">这是一个链接</a>
尝试一下 »
提示:在 href 属性中指定链接的地址。
(您将在本教程稍后的章节中学习更多有关属性的知识).
HTML 图像
HTML 图像是通过标签 <img> 来定义的.
实例
<imgsrc="/images/logo.png"width="258"height="39"/>
尝试一下 »
注意: 图像的名称和尺寸是以属性的形式提供的。
HTML 文档由 HTML 元素定义。
HTML 元素
<phtml 元素指的是从开始标签(start="" tag)到结束标签(end="" tag)的所有代码。<="" p="">
开始标签 * | 元素内容 | 结束标签 * |
---|---|---|
<p> | 这是一个段落 | </p> |
<a href="default.htm"> | 这是一个链接 | </a> |
<br> |
*开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容(empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束)
大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。
嵌套的 HTML 元素
<p大多数 html="" 元素可以嵌套(可以包含其他="" 元素)。<="" p="">
HTML 文档由嵌套的 HTML 元素构成。
HTML 文档实例
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
以上实例包含了三个 HTML 元素。
HTML 实例解析
<p> 元素:
<p>这是第一个段落。</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: 这是第一个段落。
<body> 元素:
<body>
<p>这是第一个段落。</p>
</body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素(p 元素)。
<html> 元素:
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>.
元素内容是另一个 HTML 元素(body 元素)。
不要忘记结束标签
即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:
<p>这是一个段落
<p>这是一个段落
以上实例在浏览器中也能正常显示,因为关闭标签是可选的。
但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
HTML 提示:使用小写标签
HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
h5混合开发使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
高保真的完成下图布局:
首先要分析一下各个模块的布局
我们依旧使用的盒子模型。
首先先分为两个大盒子(红色边框)header 盒子和 content 盒子。
其中content中相对对来说比较简单,就需要添加需要的内容文字就好啦。
header相对于基本作业要复杂一些。
在header中首先要分为两个盒子(绿色边框)第一个盒子head装的是标题,下面的盒子info_box装了三个盒子。包括信息盒子info、评论盒子comment_box评论盒子、分享盒子share_box。
评论盒子comment_box中 分为 join div元素和 comment div元素
分享盒子share_box中 分为sina (微博)qqzone(qq空间)wechat(微信)
大体的布局还是用div元素实现,其中信息盒子与评论盒子打算用p+span元素实现,分享盒子用div+“雪碧图”实现。
标题框和内容框的距离为40px。
三、完成html代码
根据我们上面对各个模块布局的分析,我们接下来就可以写html代码啦~其中在header的info盒子,其中信息盒子与评论盒子打算用p+span元素实现(语义化更好一点),分享盒子用div+“雪碧图”实现。
(这里还是有需要的改进的地方,比如行前面的空格我是使用的 空格键,应该还有更好的方法,请大佬指教嘿嘿~)
代码如下:
<html>
<head>
<title>加分作业
</title>
<link rel="stylesheet" href="css/demo2.css">
</head>
<body>
<div class="container">
<div class="header">
<p class="head">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
<div class="info_box">
<p class="info">
<span>2020年5月21日 08:38:23</span><br>
<span class="text">来源:</span>
<span class="sourse">蜡笔小新酱</span>
<span class="icon_1"> </span>
</p>
<div class="comment_box">
<p class="join"><span>0</span>人参与</p>
<p class="comment"><span>0</span>人评论</p>
</p>
</div>
<div class="share_box">
<div class="sina"></div>
<div class="qqzone"></div>
<div class="wechat"></div>
</div>
</div>
</div>
<div class="content">
<p><span> 我的名字是蜡笔小新,我今年五岁,我很快乐,我的妈妈是美牙,我的爸爸是广治
</span><br>我的朋友有</span><br/> 阿呆<br/> 风间
<br/> 正南<br/> 妮妮<br/> 小白<br/></p>
</div>
</div>
</body>
</html>
四、CSS美化
为了尽可能高保真,我们要测量一下各个模块之间的距离。
标题框和内容框的距离为40px
在整个标题盒子 header中,标题head和信息盒子info_box之间的距离30px
在信息盒子中,来源盒子info和评论盒子comment_box的距离是228px
评论盒子comment_box和分享盒子share_box之间的像素是30px
其中来源盒子info中的时间和来源之间的像素是10px
在评论盒子中的 参与和评论之间的像素为20px
在分享盒子中每个图片之间的距离为10px
css代码如下:
* {
margin: 0px;
padding: 0px;
}
.container {
width: 670px;
height: 800px;
margin: auto;
}
.head {
font: bold 24px Microsoft Yahei;
margin-top: 40px;
}
.info {
font: 12px Microsoft Yahei;
color: #999;
margin: 25px 0 5px 0;
line-height: 20px;
width: 350px;
}
.header {
height: 142px;
width: 655px;
border-bottom: 1px solid #828181;
display: flex;
flex-direction: column;
}
.content p {
line-height: 40px;
font: Microsoft Yahei;
color: #636363;
margin-top: 40px;
}
.content p span {
line-height: 15px;
}
.icon_1 {
background: url("../img/icon_1.png") no-repeat 2px center;
padding: 19px;
}
.info_box {
display: flex;
}
.comment_box {
display: flex;
color: #999;
margin: 40px 30px 5px 0;
}
.comment_box p {
font: Microsoft Yahei;
font-weight: lighter;
font-size: 12px;
}
.share_box {
display: flex;
font-size: 12px;
height: 40px;
margin: 32px 0px 5px 0;
}
.join {
margin: 0px 20px;
}
.qqzone {
margin-left: 10px;
}
.wechat {
margin-left: 10px;
}
.comment_box span {
font-family: 'Georgia';
font-size: 16px;
font-style: normal;
font-weight: bold;
color: red;
}
.sina {
background-position: 0px 0px !important;
}
.qqzone {
background-position: 0px -32px !important;
}
.wechat {
background-position: 0 -66px !important;
}
.share_box div {
width: 40px;
height: 30px;
background: url(../img/icon_3.jpg);
}
五、CSS美化分析
1.使用行内元素span标签。作为行内元素span标签使用起来也很方便,作为一个小容器,可以把容器分为多个小容器,方便容器中个别部分应用样式,对于容器中其他部分实现特别的效果。其中在评论盒子中用到。如下图。我们可以看到 0人参与 0人评论 可以用p元素一行完成,但是有一个问题,“0”的字体和颜色和别的字不太一样。我们在实现的过程中可以再多写几个div 然后重新布局但是那样太麻烦了,直接使用行内元素就可以搞定。
html代码如下:
<p class="join"><span>0</span>人参与</p>
<p class="comment"><span>0</span>人评论</p>
css美化:
.comment_box {
display: flex;
color: #999;
margin: 40px 30px 5px 0;
}
.comment_box span {
font-family: 'Georgia';
font-size: 16px;
font-style: normal;
font-weight: bold;
color: red;
}
2.在分享盒子share_box中设置背景图片的时候使用雪碧图。
先来说一说雪碧图是怎么回事
首先把网页中一些背景图片整合到一张图片文件中(png格式)
再利用CSS的"background-image"引入图片,配合"background- repeat"禁止平铺
最后利用css的"background-position"进行背景精确的定位出背景图片的位置(默认起始位置为background-position:0% 0%;如果background-position属性值之设置一个,那么另一个默认为center。
我们需要加载的图片素材是这样的
而我们最后要的效果是这样的,是三张分开的图片,但是都是上面图片的一部分
此时我们就可以用雪碧图啦~先设置 sina wechat qqzone 这三个盒子的大小并使这三个盒子都以这张雪碧图为背景:
.share_box div {
width: 40px;
height: 30px;
background: url(../img/icon_3.jpg);
}
后在各个div中使用background-position进行定位。就是定位到我们想要的部分。
.sina {
background-position: 0px 0px !important;
}
.qqzone {
background-position: 0px -32px !important;
}
.wechat {
background-position: 0 -66px !important;
}
特别要注意一点 在给div添加定位时,要写!important提升指定样式规则的应用优先权。这样才可以定位到不同图片的坐标。
使用雪碧图的优点:如果图片来源于网页的话,就可以减少http请求的次数,提高页面加载速度。方便修改。
六、优化
根据我们以上的效果,我们可以进行一下优化。比如添加背景图片~或者添加鼠标悬停的效果。
在这里,我(突发奇想)设计了此页面的一个深色模式(其实就是把白底黑字换成暗底白色来)还有一些鼠标悬停的效果。
添加背景图片的css代码如下:
.container {
width: 670px;
height: 500px;
margin: auto;
background-position: center;
background-image: url(../img/bgimg.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
添加鼠标悬停效果css代码如下:
.sourse:hover {
color: red;
cursor: pointer;
text-decoration: underline;
}
.comment_box p:hover {
cursor: pointer;
text-decoration: underline;
color: red;
}
.share_box div {
cursor: pointer;
}
高保真:
优化图:
1,添加css时,一定要写这句:
* {
margin: 0px;
padding: 0px;
}
否则会页面的内容不会贴顶,就是总是和页面顶部有一些距离。
2,通过这次实验我更进一步的体会到了盒子模型的一些特点,对boder margin padding 有了更深一步的理解。可以把盒子模型想成一个装在快递盒子里新手机盒。新手机是我们的内容,手机和手机盒的泡沫就是padding(内边框),手机盒子的纸壳就是border(边框),最后手机盒子和快递盒子之间的距离就是margin(外边距)。
HTML 是一种描述网页语言, 指的是超文本标记语言 (Hyper Text Markup Language)。其中,超文本指的是网页上可以包含图片,视频,连接信息。标记也叫做标签,所以标签书写的是<内容>。语言就是一种交流工具,HTML 是用户与浏览器之间交互工具。
简单说,HTML 是由浏览器解析执行的,它不会将 HTML 标签展示出来,而是会解析 HTML 标签,以特定效果展示出来。
<html>
<head>HEAD</head>
<body>BODY</body>
</html>
可以使用 JetBrains WebStorm 或者 VS Code 进行开发。
<html> 代表当前书写的是一个 HTML 文档
<head> 存储的本页面的一些重要的信息,它不会显示
标签下有一个子标签 <title> 它是用于定义页面的标题的
<body> 书写的内容会显示出来,属性:1. text 用于设置文字颜色;2. bgcolor 用于设置页面的背景色;3. background 用于设置页面的背景图片
<!-- 注释不会在浏览器中显示 -->
br 标签就是一个换行功能标签
在 p 标签中的内容会在开始与结束之间产生一个空白行并且它会自动换行
常用属性 align 的作用是设置段落中的内容对齐方式,可取值有 left right center
hr 标签会在页面上产生一个水平线
常用属性:
align:可取值有 left right center 代表水平线位置
size:代表水平线高度(厚度)
width:代表水平线宽度
color:水平线的颜色
两种方式:
Div 是一个块标签
Div 与 CSS 结合,会更好对页面进行排版
Span 标签也是一个块标签Div 与 span 区别:Div 会自动换行,我们也叫这样的标签为行级元素Span 标签它不会自动换行,我们也叫它为行内元素
Font 标签可以设置字体,字的大小及颜色
常用属性:
Face:用于设置字体,例如 宋体 隶书 楷体
Size:用于设置字的大小
Color:用于设置字的颜色
我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。每一种颜色的饱和度和透明度都是可以变化的,用 0~255 的数值来表示。如纯红色表示为 (255,0,0),十六进制表示为 #FF0000。按这种表达方式,理论上我们可以得到 256 * 256 *256=16777216 种颜色。
<h1> 最大 <h6> 最小,它们代表的是标题,可以使用 <b> <i> 对文字设置加粗或倾斜
注意:在 HTML 中允许标签进行嵌套的,但是一般都包裹嵌套,而不可以进行交叉嵌套
有序清单:
<!-- 有序列表 I II III-->
<ol type="I" start="3">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<!-- 无序列表 -->
<ul type="square">
<li>Java</li>
<li>Python</li>
<li>C#</li>
</ul>
<img> 可以让我们在网页引入一张图片
常用属性
<a> 标签可以实现跳转到其它页面操作。超链接内容不仅可以是文本,也可以是图片等信息
常用属性
<!-- 学习表格标签 -->
<table border="2" align="center" width="400px">
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>语文成绩</th>
<th>数学成绩</th>
<td colspan="2" align="center"><b>操作</b></td>
</tr>
<tr align="center">
<td>张三</td>
<td>99</td>
<td>100</td>
<td>修改</td>
<td>删除</td>
</tr>
<tr align="center">
<td>李四</td>
<td>90</td>
<td>66</td>
<td>修改</td>
<td>删除</td>
</tr>
</table>
通过表单可以将要提交的数据提交到指定的位置
<!-- 表单:用户注册案例 -->
<form name="form1" action="user/login" method="POST">
<table border="1" width="64%" align="center">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex" >女
</td>
</tr>
<tr>
<td>地址:</td>
<td>
<select name="province">
<option value="0">--请选择省--</option>
<option value="10001">广东</option>
<option value="10002">上海</option>
<option value="10003">山东</option>
</select> 省
<select name="city">
<option>--请选择市--</option>
<option value="1000301">广州市</option>
<option>深圳市</option>
<option>东莞市</option>
</select> 市
</td>
</tr>
<tr>
<td>编程语言:</td>
<td>
<input type="checkbox" name="language" checked="checked">Java
<input type="checkbox" name="language">Python
<input type="checkbox" name="language">Go
</td>
</tr>
<tr>
<td>照片:</td>
<td>
<input type="file" name="image">
</td>
</tr>
<tr>
<td>自我介绍:</td>
<td>
<textarea name="remark" rows="5" cols="100"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
<input type="reset" value="取消">
</td>
</tr>
</table>
</form>
通过框架标签可以定制 HTML 页面布局
在 HTML 页面上去描述框架信息时,不可以将 <frameset> 写在 <body> 标签中
framesetTest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 框架标签</title>
</head>
<!-- rows 定义了三行:第一行 100 像素,第三行:100 像素;第二行:剩下的像素 -->
<frameset rows="100, * , 100">
<frame name="topModule" src="./top.html"></frame>
<frameset cols="100, * ">
<frame name="menuModule" src="./menu.html"></frame>
<frame name="contentModule" src="./content.html"></frame>
</frameset>
<frame name="footModule" src="./foot.html"></frame>
</frameset>
</html>
top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>top</title>
</head>
<body>
<div>头部信息</div>
</body>
</html>
foot.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>footL</title>
</head>
<body>
<div>底部信息</div>
</body>
</html>
menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>menu</title>
</head>
<body>
<div>菜单信息</div>
</body>
</html>
content.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>content</title>
</head>
<body>
<div>内容显示区</div>
</body>
</html>
<meta> 标签必须写在 <head> 标签之间
使用 link 标签来导入 CSS
详情查看菜鸟教程:https://www.runoob.com/charsets/ref-html-ascii.html
DOM, Document Object Model -- 文档对象模型,是 HTML 和 XML 文档的编程接口,以树结构表达 HTML 文档。
DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准。
W3C DOM 标准被分为 3 个不同的部分:
DOM 是被视为节点树的 HTML。
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
HTML DOM 将 HTML 文档视作树结构,这种结构被称为节点树。
节点树中的节点彼此拥有层级关系。常用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
HTML DOM 方法是可以在节点(HTML 元素)上执行的动作。
HTML DOM 属性是可以在节点(HTML 元素)设置和修改的值。
可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。方法是能够执行的动作(比如添加或修改元素)。属性是能够获取或设置的值(比如节点的名称或内容)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
</head>
<body>
<div id="div1">
<p id="p1">Hello</p>
<p id="p2">Hello</p>
</div>
<script>
// 先获取 P 元素
var element = document.getElementById("p1")
// 直接修改 p 元素的内容
element.innerHTML = "此时已是修改后的内容"
// 修改 p2 标签的样式
var ele = document.getElementById("p2")
ele.style.color="blue"
ele.style.fontFamily="宋体"
ele.style.fontSize="larger"
// 添加元素
// 创建一个p元素
var elementP = document.createElement("p")
// 创建一个内容
var nodeText = document.createTextNode("新加的 P 元素")
// 把文字内容添加到p元素中
elementP.appendChild(nodeText)
// 把新创建的p元素添加div1元素中
var div1 = document.getElementById("div1")
div1.appendChild(elementP)
// 插入添加新的元素
// 创建一个新的元素
var eleP = document.createElement("p")
// 创建一个内容
var noText = document.createTextNode("在 P1 元素前添加的新元素")
// 把文字内容添加到 p 元素中
eleP.appendChild(noText)
// 把新创建的 p 元素添加 div 1 元素中
var parentDiv1 = document.getElementById("div1")
// 获取指定被添加的元素
var p1 = document.getElementById("p1")
// 在元素前添加;参数说明:1.要添加的元素;2.在那个元素之前添加(指定一个元素)
parentDiv1.insertBefore(eleP, p1)
// 删除元素
// 获取父元素
var pdiv1 = document.getElementById("div1")
var removep1 = document.getElementById("p1")
// 使用父元素删除该元素
pdiv1.removeChild(removep1)
</script>
</body>
</html>
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。当事件发生时,可以执行 JavaScript,比如发生用户点击一个 HTML 元素的事件。
如需在用户点击某个元素时执行代码,可以把 JavaScript 代码添加到 HTML 事件属性中:onclick=JavaScript
HTML 事件的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM 事件</title>
<!-- JavaScript 代码必须写在 script 中 -->
<script>
function onLoadFun(){
alert("已载入...");
}
// 文本框失去焦点事件
function onBlurFun(){
alert("此方法是文本框失去焦点事件,用来校验此文本框输入数据的")
}
// 表单被提交时执行事件
function onSubmitFun(){
alert("此表单已提交,这个方法也可以来作为数据校验的");
}
// 元素被改变时触发事件
function onChangeFun(){
alert("文本框元素已输入新的数据")
}
// 当鼠标悬停在某一个元素上时执行的方法
function onMouseOverFun(element){
element.innerHTML = "鼠标已停在H1元素上了"
}
// 当鼠标离开某一个元素时执行事件
function onMouseOutFun(element){
element.innerHTML = "鼠标已离开H1元素上了..."
}
</script>
</head>
<!-- 需求:当页面被载入时,执行一个代码,弹框提示已载入 -->
<body onload="onLoadFun()">
<!-- 需求:在一个表单中有用户名录入的文本框,当输入完文本框的时候进行名称校验,提交的时候弹框显示 -->
<form onsubmit="onSubmitFun()">
用户名:<input id="username" name="username" onchange="onChangeFun()" >
<br/>
<button type="submit">提交</button>
</form>
<!-- 需求:有一个 H1 标签元素,当鼠标移动到 H1 元素上时,修改文字,当鼠标移出元素时执行事件 -->
<h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一个标题</h1>
</body>
</html>
想了解更多,欢迎关注我的微信公众号:Renda_Zhang
*请认真填写需求信息,我们会在24小时内与您取得联系。