文章目录
简述：
-
HTML：定义页面的内容
-
CSS：描述页面的布局，装饰页面
-
JavaScript：页面的行为
1.HTML
1.1 文档结构
- HTML网页结构
<html> <!-- html页面根元素-->
<head>
<meta > 元信息 </>
<title> 页面标题 </>
<style> 外部样式表 </>
<script> 响应用户操作 </>
</head>
<body>
</body>
</html>
注意：
- jsp界面的编码三阶段：
第1阶段：pageEncoding: " . jsp"–>".java"
第2阶段：utf-8 : “.java”–>".class"
第3阶段：contentType :“载入执行.class结果显示在客户端”
- 相对路径、绝对路径
- ./和…/
- 元信息：(指明设置内容工作，及具体内容)
元数据不会显示在页面上，机器可读，可用于浏览器(如何显示内容，重新加载页面)，搜索引擎(关键词)，其它web服务
1.2 常用标签
元素，属性(名="值"对)
格式：<></>,<元素名 />,<元素名>
注释：
1.2.1 表单：form
<form οnsubmit="return mySubmit()" action="服务器端接收处理表单的程序" method="get/post">
- 先是表单界面的输入验证(一些输入是否合法eg：用户名，邮箱)，验证通过后再将表单提交给服务器端接收处理表单的程序(eg：register.servlet)
-
用户输入：
<input type="" name="" value="" size="" placehidden="" required=""> <input type="submit" value="提交">
required:属性是一个boolean值，字段提交前不能为空(验证字段是否填写)
type:
- 文本域"text"
- 密码"password"
- 单选按钮"radio"/ 复选框"checkbox" (选项的name值都相同)
- 提交及重置"submit"/“reset”
- 普通按钮"button"
输入框边框、获得焦距、图标
<style>
input[name=search]{
background-img: url('http://static.runoob.com/images/mix/searchicon.png;')
background-position: 10px 10px;
background-repeat:no-repeat;
padding:12px 20px 12px 40px;
}
input[type=text]{
weidth:100%;
border:1px solid #555;
border-radius:5px;
}
input[type=text]:focus{background-color:#00ffff;}
</style>
<body>
<form action="regist.servlet">
<input type="text" name="search" placeholder="搜索.."></input>
<input type="text" name="fname" value="John"></input>
<input type="text" name="lname" value="Doe"></input>
</form>
</body>
-
下拉列表及选项：
<select name=""> <option value="" selected></option><!--已预选--> <option value=""></option> </select> -
文本框：
<textarea rows="" cols="">
1.2.2 标题：h1~h6
1.2.3 段落：p、换行 <br>、水平线<hr>
1.2.4 表格：table、tr、td
<table border=“1” style=“border-collaps:collaps”>
border="1"显示边框
border-collaps:collaps表格的边框是否被折叠成一个单一的边框
标题
整列样式
表头
若干行、每行有若干单元格、单元格内容可为：表格、文本、图片、列表、段落等等
align：水平对齐，左右顶底left、right、top、bottom
valign：垂直对齐，top/middle/bottom/baseline
跨tr、td：rowspan、colspan
1.2.5 链接：
<a href="链接到何处">文本、图片等</a>
- target=“被链接的文档在何处打开”
(注意：_blank:在新窗口打开；rel="noopener noreferrer“:提高安全性)
- _self:默认，在相同的框架中打开被链接文档
- _parent:在父框架集中打开
- _top:在整个文档窗口中打开
- framename:在指定框架中打开
- id或者name：锚，从文档的某位置直接跳转打其它位置
<a id=“tips”>锚点
<a href="# tips">访问锚点
1.2.6 图像：img
1.
2.
（<img src=“C:/Users/Administrator/Desktop/typora笔记/smiley.gif” alt=“Typora” width="" height="">）
3.<img src="/images/smiley.gif" alt=“微笑加载失败”>
- 带有可点击域的图像映射(可点击域的形状和坐标)
<img src="" border="" usermap="#plantmap" alt="">
<map name="plantmap" id="plantmap">
<area shape="" coords="" href="" alt=""/>
</map>
- 设置图像链接
<p>这是一个图像链接
<a href="">
<img >
</p>
-
浮动图像: style=“float:left/right”
-
排列图像(将图像放入一定的排版内容中)
1.2.7 列表
-
无序列表：ul、li
> <ul style="list-style-type:disc"> > <li>孙悟空</li> > <li>唐僧</li> > </ul> > > style="list-style-type:disc/circle/square" > > 嵌套列表： > > <ul> > <li>孙悟空 > <ul> > <li>金箍棒</li> > <li>火眼金睛</li> > </ul> > </li> > <li>唐僧</li>
- 孙悟空
- 唐僧
style=“list-style-type:disc/circle/square”
嵌套列表：
- 孙悟空
- 金箍棒
- 火眼金睛
- 唐僧
-
有序列表：ol、li
> <ol type="A"> > <li>孙悟空</li> > <li>唐僧</li> > </ol>
- 孙悟空
- 唐僧
-
自定义列表：dl、dt、dd
> <dl> > <dt>孙悟空</dt> > <dd>~ 花果山美猴王</dd> > <dd>~ 弼马温</dd> > <dt>唐僧</dt> > </dl>
孙悟空
- ~ 花果山美猴王
- ~ 弼马温
唐僧
1.2.8 框架：frameset、frame、iframe
用框架：一个浏览器窗口显示不止一个页面(HTML)
每个中有一些列的行或者列(不能与重用)
中src=放置在每个框架中的HTML noresize="noresize"(禁止拖动可见边框改变框架的大小
- 垂直框架
<html>
<frameset cols="25%,50%,25%">
<frame src="https://www.w3school.com.cn/example/html/frame_a.html">
<frame src="https://www.w3school.com.cn/example/html/frame_b.html">
<frame src="https://www.w3school.com.cn/example/html/frame_c.html">
</frameset>
</html>
- 水平框架
- 混合框架结构
<frameset rows="">
<frame src>
<frameset cols="">
<frame>
<frame>
</frameset>
</frameset>
- 导航框架
<frameset cole="120，*”>
<frame src="https://www.w3school.com.cn/example/html/html_contents.html">
<frame src="https://www.w3school.com.cn/example/html/frame_a.html" name="showframe">
</frameset>
<html>
<body>
<a href="/frame_a.html" target="showframe">Frame a</a><br>
<a href="/frame_c.html" target="showframe">Frame c</a>
</body>
</html>
- 内联框架
<body>
<iframe src="demo_iframe.html" name="iframe_a"></iframe>
<p>
<a href="//www.runoob.com" target="iframe_a">RUNOOB.COM
</p>
</body>
1.2.9 布局：区块：div、span
使用id、class标记分类各div
<div id="container" style="width:500px">
<div id="header" style="background-color:pink;">
<h1 style="margin-bottom:0;text-align:center;">主要的网页标题
</div>
<div id="menu" style="background-color:yellow;height:150px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript<br>
</div>
<div id="content" style="background-color:#C0C0C0;height:150px;width:300px;float:left;overflow-y:auto">
内容显示区域<br>内容显示区域<br>内容显示区域<br>内容显示区域<br>
内容显示区域<br>内容显示区域<br>内容显示区域<br>内容显示区域<br>
</div>
<div id="advertising" style="background-color:black;color:#FFFFFF;height:150px;weight:100px;flost:reight">广告显示</div>
<div id="footer" style="background-color:#00FFFF;text-align:center;clear:both">版权 @fx</div>
> span 将文本/文档的一部分独立出来，可使用CSS定义样式、JavaScript进行操作
<p>孙悟空有<span style="color:yellow">火眼</span>金睛</p>
## 1.3 多媒体
### 1.3.1 插件
通过<object>(data)、<embed>(src)加载插件(多媒体元素)
<param name="" value="">为object的插件参数指定"名-值"
```html
<object width="400" height="50" data="bookmark.swf">
<param name="autoplay" value="true">
</object>
<object width="100%" height="500px" data="snippet.html"></object>
<object data="logo.png"></object>
1.3.2 音频
controls 属性是一个布尔型属性，如果存在，会指定音频控件(控件有：播放、暂停、进度条、音量)的显示方式
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
</audio>
<embed height="50" width="100" src="horse.mp3">
<a href="horse.mp3">这是一个音频文件链接</a>
1.3.3 视频
<video width="300" height="200" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<object data="movie.mp4" width="300" height="200">
<embed src="movie.mp4" width="300" height="200">
</object>
</video>
<a href="intro.swf">这是一个视频文件链接</a>
1.4 事件
1.5 DOM对象
HTML DOM(Document Object Model)：获取、修改、添加、删除HTML元素的标准(动态访问和更新文档的内容、结构和样式)
DOM以树状结构表达HTML文档
-
Document对象：
浏览器载入HTML文档，它就会成为***Document对象***；
是HTML文档的根结点，可从脚本中对HTML页面的所有元素进行访问；
是Window对象的一部分，通过Window.document属性对其进行访问
Document对象属性和方法:
var element=document.getElementById("id")获取指定id的节点 x =element.getElementByTagName("tagname")获取指定标签名的所有元素(列表) document.getElementByClassName()返回同一类名的所有HTML元素(列表) -
元素对象：
代表着一个HTML元素
元素对象的子节点可以是元素节点、文本节点、注释节点
NodeList对象代表节点列表，类似HTML元素的子节点集合
NameNodeMap对象表示一个无顺序的节点列表(通过节点名称访问其中的节点)
-
属性对象：
Attr对象代表一个HTML属性
innerHTML 获取对象的内容:document.getElementById('id').innerHTML 向对象插入内容: document.getElementById('id').innerHTML='这是插入的内容' nodeName--只读、节点的名称(文本节点：text、文档节点：document) nodeValue--节点的值 -
事件对象：
DOM事件允许JavaScript在HTML文档元素中注册不同的事件处理程序
事件+函数结合使用，函数不会在事件发生前执行
- 鼠标事件
onclick–点击某个对象时调用
ondblclick–双击某个对象时调用
onmousedown/up、onmouseenter/over、onmouseleave/out–鼠标按下/松开，移动到元素上，移开
<body> <div onmuseover="mOver(this)" onmuseout="mOut(this)" style="">Mouse Over Me</div> <script> function mOver(obj){ obj.innnerHTML="Tank You" } function mOut(obj){ obj.innerHTML="Mouse Over ME" } </script> </body>- 键盘事件
- 框架/对象事件
- 表单事件
onfouces
5.修改：HTMl内容/属性、CSS样式、创建/删除HTML元素
HTMl内容
<p id="p1">Hello World</p> <script> document.getElementById("p1").innerHTML="新文本！"； </script>CSS样式
<p id="p1">Hello World</p> <p id="p2">Hello World</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; </script>创建新HTML元素(creatElement()、并将其追加到已有元素上)
<div id="div1"> <p id="p1">这是段落1</p> <p id="p2">这是段落2</p> </div> <script> var para=document.creatElement("p"); var node=document.creatTextNode("这是一个新段落"); para.appendChild(node); var element=documentlgetElementById("div1"); element.appendChild(para); </script>
本文为菜鸟教程和网络资料的学习总结，有问题处希望指正，可以参考菜鸟教程：https://www.runoob.com/html/html-tutorial.html
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
