网站开发涉及到的技能内容先容——前端

一、网站开发涉及前后端交互模式

        一样寻常来说网站项目分为两种【前后端不分离、前后端分离】，此中前后端不分离的项目是（后端语言可以直接与前端的html等内容糅合在一起，后端语言可以利用数据举举措态渲染前端的html文件举行展示）。前后端分离的项目是（后端语言不会直接对前端的html文件举举措态渲染，而是后端语言直接将处理处罚好的数据给到前端的javascript代码，javascript代码将数据动态渲染到html文件中；现在国内比力盛行的前端框架有：Vue   Angular    React 官方中文文档）。
        HTML（超文本标记语言——HyperText Markup Language）是一种用于创建网页的标记语言，网页文件的扩展名：.html或.htm；它界说了网页内容的寄义和布局。除 HTML 以外的其他技能则通常用来形貌一个网页的表现与展示效果（如 CSS），或功能与举动（如 JavaScript）。

二、网站前端开发涉及技能

2.1、HTML 超文本标记语言

1. <!DOCTYPE html>
2. <html lang="ZH-CN">
3.     <head>
4.         <meta charset="UTF-8">
5.         <title>HTML的基本文档结构</title>
6.     </head>
8.     <body>
9.         这是HTML的基本文档结构，这里可以放置各类文本标签内容
10.     </body>
11. </html>

复制代码

2.1.1、HTML文档布局先容

HTML根本

https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics

1. <!--对基础HTML文档的内容介绍说明-->
2. <!DOCTYPE html> <!--声明文档类型为HTML文档-->
3. <html lang="ZH-CN"> <!--<html>、</html>是文档的开始标记和结束的标记-->
4.     <head>          <!--<head>、</head>定义了HTML文档的开头内容。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，搜索引擎关键字，网站简介和描述等内容，是给浏览器解析使用-->
5.         <meta charset="UTF-8">  <!--网页编码-->
6.         <meta name="Keywords" content="CSDN博客,CSDN学院,CSDN论坛,CSDN直播" />  <!--搜索引擎关键字(我们使用浏览器搜索就是靠这里的关键字)-->
7.         <meta name="Description" content="CSDN是全球知名中文IT技术交流平台,提供原创、优质、完整内容的专业IT技术开发社区." />    <!--网站的简介和描述-->
8.         <title>HTML的基本文档结构</title>   <!--网站的标题名称-->
9.     </head>
11.     <body>  <!--<body>、</body>之间的文本是可见的网页主体内容-->
12.         这是HTML的基本文档结构，这里可以放置各类文本标签内容
13.     </body>
14. </html>

复制代码

 

2.1.2、HTML的标签语法

HTML文档标签是由一对尖括号包罗的关键字表现，如<html>、<title>、<body>等。
1、HTML标签通常是成对出现如（<html></html> ,<head></head>,<body><body>）等，这种成对标签中第一个标签表现是开始，第二个标签是竣事；
2、只有一个标签，如（<meta>、<br>、<hr>）等；
3、标签内里可以指定多个属性，也可不带任何属性。
2.1.3、常用标签

2.1.3.1、文本标签

1. <!--文本标签-->
2. <h1>主标题</h1>
3. <h2>顶层标题</h2>
4. <h3>子标题</h3>
5. <h4>次子标题</h4>
7. <p>这是一个段落</p>
9. <b>内容加粗</b>
10. <strong>强调内容加粗</strong>
12. <i>内容设置为斜体</i>
13. <em>强调内容设置为斜体</em>
15. <u>给内容设置下划线</u>
17. <del>删除线</del>
19. ^上标
20. _下标
22. <br>    <!--换行-->
23. <hr>    <!--分割线-->

复制代码

示例：

1. <!DOCTYPE html>
2. <html lang="ZH-CN">
3.     <head>
4.         <meta charset="UTF-8">
5.         <meta name="Keywords" content="搜索引擎关键字" />  
6.         <meta name="Description" content="网站的简介和描述" />  
7.         <title>HTML的基本文档结构</title>  
8.     </head>
10.     <body>
11.         这是HTML的基本文档结构，这里可以放置各类文本标签内容
13.         <hr><br>你好，</br>欢迎你
14.         <hr>
15.         <h1 id='01'>Coffeemilk 01</h1>
16.         <p>这是一个测试段落1</p>
17.         <p>这是一个测试段落2</p>
18.         <b>测试字体加粗</b></br>
19.         <i>测试斜体内容</i></br>
20.         <u>测试下划线</u><br>
21.         <strong>strong测试字体加粗</strong></br>
22.         3*²+log₂⁴=11
23.         <p>
24.             原价=<del>199</del><br>
25.             现价=168
26.         </p>
27.     </body>
28. </html>

复制代码

2.1.3.2、HTML字符实体

HTML 字符实体

https://www.w3school.com.cn/html/html_entities.asp
表现效果形貌实体名称实体编号空格  <小于号<<>大于号>>&和号&&"引号""'撇号 &apos; (IE不支持)'￠分（cent）¢¢£镑（pound）££¥元（yen）¥¥€欧元（euro）€€§末节§§©版权（copyright）©©®注册商标®®™商标™™×乘号××÷除号÷÷2.1.3.3、列表标签

1. <ul name='无序列表' type='square'>
2.         <li>张三</li>
3.         <li>李四</li>
4.         <li>王五</li>
5. </ul>
7. <ol name='有序列表' type='A'>
8.         <li>张三</li>
9.         <li>李四</li>
10.         <li>王五</li>
11. </ol>

复制代码

2.1.3.4、超链接标签

1. <!--超级链接标签(href属性必须指定不能为空，表示跳转地址(外部链接地址、内部链接地址)，外部链接地址必须写上完整网址，内部链接地址可以填写相对路径地址就行)-->
2. <a href=""></a>
4. <!--target:表示链接的打开方式：_blank 新窗口  _self 本窗口（默认）title：文字提示属性（详情）-->
5. <a title='外部链接1' href="https://WWW.BAIDU.COM" target='_self'>链接的名称</a>   
6. <a title="外部链接2" href="https://cn.bing.com/" target='_blank'>链接的名称</a>
7. <a title="本网站链接" href=peopleinfo.html>个人中心</a>
9. <!--锚点链接：可实现同一个网页不同位置的跳转-->
10. <!--设置锚点（即：在对于的标签上使用对应的id属性）-->
11. <h1 id='01'>Coffeemilk 01</h1>
12. <h2 id='02'>Coffeemilk 02</h2>
13. <!--使用锚点（即：将href的值设置为指定标签的id）-->
14. <br><a href="#01">跳转到第一个段落</a>
15. <br><a href="#02">跳转到第二个段落</a>

复制代码

示例：

1. <!--超链接使用示例-->
2. <a title='外部链接1' href="https://WWW.BAIDU.COM" target='_self'>百度</a>
3. <a title="外部链接2" href="https://cn.bing.com/" target='_blank'>必应</a>
4. <a title="本网站链接" href=peopleinfo.html>个人中心</a>
5. <a title="该网站链接" href=coffeemilk/shop.html>购物页面</a>
7. <!--锚点的设置和使用-->
8. <h1 id='01'>Coffeemilk 01</h1>
9. <h2 id='02'>Coffeemilk 02</h2>
11. <br><a href="#01">跳转到第一个段落</a>
12. <br><a href="#02">跳转到第二个段落</a>

复制代码

2.1.3.5、多媒体标签

1. <!--图片标签-->
2. <img src='图片的路径和名称或是URL地址'/>
3. <img src='图片的路径和名称或是URL地址' title='鼠标移到该图片上显示的文字提示' alt='图片加载失败时的提示信息' style="border: 边框粗细的数值px solid 边框颜色;" height=图片的高度单位是像素px weight=图片的宽度单位是像素px/>
5. <!--图片链接（点击图片就会跳转到指定的链接）-->
6. <a href='链接地址' target='_blank'>
7. <img src='图片的路径和名称或是URL地址' title='鼠标移到该图片上显示的文字提示' alt='图片加载失败时的提示信息' style="border: 边框粗细的数值px solid 边框颜色;" height=图片的高度单位是像素px weight=图片的宽度单位是像素px/>
8. </a>
10. <!--音乐标签-->
11. <audio controls="controls">
12.         <source src='图片的路径和名称或是URL' type='audio/mpeg' />
13.         你的浏览器不支持播放音乐
14. </audio>
16. <!--视频标签-->
17. <video controls='controls' height=视频的高度单位是像素px weight=视频的宽度单位是像素px loop poster='视频的封面图片路径'>
18.         <source src="视频的路径和名称" type='video/mp4'/>
19.         你的浏览器不支持播放mp4格式视频
20. </video>

复制代码

示例：

1. <img title='测试图片' alt='壁纸图片1' border=3 src='/coffeemilk/1.jpg'/ height=300px weight=400px>
3. <a href='https://www.baidu.com/' target='_blank'>
4. <img src='/coffeemilk/2.jpg'  title='百度' alt='抱歉，该图片丢失'  style="border: 3px solid burlywood;" height=300px weight=400px/>
5. </a>
6. <br>
8. <audio controls="controls">
9.         <source src='./music/不过人间 - 海来阿木.flac' type='audio/mpeg' />
10.         你的浏览器不支持播放音乐
11. </audio>
12. <br>
14. <video controls='controls' height=400 ,weight=300 loop poster='./coffeemilk/1.jpg'>
15.         <source src="./Videos/第1章 基本概念清晰版.mp4" type='video/mp4'/>
16.         你的浏览器不支持播放mp4格式视频
17. </video>

复制代码

2.1.3.6、table表格标签

1. <!--tr：tr 是 table row 的缩写，表示表格的一行-->
2. <!--td：td 是 table data 的缩写，表示表格的数据单元格-->
3. <!--th：th 是 table header的缩写，表示表格的表头单元格-->
5. <table border=1 class="table">
6.         <thead class="thead-dark">
7.                 <tr>
8.                         <th>标题1</th>
9.                         <th>标题2</th>
10.                         <th>标题3</th>
11.                 </tr>
13.         </thead>
14.         <tbody>
15.                 <tr>
16.                         <th>第1行内容的第1列</th>
17.                         <th>第1行内容的第2列</th>
18.                         <th>第1行内容的第3列</th>
19.                 </tr>
20.                 <tr>
21.                         <th>第2行内容的第1列</th>
22.                         <th>第2行内容的第2列</th>
23.                         <th>第2行内容的第3列</th>
24.                 </tr>
25.         </tbody>
26. </table>

复制代码

1. <!--表格示例-->
2. <table border=1 class="table">
3.         <thead class="thead-dark">
4.                 <tr>
5.                         <th>姓名</th>
6.                         <th>年龄</th>
7.                         <th>性别</th>
8.                 </tr>
10.         </thead>
11.         <tbody>
12.                 <tr>
13.                         <th>张三</th>
14.                         <th>26</th>
15.                         <th>男</th>
16.                 </tr>
17.                 <tr>
18.                         <th>李四</th>
19.                         <th>28</th>
20.                         <th>男</th>
21.                 </tr>
22.         </tbody>
23. </table>

复制代码

 

2.1.3.7、select下拉标签

1. <select name='city'>
2.       <option value=1>北京</option>
3.       <option value=2>上海</option>
4.       <option value=3>广州</option>
5.       <option value=4>深圳</option>
6. </select>
8. <select name='city2' multiple='multiple'>
9.       <option value=1>北京</option>
10.       <option value=2>上海</option>
11.       <option value=3>广州</option>
12.       <option value=4>深圳</option>
13. </select>

复制代码

 

2.1.3.8、Input标签

input标签常用的属性范例 序号属性范例阐明1text单行输入文本2password暗码输入框（不表现明文暗码）3email邮箱输入框4date日期输入框5file文件选择框6radio单选框7checkbox多选框8submit提交按钮（须要共同form表单利用）

1. <!--示例-->
2. <div>
3.     <div>用户名：<input type='text' name='username' value='root' placeholder='请输入用户名'></div>
4.     <div>密         码：<input type='password' name='password' placeholder='请输入密码'></div>
5.     <div>邮         箱：<input type='email' name='email'  placeholder='请输入邮箱'></div>
6.     <div>头  像：<input type='file' name='headImg'></div>
7.     <div>日         期：<input type='date' name='date'></div>
8.     <div>
9.         性  别：
10.          <input type='radio' name='sex' value=1>男
11.          <input type='radio' name='sex' value=2>女
12.          <input type='radio' name='sex' value=3>未知
13.     </div>
14.     <div>
15.         兴趣爱好：
16.         <input type='checkbox' name='hobby' value=1>电影
17.         <input type='checkbox' name='hobby' value=2>游戏
18.         <input type='checkbox' name='hobby' value=3>跑步
19.     </div>
20.     <div><input type="submit" value="提交" /></div>
21. </div>

复制代码

 2.1.3.9、多行文本和form表单

1. <!--textarea多行文本-->
2. <textarea name="desc" rows="10" cols="25" placeholder="多行文本"></textarea>
4. <!--form表单-->
5.     <form action="./php/checklogin.php" method="get">
6.             <div style="color: chocolate; font-size: 36px; ;">欢迎登录</div>
7.             <hr>
8.             <div>
9.                 账号：<input type="text" name="username">
10.             </div>
11.             <div>
12.                 密码：<input type="password" name="password">
13.             </div>
14.             <div>
15.                 <br>
16.                 <input type="submit" name="login" value="登录">
17.                 <!-- <input type="submit" name="regiest" value="注册"> -->
18.             </div>
20.         </form>

复制代码

2.2、CSS 层叠样式表

CSS（Cascading Style Sheet，层叠样式表)用于计划HTML的风格和布局（可以用来指定标签内容的字体、颜色、巨细、配景等内容），让HTML内容显现得更加雅观，布局更加公道悦目。
CSS 指南

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps
2.2.1、CSS的引入方式 

CSS的引入方式 标签阐明style行内样式 优先级别最高link外部引用样式2.2.2、CSS行内样式的三种根本选择器 

CSS的三种根本选择器 序号选择器阐明（示例）1标签选择器 /* p 选择器表现页面中的全部段落都会被该规则所影响 */
p {
  /* color 属性用来界说文本颜色，这里为黄色 */
  color: yellow;
  /* background-color 属性用来界说元素的配景致，这里为玄色 */
  background-color: black;
}

1. <!--1、HTML文件中有h1标签-->
2. <h1>Coffeemilk 01</h1>

复制代码

1. <!--2、标签选择器的使用（直接获取标签名称，给h1标签设置样式）-->
2. h1{
3.     color: blue;
4.     background-color: yellow;
5.     border: 1px solid black;
6. }

复制代码

2id选择器

1. <!--1、html中给h1标签设置了id为p-->
2. <p id="p">这是一个段落</p>

复制代码

1. <!--2、id选择器的使用（通过获取p标签的id对该p标签设置样式）-->
2. #p{
3.     color:red;
4. }

复制代码

3class选择器

1. <!--1、给HTML文件的指定p标签设置class选择器为p2-->
2. <p class="p2">这是段落2</p>

复制代码

1. <!--2、class选择器的使用（通过获取p标签的class名字p2进行样式设置）-->
2. .p2{
3.     color:orange;
4. }

复制代码

1. <!DOCTYPE html>
2. <html lang="ZH-CN">
3.     <head>         
4.         <meta charset="UTF-8">
5.         <meta name="Keywords" content="搜索引擎关键字" />
6.         <meta name="Description" content="网站的简介和描述" />   
7.         <title>CSS 层叠样式表的三种基础选择器</title>  
9.         <!--CSS 层叠样式表的三种基础选择器的使用-->
10.         <style>
11.             h1{
12.                 color: blue;
13.                 background-color: yellow;
14.                 border: 1px solid black;
15.             }
17.             #p{
18.                 color:red;
19.             }
21.             .p2{
22.                 color:orange;
23.             }
25.         </style>
27.     </head>
29.     <body>
30.         CSS 层叠样式表的三种基础选择器<hr>
32.         <div class="divcss">
33.             <h1 id='01'>Coffeemilk 01</h1>
34.             <p id="p">这是一个段落</p>
35.             <p class="p2">这是段落2</p>
36.         </div>
37.     </body>
38. </html>

复制代码

2.2.3、CSS外部引用样式

1、新建一个名为test.css的样式文件，然后在这个样式文件中编写对应的样式：

2、在HTML文件的head标签中引用样式

1. <!DOCTYPE html>
2. <html lang="ZH-CN">
3.     <head>         
4.         <meta charset="UTF-8">
5.         <meta name="Keywords" content="搜索引擎关键字" />
6.         <meta name="Description" content="网站的简介和描述" />   
7.         <title>CSS 层叠样式表的三种基础选择器</title>  
9.         <!--CSS 层叠样式表的外部引用方式-->
10.         <link href="./css/test.css" rel="stylesheet" type="text/css"/>
12.     </head>
14.     <body>
15.         CSS 层叠样式表的三种基础选择器<hr>
17.         <div class="divcss">
18.             <h1 id='01'>Coffeemilk 01</h1>
19.             <p id="p">这是一个段落</p>
20.             <p class="p2">这是段落2</p>
21.         </div>
22.     </body>
23. </html>

复制代码

2.2.4、CSS的常用属性

CSS的常用属性 序号CSS属性属性阐明1颜色属性【color】 1、RGB颜色分为【红R、绿G、蓝B】三种颜色；
2、RGBA颜色分为【红R、绿G、蓝B、透明度A】；

1. /*示例*/
2. p{
3.     color:rgb(215, 168,201);
4.     color: rgba(253, 206, 255, 0.6); */
5. }

复制代码

2字体属性【font】

1. font-size:    字体大小
2. font-family:  字体类型
3. font-style:   字体样式normal正常；italic斜体； oblique倾斜的字体
4. font-weight:  字体加粗

复制代码

1. /*示例*/
2. p{
3.     font-size: 36px;   
4.     font-family:Arial, Helvetica, sans-serif;
5.     font-style: normal;
6.     font-weight: 100;
7. }

复制代码

3文本属性【text】

1. text-indent: 首行缩进：text-indent:30px;
2. text-overflow: 文本的溢出是否使用省略标记（...）。clip|ellipsis（显示省略标记）
3. white-space:nowrap; /* 强制在同一行内显示所有文本*/
4. overflow:hidden;white-space: nowrap;text-overflow:ellipsis;/*多行溢出显示省略号*/
5. display: -webkit-box;
6. -webkit-box-orient: vertical;
7. -webkit-line-clamp: 3;
8. overflow: hidden;
9. text-align: 文本的位置：left center right
10. text-decoration: 字体画线：none无、underline下画线，line-through贯穿线 a
11. text-shadow: 文本的文字是否有阴影及模糊效果
12. text-shadow:1px 1px rgba(0,0,0,0.3); /*阴影*/
13. letter-spacing: 文字或字母的间距
14. line-height:    行高
15. color:          字体颜色

复制代码

4边框属性【border】

1. border:宽度 样式 颜色;
2. border-color:边框颜色
3. border-style: 边框样式：solid实x，dotted点状线，dashed虚线
4. border-width:
5. border-left-color;
6. border-left-style;
7. border-left-width:
8. CSS3的样式
9. border-radius：圆角处理
10. box-shadow: 设置或检索对象阴影

复制代码

5配景属性【background】

1. background-color: 背景颜色
2. background-image: 背景图片
3. background-repeat：是否重复（平铺重复）
4. background-size: 背景大小，如 background-size:160px 180px;

复制代码

6内补白【padding】

1. padding： 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
2. padding-top： 检索或设置对象顶边的内部边距
3. padding-right： 检索或设置对象右边的内部边距
4. padding-bottom：检索或设置对象下边的内部边距
5. padding-left： 检索或设置对象左边的内部边距

复制代码

7外补白【margin】

1. margin： 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
2. margin-top： 检索或设置对象顶边的外延边距
3. margin-right： 检索或设置对象右边的外延边距
4. margin-bottom： 检索或设置对象下边的外延边距
5. margin-left： 检索或设置对象左边的外延边距

复制代码

2.2.5、CSS的标准盒子

W3C 保举标准：CSS 盒模子模块（第三版） - W3C中国万维网同盟（北航）总部

https://www.chinaw3c.org/archives/2861/
CSS Box Model Module Level 3

https://www.w3.org/TR/2023/REC-css-box-3-20230406/CSS盒模子科普_w3cschool盒子模子媒介盒子模子，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单位素同等看作是文本，它们并不是盒子。这个很好明白，比如说，一张图片里并不能放东西，它本身就是本身的内容。盒子中的地区一个盒子中重要的属性就5个：width、height、pad_来自CSS拾遗系列，w3cschool编程狮。

https://www.w3cschool.cn/css_series/css_series-6tza24q1.html
2.3、Javascript 控制脚本

        JavaScript 是一种脚本编程语言，它可以在HTML网页文件中编写代码实现复杂的功能（如：页面内容的交互、页面数据的实时更新、影音内容的播放控制等）。
2.3.1、JavaScript代码的三种引入方式

JavaScript代码的三种引入方式 序号引入方式名称示例1script标签内直接写代码 留意：该脚本内容须要放置在<body></body>中心

1. <!DOCTYPE html>
2. <html lang="ZH-CN">
3.     <head>         
4.         <meta charset="UTF-8">
5.         <meta name="Keywords" content="搜索引擎关键字" />
6.         <meta name="Description" content="网站的简介和描述" />   
7.         <title>JavaScript脚本示例</title>  
9.     </head>
11.     <body>
12.         JavaScript脚本示例<hr>
14.         <div class="divcss">
15.             <h1 id='01'>Coffeemilk 01</h1>
16.             <p id="p">这是一个段落</p>
17.             <p class="p2">这是段落2</p>
18.         </div>
20.     <script>
21.     alert("这是一个简单的测试弹窗");
22.     confirm("这是有一个弹窗可以确认取消");
23.     prompt("这是一个可以获取输入内容的弹窗");
25.     </script>
27.     </body>
28. </html>

复制代码

2外部脚本文件的引入

1. // 1、新建一个名为test.js的脚本文件并且添加上如下内容：
2. window.alert("这是一个简单的测试弹窗");
3. window.confirm("这是有一个弹窗可以确认取消");
4. window.prompt("这是一个可以获取输入内容的弹窗");

复制代码

1. <!--2、在HTML文件中引入外部的test.js脚本文件-->
2. <!DOCTYPE html>
3. <html lang="ZH-CN">
4.     <head>         
5.         <meta charset="UTF-8">
6.         <meta name="Keywords" content="搜索引擎关键字" />
7.         <meta name="Description" content="网站的简介和描述" />   
8.         <title>JavaScript脚本示例(外部脚本文件引入)</title>  
10.     </head>
12.     <body>
13.         JavaScript脚本示例（外部脚本文件引入）<hr>
15.         <div class="divcss">
16.             <h1 id='01'>Coffeemilk 01</h1>
17.             <p id="p">这是一个段落</p>
18.             <p class="p2">这是段落2</p>
19.         </div>
21.         <!--引入外部的test.js脚本文件-->>
22.         <script src="./js/test.js"> </script>
23.     </body>
24. </html>

复制代码

3外部脚本网址的引入

1. <!DOCTYPE html>
2. <html lang="ZH-CN">
3.     <head>         
4.         <meta charset="UTF-8">
5.         <meta name="Keywords" content="搜索引擎关键字" />
6.         <meta name="Description" content="网站的简介和描述" />   
7.         <title>JavaScript脚本示例(外部脚本网址文件引入)</title>  
9.     </head>
11.     <body>
12.         JavaScript脚本示例（外部脚本网址文件引入）<hr>
14.         <div class="divcss">
15.             <h1 id='01'>Coffeemilk 01</h1>
16.             <p id="p">这是一个段落</p>
17.             <p class="p2">这是段落2</p>
18.             <div>
19.                 <button id="btn">获取天气信息</button>
20.             </div>
21.         </div>
23.         <!--引入外部的test.js脚本文件-->
24.         <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
25.         <script>
26.             $('#btn').click(function(){
27.                 $.ajax({
28.                     url:'https://www.toutiao.com/stream/widget/local_weather/data/',
29.                     type:'get',
30.                     data:{'city':'上海'},
31.                     dataType:'json',
32.                     success:function(ret){
33.                         alert(JSON.stringify(ret))
34.                     },
35.                 });
36.             });
37.         </script>
39.     </body>
40. </html>

复制代码

2.3.2、JavaScript利用DOM对象

JavaScript利用DOM的对象的三种方法 序号获取方式示例1 根据Id获取
【document.getElementById】

1.         <script>
2.               var h1=document.getElementById('01');
3.               var tmpstr=h1.textContent;
4.               h1.onmouseover=function(){
5.                     h1.textContent="鼠标移入";
6.               };
8.               h1.onmouseout=function(){
9.                     h1.textContent=tmpstr;
10.               };
12.         </script>

复制代码

2 根据class属性获取（返回一个聚集）
【document.getElementsByClassName】

1.         <script>
2.               
3.             var p2Ele=document.getElementsByClassName("p2");
5.             for(var i=0;i<p2Ele.length;i++){
6.                 var obj=p2Ele[i];
7.                 obj.textContent+="---通过class获取的对象添加的内容---";
8.             }
10.         </script>

复制代码

3 根据标署名称获取（返回一个聚集）
【document.getElementsByTagName】

1.         <script>
3.             var pEle=document.getElementsByTagName('p');
4.             for(var i=0;i<pEle.length;i++){
5.                 var obj=pEle[i];
6.                 obj.textContent+="《JavaScript新添加的内容》";
7.             }
9.         </script>

复制代码

2.3.3、JavaScript的常用变乱

JavaScript学习指南
JavaScript 教程 | 菜鸟教程
JavaScript的常用变乱 序号变乱名称阐明1onclick鼠标点击网页对象时触发的变乱2ondblclick当用户双击某个对象时调用的变乱句柄3onfocus元素得到核心4onblur元素失去核心5onkeydown某个键盘按键被按下6onkeypress某个键盘按键被按下并松开7onkeyup某个键盘按键被松开8onload一个页面或一张图片加载完成9onmousedown鼠标按钮被按下10onmousemove鼠标移动11onmouseover鼠标移到某元素之上12onmouseout鼠标从某元素移开13onselect在文本框中的文本被选中时发生14onsubmit确认按钮被点击，利用的对象是form