ch01 网页开发基础

0. 学习目标

IDea

官网下载Idea https://www.jetbrains.com/idea/

中文语言包 https://plugins.jetbrains.com/plugin/13710-chinese-simplified-language-pack----/versions

免费教育许可证 https://www.jetbrains.com/zh-cn/community/education/#students

1 HTML基础

1.1 HTML简介

HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”。

HTML主要作用是通过HTML标签对网页中的文本(标题、段落、列表)、表格、表单、图片、声音(音频)、视频等内容进行描述。

HTML网页就是一个后缀名为".html" 或".htm"的文本文件。

https://www.duzhaojiang.cn/jeeWeb/ch02_h5/ch02.html

htmlDemo01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>HTML 4.01网页</title>
</head>
<body>
    <h2>HTML 4.01网页</h2>
    <hr>
   这是我的第一个HTML
    <hr>
    <p>柳帅 <script>document.write(document.lastModified); </script> 制作</p>
</body>
</html>

html5网页格式

<!DOCTYPE html>                      <!--为html设置文档类型声明-->
<html lang="zh-cmn-Hans">         <!--把所有内容放入html中-->
<head>
    <meta charset="UTF-8">
    <title> 网页标题 </title>
</head>
<body>
    网页内容
</body>
</html>
  1. html5文档类型: <!DOCTYPE html> ---没有指定具体的版本表示最新的html版本
  2. 网页语言区域: ---指网页内容的语言、区域，便于搜索引擎检索。zh-cmn-Hans指中文(普通话/国语)简体
  3. 字符集编码: ---指网页文件本身的文字编码，便于浏览器解析。指定utf-8编码是因为教学过程中要求同学们发布网页到新浪云，而老师推荐的字符编码是utf-8
  4. html5中html,head,body三个标签允许省略，W3C组织推荐写上这些标签便于浏览器解析。
  5. title网页标题，浏览器标题栏显示。

1.2 HTML标签概述

单标签、双标签和注释标签。

分类 语法格式 描述
单标签 <标签名 /> 单标签也被称为“空标签”，即没有标签内容。如
、
。 注意：在标签名与“/”之间有一个空格
双标签 <标签名>内容</标签名> 双标签也称体标签，是指由开始和结束两个标签符组成的标签。
注释标签 便于阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标签。

在HTML5的规范中，单标签(自闭合标签、空标签：)不需要加斜杠如
，但是兼容加斜杠的写法
；

在html中单标签有

。

2 常用的HTML标签

2.1 标题h1~6、水平线hr、段落p、小段span和换行br标签

htmlDemo02_ls.html

<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf8">
    <title>h标题、hr水平线、p段落、span小段、br换行</title>
</head>
<body>
    <h2>h标题、hr水平线、p段落、span小段、br换行</h2>
    <hr>
   <p>使用HTML制作网页时，
   <span>通过br标签可以实现强迫换行效果、小段span，/span结束处不会换行，此次后面有多个空白字符(英文空格、tab、换行和回车)

       (<mark>此处前面显示了1个空格</mark>)小段span，/span结束处不会换行，小段span，/span结束处不会换行，小段span，/span结束处不会换行，小段span，/span结束处不会换行，</span>，但在p或span中遇到&lt;br><br>就实现了强制换行效果。
   段落/p结束标签会自动换行；在p和span标签中多个空白字符(空格、tab、回车、换行)会自动替换成1个空格。<span>小段span中遇到&lt;br><br>也会强制换行。</span></p>
    <p>我们的共产党和共产党所领导的八路军、新四军，是革命的队伍。我们这个队伍完全是为着解放人民的，是彻底地为人民的利益工作的。张思德同志就是我们这个队伍中的一个同志。</p>
    <p>人总是要死的，但死的意义有不同。中国古时候有个文学家叫做司马迁的说过：“人固有一死，或重于泰山，或轻于鸿毛。”为人民利益而死，就比泰山还重；替法西斯卖力，替剥削人民和压迫人民的人去死，就比鸿毛还轻。张思德同志是为人民利益而死的，他的死是比泰山还要重的。</p>
    <p>因为我们是为人民服务的，所以，我们如果有缺点，就不怕别人批评指出。不管是什么人，谁向我们指出都行。只要你说得对，我们就改正。你说的办法对人民有好处，我们就照你的办。“精兵简政”这一条意见，就是党外人士李鼎铭先生提出来的；他提得好，对人民有好处，我们就采用了。只要我们为人民的利益坚持好的，为人民的利益改正错的，我们这个队伍就一定会兴旺起来。</p>


    <p>白求恩同志是加拿大共产党员，五十多岁了，为了帮助中国的抗日战争，受加拿大共产党和美国共产党的派遣，不远万里，来到中国。去年春上到延安，后来到五台山工作，不幸以身殉职。一个外国人，毫无利己的动机，把中国人民的解放事业当作他自己的事业，这是什么精神？这是国际主义的精神，这是共产主义的精神，每一个中国共产党员都要学习这种精神。列宁主义认为：资本主义国家的无产阶级要拥护殖民地半殖民地人民的解放斗争，殖民地半殖民地的无产阶级要拥护资本主义国家的无产阶级的解放斗争，世界革命才能胜利。白求恩同志是实践了这一条列宁主义路线的。我们中国共产党员也要实践这一条路线。我们要和一切资本主义国家的无产阶级联合起来，要和日本的、英国的、美国的、德国的、意大利的以及一切资本主义国家的无产阶级联合起来，才能打倒帝国主义，解放我们的民族和人民，解放世界的民族和人民。这就是我们的国际主义，这就是我们用以反对狭隘民族主义和狭隘爱国主义的国际主义。</p>
    <p><mark>注：上面的显示默认格式源自于西文格式: 段落首行顶格书写、段落之间有行距；不是中文的首行缩格2格，段落之间没有额外的行距。</mark></p>
</body>
</html>

2.2 文本样式font->style标签

htmlDemo03_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf8">
    <title>过时的<font>标签、html5中不提倡的标签<br /><hr /></title>
</head>
<body>
    <h2>过时的&lt;font>标签、html5中不提倡的标签&lt;br />&lt;hr /></h2>
    <hr>
    我是默认样式的文本<br />
    <font face="微软雅黑" size="7" color="green"><br />
    我是7号绿色文本，我的字体是微软雅黑哦</font>

    <h2>html5中提倡的样式和换行标签&lt;br>、水平线标签&lt;hr></h2>
    <hr>
    <p>我是默认样式的文本<br />
    <span style="font-family: 微软雅黑; font-size: 20px; color:green"><br>
        我是20px绿色文本，我的字体是微软雅黑哦</span></p>

</body>
</html>

2.3 表格标签table>caption+tr>th+td

注意：<table>、<tr>和<td>是创建表格的基本标签，缺一不可。

htmlDemo04_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf8">
    <title>htmlDemo04 表格</title>
</head>
<body>
<h2>表格 table tr th td</h2>
<hr>
<table style="border:solid 1px green; ">
     <tr>
          <th>姓名</th>
          <th>语文</th>
          <th>数学</th>
          <th>英语</th>
     </tr>
     <tr>
          <td>柳帅</td>
          <td>95</td>
          <td>80</td>
          <td>90</td>
     </tr>
     <tr>
          <td>李同学</td>
          <td>92</td>
          <td>81</td>
          <td>92</td>
     </tr>
</table>
<table border="1px" cellspacing="2">
     <caption>学生信息表</caption>
     <!-- caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 -->
     <!-- <thead> <tbody> <tfoot> 无论前后顺序如何改变， <thead> 内的元素总是在表的最上面， <tfoot> 总在表的最下面-->
     <thead>
     <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
     </tr>
     </thead>
     <tbody>
     <tr>
          <td>马志鑫</td>
          <td>男</td>
          <td>21</td>
     </tr>
     <tr>
          <td>马雷</td>
          <td>男</td>
          <td>22</td>
     </tr>
     </tbody>
     <tfoot>
     <tr>
          <td colspan="2">人数合计</td>
          <td>2</td>
     </tr>
     </tfoot>
</table>

<table border="1px" cellspacing="0">
     <caption>成绩表</caption>
     <tr>
          <th>姓名</th>
          <th>课程</th>
          <th>分数</th>
     </tr>
     <tr>
          <td rowspan="2">马雷</td>
          <td>语文</td>
          <td>68</td>
     </tr>
     <tr>
          <td>数学</td>
          <td>89</td>
     </tr>
     <tr>
          <td rowspan="2">张静</td>
          <td>语文</td>
          <td>78</td>
     </tr>
     <tr>
          <td>数学</td>
          <td>99</td>
     </tr>
</table>
</body>
</html>

2.4 表单标签 fieldset>legend>form>input

表单的3个部分:

<!-- form标签基本语法 get明信片、post信封-->
<form action="url地址" method="提交方式" name="表单名称">
     各种表单控件 
</form>
<!-- input表单控件基本语法 -->
<input type="控件类型" id="ID值" name="关键字名称" value="初值或默认值" size="显示宽度">
<label for="控件ID值">提示信息</label>
<!-- textarea表单控件基本语法 -->
<label for="控件ID值">提示信息</label>
<textarea cols="每行中的字符数" rows="显示的行数" id="ID值">
     文本内容
 </textarea>

htmlDemo05_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf8">
    <title>表单：注册新用户</title>
</head>
<body>
<h2>表单：注册新用户  -- 表格定位</h2>
<hr>
<fieldset>
<legend>注册新用户</legend>
    <!-- 表单数据的提交方式为POST -->
    <form action="#" method="post">
        <table cellpadding="2" align="center">
            <tr>
                <td style="text-align: right">用户名:</td>
                <td>
                    <!-- 1.文本输入框控件 -->
                    <input type="text" name="username">
                </td>
            </tr>
            <tr>
                <td align="right">密码:</td>
                <!-- 2.密码输入框控件 -->
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td align="right">性别:</td>
                <td>
                    <!-- 3.单选输入框控件，由于无法输入value, 所以预先定义好 -->
                    <input type="radio" name="gender" value="男" id="male"> <label for="male">男</label>
                    <input type="radio" name="gender" value="女" id="female" > 女
                </td>
            </tr>
            <tr>
                <td align="right">兴趣:</td>
               <td>
               <!-- 4.复选框控件 -->
               <input type="checkbox" name="interest" value="film" id="film"> <label for="film">看电影</label>
               <input type="checkbox" name="interest" value="code"> 敲代码
               <input type="checkbox" name="interest" value="game"> 玩游戏
               </td>
            </tr>
            <tr>
                <td align="right">头像:</td>
                <td>
                   <!-- 5.文件上传控件 -->
                    <input type="file" name="photo">
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                    <!-- 6.提交按钮控件 -->
                    <input type="submit" value="注册">
                    <!-- 7.重置按钮控件，单击后会清空当前form -->
                    <input type="reset" value="重填">
                </td>
            </tr>
        </table>
    </form>
   </fieldset>
</body>
</html>

htmlDemo06_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf8">
    <title>htmlDemo06 表单</title>
</head>
<body>
    <h2>表单输入：文本区 textarea </h2>
    <hr>
    <form action="#" method="post">
        <label for="ta">评论：</label>
        <textarea cols="60" rows="5" id="ta">
         评论时，请注意文明用语。
         </textarea>
        <br> <br> 
         <input type="submit" value="提交">
    </form>
</body>
</html>

2.5 列表标签 ul|ol|dl>li

htmlDemo07_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf8">
    <title>无序列表 ul>li、有序列表 ol>li</title>
</head>
<body>
    <h2>无序列表 ul>li、有序列表 ol>li</h2>
    <hr>
    <font size="5">传智播客学科</font><br />
    <ul>
        <li>动态web前端网页--默认样式</li>
        <!-- 指定type属性值 ,disc为默认值-->
        <li style="list-style-type: disc">JAVA--实心圆 </li>
        <li style="list-style-type: square">PHP--实心方块</li>
        <li style="list-style-type: circle">.NET-- 空心圆 </li>
        <li style="list-style-type: none">Vue--无样式 </li>
    </ul>

    <h3>动态web服务器端技术</h3>
    <ol>
        <li style="list-style-type: decimal">Java -- 阿拉伯数字</li>
        <li style="list-style-type: lower-greek">nodejs -- 小写希腊字母</li>
        <li style="list-style-type: lower-alpha">php -- 小写英文字母</li>
        <li style="list-style-type: upper-roman">c# -- 大写罗马数字</li>
        <li style="list-style-type: cjk-ideographic">python -- 中日韩cjk汉字</li>
    </ol>
</body>
</html>

htmlDemo08_ls.html

<!DOCTYPE>
<html lang="zh">
<head>
    <meta charset="utf8">
    <title>htmlDemo08 定义列表</title>
</head>
<body>
    <h3>定义列表 dl>dt>dd</h3>
    <hr>
    <dl>
    <dt>红色</dt>
    <dd>是光谱的三原色和心理四色之一</dd>
    <dd>代表着吉祥、喜庆、火热、幸福、豪放、斗志、革命、轰轰烈烈、激情澎湃等</dd>
    <dt>绿色</dt>
    <dd>是自然界中常见的颜色</dd>
    <dd>绿色有无公害，健康的意思</dd>
    </dl>
</body>
</html>

2.6 超链接标签 a

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

htmlDemo09_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf8">
    <title>超链接</title>
</head>
<body>
<h3>超链接 a target="_blank | _self"</h3>
<hr>
在新窗口打开：
  <a href="http://www.itcast.cn/" target="_blank">传智播客</a><br>
 在原窗口打开：
  <a href="http://www.baidu.com/" target="_self">百度</a><br>
  <a href="http://www.duzhaojiang.cn/" target="_self"><img src="dzj.jpg" title="访问柳帅的网站" alt="应该是柳帅的照片"></a><br>
</body>
</html>

2.7 图像标签 img

<img src="图像URL" alt="没有装载图片显示的文字" title="鼠标移动上去显示的提示文字">

htmlDemo10_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf8">
    <title>图片</title>
</head>
<body>
    <h2>图片</h2>
    <hr>
    原先尺寸图片：<img src="itcast.png" width="195" height="72" style="border: 1px"  alt="itcast"><br>
    变形尺寸图片：<img src="itcast.png" width="160px" height="130px" border="0" alt="itcast"><br>
    椭圆形照片：<img src="dzj.jpg" style="border: solid 4px greenyellow; border-radius: 50%"  alt="柳帅的照片"><br>
    alt提示的文字：<img src="xxx.jpg" alt="这个图片不存在">
</body>
</html>

3 CSS技术

3.1 初识CSS

CSS是Cascading Style Sheet的缩写，译作层叠样式表单，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。在实际开发中，CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;…}

CSS的长度单位

CSS的长度单位，用来设置CSS长度的属性有width，margin，padding，font-size，border-width 等。有两种类型的长度单位：相对和绝对。

CSS中颜色的取值

3.2 CSS样式的引用方式

CSS样式4种的引用方式，分别为行内式、内嵌式、链入式和导入式

<!-- 行内式 没有做到结构域样式分离，所以不推荐使用。-->
<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</ 标签名>
<h1 style="font-size:20px; color:blue;">一级标题的字体大小和颜色</h1>

<!-- 内嵌式 <style>标签一般位于<head>标签中的<title>标签之后。-->
<head>
   <style type="text/css">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
   </style>
</head>

内嵌式CSS样式

cssDemo01_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>使用CSS内嵌式</title>
    <style>
        /*定义标题标记居中对齐*/
        h2 {
            text-align: center;
        }

        /*定义div标记样式*/
        div {
            border: 1px solid #CCC;
            width: 300px;
            height: 80px;
            color: purple;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>内嵌式CSS样式</h2>
    <hr>
    <div>
        使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，
        title标记之后。
    </div>
</body>
</html>

外链式CSS样式

<head>
      <link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

style.css

@charset "UTF-8";
/*定义标题标签居中对齐*/
h2 {
    text-align: center;
    font-family: 楷体, monospace ;
}

/*定义div标签样式*/
div {
    border: 1px solid #CCC;
    width: 300px;
    height: 80px;
    color: purple;
    text-align: center;
}

cssDemo02_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>使用CSS外链式</title>
    <link href="style.css" rel="stylesheet">
 </head>
 <body>
     <h2>外链式CSS样式</h2>
    <div>
        外链式也叫链入式，外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中。
    </div>
 </body>
</html>

3.3 CSS选择器和常用属性

/* 标签选择器 */
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

/* 类选择器 */
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

/* id选择器 这个用的较少 因为id唯一、只能为单一一个标签定义样式，可以标签行内定义样式即可。 */
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

/* 通用选择器 匹配页面中所有的元素*/
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

cssDemo03_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>类选择器、id选择器的使用</title>
    <style>
        /* 1.类选择器的定义*/
        .red {    color: red;    }
        .green {color: green;}
        .font18 {font-size: 18px;}
        /* 2.id选择器的定义*/
        #bold {    font-weight: bold;}
        #font24 {font-size: 24px;}
    </style>
</head>
<body>
    <h1>类选择器、id选择器的使用</h1>
    <hr>
    <!--类选择器的使用-->
    <h2 class="red">标题一：class="red"，设置文字为红色。</h2>
    <p class="green font18">
        段落一: class="green font18",设置文字为绿色，字号为18px。
     </p>
    <p class="red font18">
        段落二: class="red font18",设置文字为红色，字号为18px。
     </p>
    <!--id选择器的使用-->
    <p id="bold">段落1：id="bold"，设置粗体文字。</p>
    <p id="font24">段落2：id="font24"，设置字号为24px。</p>
    <p id="font24">段落3：id="font24"，设置字号为24px。<span class="red">此次小错！段落2、段落3的id 重发--不唯一。id属性要求唯一！</span></p>
    <p id="bold font24">段落4：id="bold font24"，同时设置粗体和字号24px。<span class="red">此次大错！----显示效果既没有粗体、又没有字号24px。id="bold font24"----id属性=bold 且|或=font24是错误的！ 因为：id属性要求唯一！ </span></p>
</body>
</html>

CSS常用属性

属性名称 功能描述
margin 用于指定对象的外边距，也就是对象与对象之间的距离。该属性可指定1~4个属性值，各属性值以空格分隔
padding 用于指定对象的内边距，也就是对象的内容与对象边框之间的距离。该属性可指定1~4个属性值，各属性值以空格分隔
background 用于设置背景颜色、背景图片、背景图片的排列方式、是否固定背景图片和背景图片的位置。该属性可指定多个属性值，各属性值以空格分隔，没有先后顺序
font-family 规定元素的字体系列
border 用于设置边框的宽度、边框的样式和边框的颜色。该属性可以指定多个属性值，各属性值以空格分隔，没有先后顺序
font 用于设置字体样式、小型的大写字体、字体粗细、文字的大小、行高和文字的字体
width 用于指定对象的宽度
height 用于指定对象的高度
line-height 用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高
color 用于指定文本的颜色
text-align 用于指定文本的对齐方式：left左、center中、right右、justify两端对齐
text-decoration 用于指定文本的显示样式：line-through删除线、overline上划线、underline下划线、blink闪烁，none无效果
vertical-align 用于设置元素的垂直对齐方式：top顶端、middle中间、bottom底部
display 用于指定对象的显示形式：block块、inline行内、none 隐藏

4 JavaScript基础

4.1 JavaScript概述

JavaScript是Web中一种功能强大的脚本语言，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面----浏览器客户端编程；也可基于Node.js技术进行服务器端编程。

JavaScript主要功能(js全栈工程师)

  1. 嵌入动态文本于HTML页面。
  2. 对浏览器事件做出响应。
  3. 读写HTML元素。
  4. 在数据被提交到服务器之前验证数据。
  5. 检测访客的浏览器信息。
  6. 控制cookies，包括创建和修改等。
  7. 基于Node.js技术进行服务器端编程。

全栈工程师Full Stack engineer：浏览器端编程+服务器端编程

ECMAScript、JavaScript、node.js、TypeScript的关系和区别

ECMAScript：

JavaScript：

nodeJS：

TypeScript：

(1) JavaScript的组成

JavaScript=ECMAScript+DOM+BOM

(2) JavaScript的引入方式：

js行内引入方式

JavaScriptDemo01_ls.html，一般情况下不推荐使用行内式。

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <title> JavaScript行内式</title>
</head>
<body>
   <h2>JavaScript行内式</h2>
   <hr>
   <input type="button" value="点我(行内式)" onclick="alert('行内式')">
   <hr>
   <p>柳帅 <script>document.write(document.lastModified); </script>--<mark>这里也是js的行内引入方式</mark> 制作</p>
</body>
</html>
js内嵌引入方式

JavaScriptDemo02_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>内嵌式</title>
    <script>
        function fun2() {
            alert('内嵌式')
        }
    </script>
</head>
<body>
    <h2>JavaScript内嵌式</h2>
    <hr>
    <input type="button" value="点我(内嵌式)" onclick="fun2()">
    <hr>
    <p>柳帅 <script>document.write(document.lastModified); </script> 制作</p>
</body>
</html>
js外链引入方式

jsDemo_ls.js，如果JavaScript代码很多，通常都会使用外链式。

function fun1() {
    alert('外链式');
}

JavaScriptDemo03_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>外链式</title>
    <!-- 指定jsDemo.js文件的编码格式为utf8 省略type="javascript"即默认脚本类型是javascript-->
    <script src="jsDemo_ls.js" charset="UTF-8"></script>
</head>
<body>
    <h2>JavaScript外链式</h2>
    <hr>
    <input type="button" value="点我(外链式)" onclick="fun1()">
    <hr>
    <p>柳帅 <script>document.write(document.lastModified); </script> 制作</p>
</body>
</html>

(3) JavaScript的数据类型

类型 含义 说明
Number 数值型 数值型数据不区分整型和浮点型，数值型数据不要用引号括起来
String 字符串类型 字符串是用单引号或双引号括起来的一个或多个字符
Boolean 布尔类型 只有true或false两个值
Object 对象类型 一组数据和功能的键值对集合
Null 空类型 没有任何值
Undefined 未定义类型 指变量被创建，但未赋值时所具有的值

(4) JavaScript的变量和关键字

在JavaScript中，使佣关键字var声明变量，由于JavaScript是一 种弱类型语言，所以在声明变量时， 不需要指定变量的类型，变量的类型将根据变量的赋值确定。

<script>
    var age = 21;
    let 年龄 = 59;
    var uname = "山西传媒学院";
    let 单位名称 = "信息工程学院";
</script>

注意:变量的命名必须遵循命名规则，变量名可以由字母、汉字、下划线( )、元符号 ($) 组成,不能有空格、加号、减号等符号,不能使用JavaScript的关键字。

img

图1 非ASCII标识符--an identifier中的非ASCII字符

(5) js运算符

分类 运算符
算术 +加、-减、*乘、/除、++自增、--自减
比较 <小于、>大于、<=小于等于、>=大于等于、===等于、!= =不等于
逻辑 &&逻辑与、\ \
赋值 =赋值，+=加赋值，-=减赋值，*=乘赋值，/=除赋值，%=模赋值
条件 条件表达式？表达式1：表达式2
优先级 运算符 说明
1 .、[]、 () 字段访问、数组索引、函数调用和表达式分组
2 ++、--、-、~、!、delete、new、typeof、void 一元运算符、删除对象的某个属性、对象创建、返回数据类型、未定义的值
3 *、/、% 相乘、相除、求余数
4 +、- 相加、相减、字符串串联
5 <<、>>、>>> 左位移、右位移、无符号右移
6 <、<=、>、>=、instanceof 小于、小于或等于、大于、大于或等于、是否为特定类的实例
7 ==、!=、===、!== 相等、不相等、全等，不全等
8 & 按位“与”
9 ^ 按位“异或”
10 \
11 && 短路与(逻辑“与”)
12 \ \
13 ? : 条件运算符
14 =、+=、-=、*=、/=、%=、&=、\ =、^=、<、<=、>、>=、>>=
15 , 多个计算

(6) 条件语句if

//单向判断语句
if（执行条件）{
    执行语句  
}

//双向判断语句
if（执行条件1）{
   语句1   
}
else {
   语句2
}

//多向判断语句
if（执行条件1）{
     执行语句1   
}
else if（执行条件2）{
     执行语句2
}
else if（执行条件3）{
     执行语句3
}
...

4.2 DOM相关知识

DOM是Document Object Model（文档对象模型）的简称，是W3C组织推荐的处理可扩展标志语言的标准编程接口，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。

W3C中将DOM标准分为3个不同的部分：核心DOM、XML DOM和HTML DOM。其中，核心DOM是针对任何结构化文档的标准模型，XML DOM是针对XML文档的标准模型，而HTML DOM是针对HTML文档的标准模型。

img

图2 HTML DOM文档对象模型

DOM节点关系

(1)节点的访问

父节点对象 = 子节点对象.parentNode;

Node对象的常用属性

属性 类型 描述
parentNode Node 返回节点的父节点，没有父节点时为null
childNodes NodeList 返回节点到子节点的节点列表
firstChild Node 返回节点的首个子节点，没有则为null
lastChild Node 返回节点的最后一个子节点，没有则为null

(2) 获取文档中的指定元素

// 通过元素的id属性获取元素
document.getElementById("Id名");
//通过元素的name属性获取元素
document.getElementsByName("name属性")[0];

4.3 BOM相关知识

浏览器对象模型(Brower Object Model，BOM) 提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是Window。Window下又提供了很多对象，这些对象用于访问浏览器，被称为浏览器对象。Window各内置对象之间按照某种层次组织起来的模型统称为浏览器对象模型。

img

图3 BOM浏览器对象模型

BOM的核心对象(---根对象)是Window，其他的对象称为Window的子对象，子对象是以属性的方式添加到Window对象中的。

window.onload 加载事件

在网页开发中通过window调用onload实现窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS 文件等）完全加载完成会触发该事件，调用该事件对应的事件处理函数。onload页面加载事件有两种注册方式:

//方式1
window.onload = function () {
    ...
};

//方式2
window. addEventListener ('load', function () {
    ...
});

注意：

document.DOMContentLoaded加载事件

document.DOMContentLoaded加载事件会在DOM加载完成时触发。这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载，因此，该事件的优点在于执行的时机更快，适用于页面中图片很多的情况。当页面图片很多时，从用户访问到onload事件触发可能需要较长的时间，交互效果就不能实现，这样会影响到用户的体验效果，在这时使用document.DOMContentLoaded事件更为合适，只要DOM元素加载完即可执行。需要注意的是，document.DOMContentLoaded事件有兼容性问题，需要IE9以上版本才支持。

4.4 JavaScript的使用

(1) 函数的定义及调用

function 函数名(parameter1,parameter2,…){
    语句s;
    return 表达式;
}

在JavaScript中，由于函数名区分大小写，所以在调用函数时：

(2) 事件处理

2) 常用事件

1）点击事件：

2）焦点事件

3）加载事件：

4）鼠标事件：

5）键盘事件：

6）选择和改变事件

7）表单事件：

(3) 常用对象

window对象的属性和方法
类型 名称 说明
属性 document、history、location、navigator、screen 返回相应对象的引用。例如document属性返回document对象的引用
parent、self、top 分别返回父窗口、当前窗口和最顶层窗口的对象引用
innerWidth、innerHeight 分别返回窗口文档显示区域的宽度和高度
outerWidth、outerHeight 分别返回窗口的外部宽度和高度
方法 open()、close() 打开或关闭浏览器窗口
alert()、confirm()、prompt() 分别表示弹出警告框、确认框、用户输入框
setTimeout()、clearTimeout() 设置或清除普通定时器
Data对象

Date对象是一个有关日期和时间的对象，它具有动态性，必须使用new关键字创建一个实例才能使用。

var Mydate=new Date();
// 返回当日的日期和时间
// 以下方式，传递字符串，mm的值域为01～12
var Mydate1=new Date("yyyy/mm/dd hh:mm:ss");
var Mydate2=new Date("yyyy/mm/dd");
// 以下方式，传递整型，mth的值域为0～11
var Mydate3=new Date(yyyy,mth,dd,hh,mm,ss);
var Mydate4=new Date(yyyy,mth,dd);
// ms是需要创建的时间和GMT时间1970年1月1日之间相差的毫秒数timestamp--时间戳；
var Mydate5=new Date(ms); 
<script>
 //1.当前系统区域设置格式(toLocaleDateString和toLocaleTimeString)
 console.info((new Date()).toLocaleDateString() + " " + (new Date()).toLocaleTimeString());
 //2.普通字符串(toDateString和toTimeString)
 console.info((new Date()).toDateString() + " " + (new Date()).toTimeString());
 //3.格林威治标准时间(toGMTString)
 console.info((new Date()).toGMTString());
 //4.全球标准时间(toUTCString)
 console.info((new Date()).toUTCString());
 //5.Date对象字符串(toString)
 console.info((new Date()).toString());

 console.info((new Date(2009,1,1)).toLocaleDateString() + " " + (new Date(2009,1,1)).toLocaleTimeString());
 console.info((new Date("2009/1/1 13:01:02")).toLocaleDateString() + " " + (new Date("2009/1/1 13:01:02")).toLocaleTimeString());
</script>
Data对象的常用方法
获取方法 说明 设置方法 说明
getFullYear() 返回4位数年份 setFullYear() 设置年用4位数的年份
getMonth() 返回月份值（0~11） setMonth() 设置月份值（0~11）
getDate() 返回日期值（1~31） setDate() 设置日期值（1~31）
getDay() 返回值星期（0~6） setDay() 设置值星期（0~6）
getHours() 返回小时值（0~23） setHours() 设置小时值（0~23）
getMinutes() 返回分钟值（0~59） setMinutes() 设置分钟值（0~59）
getSeconds() 返回秒数值（0~59） setSeconds() 设置秒数值（0~59）
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数 setTime() 使用毫秒形式设置Date对象
String对象处理字符串的属性和方法
类型 名称 说明
属性 length 返回字符串中字符的个数。注：一个汉字也是一个字符
方法 indexOf(str[,startIndex]) 从前向后检索字符串
lastIndexOf(search[,startIndex]) 从后向前搜索字符串
substr(startIndex[, length]) 返回从起始索引号提取字符串中指定数目的字符
substring( startIndex [,endIndex]) 返回字符串中两个指定的索引号之间的字符
split(separator [,limitInteger]) 把字符串分割为字符串数组
search(substr) 检索字符串中指定子字符串或与正则表达式相匹配的值
replace(substr,replacement)
toLowerCase() 把字符串转换为小写
toUpperCase() 把字符串转换为大写
localeCompare() 用本地特定的顺序来比较两个字符串

5 Bootstrap框架基础

5.1 Bootstrap框架简介

Bootstrap是由Twitter公司的设计师Mark Otto（马克奥托）和Jacob Thornton（雅各布·桑顿）合作开发的开源框架，该框架基于HTML、CSS和JavaScript语言编写，于2011年8月在GitHub上发布，一经推出就颇受欢迎。Bootstrap具有简单、灵活的特性，能够帮助开发者快速搭建前端页面，常用于开发响应式布局和移动设备优先的Web项目。

Bootstrap是一款用于网页开发的框架，它拥有样式库、组件和插件，使用者需要按照框架所规定的某种规范进行开发。

Bootstrap的特点

响应式设计、移动设备优先、主流浏览器支持、低成本易上手、CSS预编译（Sass：CSS扩展语言）、框架成熟、丰富的组件库

5.2 Bootstrap框架的下载和使用

https://www.bootcss.com/

Bootstrap提供了3种下载方式供开发者进行选择:

6.Bootstrap框架的常用组件

https://v3.bootcss.com/components/

https://www.runoob.com/bootstrap/bootstrap-tutorial.html

6.1 bootstrap按钮

bootstrap01_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>bootstrap 按钮 botton</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <h2>bootstrap 按钮 botton</h2>
  <hr>
  <button type="button" class="btn btn-primary">主按钮</button>
  <button type="button" class="btn btn-danger">危险按钮</button>
  <button type="button" class="btn btn-success">成功按钮</button>
  <button type="button" class="btn btn-info">信息按钮</button>
  <button type="button" class="btn btn-warning">警告按钮</button>
</body>
</html>

6.2 bootstrap导航

bootstrap02_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <style>
   button {
     width: 100px;
   }
  </style>
  <title>bootstrap 导航 </title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <h3>bootstrap 导航 ul-li-a nav,-item,-link</h3>
  <hr>
  <!-- 导航 -->
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">首页</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">简介</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">详情</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1"
          aria-disabled="true">联系电话</a>
    </li>
  </ul>
</body>
</html>

6.3 bootstrap面包屑导航

bootstrap03_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>bootstrap 面包屑导航</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <h2>bootstrap 面包屑导航</h2>
  <h3>nav aria-label="breadcrumb">ol class="breadcrumb">li class="breadcrumb-item">a </h3>
  <hr>
  <!-- 面包屑导航 -->
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">首页</a></li>
      <li class="breadcrumb-item"><a href="#">公司简介</a></li>
      <li class="breadcrumb-item"><a href="#">领导介绍</a></li>
    </ol>
  </nav>
</body>
</html>

6.4 bootstrap分页

bootstrap04_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>bootstrap 分页</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <h2>bootstrap 分页 ul>li>a class=pagination>page-item>page-link</h2>
  <hr>
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">7</a></li>
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>

  <hr>
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">上一页</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">下一页</span>
      </a>
    </li>
  </ul>
</body>
</html>

6.5 bootstrap列表

bootstrap05_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>列表组</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<h2>bootstrap 列表组 ul>li list-grou>list-group-item</h2>
<hr>
  <!-- 列表组 -->
  <ul class="list-group">
    <li class="list-group-item active">列表1</li>
    <li class="list-group-item btn-success">列表2</li>
    <li class="list-group-item btn-danger">列表3</li>
    <li class="list-group-item disabled">列表4</li>
    <li class="list-group-item">列表5</li>
    <li class="list-group-item"><a class="page-link" href="#">列表6</a></li>
    <li class="list-group-item"><a class="page-link" href="#">列表7</a></li>
    <li class="list-group-item"><a class="page-link" href="#">列表8</a></li>
  </ul>
</body>
</html>

6.6 bootstrap表单

bootstrap06_ls.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>bootstrap 表单</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <h3>bootstrap 表单 form class="form-horizontal">div class="form-group">label+input class="form-control"</h3>
  <hr>
  <!-- 表单 -->
  <form action="#" role="form">
    <div class="form-group">
      <label for="User">用户名</label>
      <input type="text" class="form-control" id="User">
      <label for="Password">密码</label>
      <input type="password" class="form-control" id="Password">
      <label for="Email1">邮箱地址</label>
      <input type="email" class="form-control" id="Email1">
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>

  <hr>
  <form class="form-horizontal">
    <div class="form-group">
      <label for="name" class="col-sm-2 control-label">姓名</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name" placeholder="请输入姓名">
      </div>
    </div>
    <div class="form-group">
      <label for="address" class="col-sm-2 control-label">住址</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="address" placeholder="请输入住址">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox">请记住我
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-success btn-lg">登录</button>
      </div>
    </div>
  </form>

</body>
</html>

7. 任务：蛋糕商城注册页面

第1部分为导航内容，有首页、商品分类、热销、新品、注册、登录、搜索及购物车等信息；

第2部分为注册内容，有标题、注册表单、提交按钮等信息；

第3部分为友情链接与作者署名内容。

image-20240323175439836

图4 蛋糕商城注册页面 image-20240323175439837图5 [注册页面]文件组成

header.html

<meta charset="UTF-8">
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <!--navbar-header-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/index" >首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle " data-toggle="dropdown">商品分类<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-2">
                            <li>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h4>商品分类</h4>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#" >热销</a></li>
                    <li><a href="#" >新品</a></li>
                    <li><a href="#" class="active">注册</a></li>
                    <li><a href="#" >登录</a></li>
                </ul>
                <!--/.navbar-collapse-->
            </div>
            <!--//navbar-header-->
        </nav>
        <div class="header-info">
            <div class="header-right search-box">
                <a href="javascript:;"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
                <div class="search">
                    <form class="navbar-form" action="/goods_search">
                        <input type="text" class="form-control" name="keyword">
                        <button type="submit" class="btn btn-default" aria-label="Left Align">搜索</button>
                    </form>
                </div>
            </div>
            <div class="header-right cart">
                <a href="goods_cart.jsp">
                    <span class="glyphicon glyphicon-shopping-cart " aria-hidden="true"><span class="card_num"></span></span>
                </a>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<!--//header-->

footer.html

<!--footer-->
<meta charset="UTF-8">
<div class="footer">
    <div class="container">
        <div class="text-center">
            <p>柳帅 ls.icu © 版权所有</p>
        </div>
    </div>
</div>
<!--//footer-->

user_register.html

<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--    Centos Apache下开启SSI配置，使html支持include包含
    ======================================
    在/etc/httpd/conf/httpd.conf文件中 修改3处 ：
    Options Indexes FollowSymLinks  修改为 Options Indexes FollowSymLinks Includes
    AddType text/html .shtml 修改为  AddType text/html .shtml .html
    AddOutputFilter INCLUDES .shtml 修改为  AddOutputFilter INCLUDES .shtml .html
    重启Apache systemctl restart httpd-->

    <!--#include file='header.html'-->
    <!--account-->
    <div class="account">
        <div class="container">
            <div class="register">
                <form action="/user_rigister" method="post">
                    <div class="register-top-grid">
                        <h3>注册新用户</h3>
                        <div class="input">
                            <span>用户名 <label style="color:red;">*</label></span>
                            <input type="text" name="username" placeholder="请输入用户名" required="required">
                        </div>
                        <div class="input">
                            <span>邮箱 <label style="color:red;">*</label></span>
                            <input type="text" name="email" placeholder="请输入邮箱" required="required">
                        </div>
                        <div class="input">
                            <span>密码 <label style="color:red;">*</label></span>
                            <input type="password" name="password" placeholder="请输入密码" required="required">
                        </div>
                        <div class="input">
                            <span>收货人<label></label></span>
                            <input type="text" name="name" placeholder="请输入收货">
                        </div>
                        <div class="input">
                            <span>收货电话<label></label></span>
                            <input type="text" name="phone" placeholder="请输入收货电话">
                        </div>
                        <div class="input">
                            <span>收货地址<label></label></span>
                            <input type="text" name="address" placeholder="请输入收货地址">
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                    <div class="register-but text-center">
                       <input type="submit" value="提交">
                       <div class="clearfix"> </div>
                    </div>
                </form>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    <!--//account-->
    <!--#include file='footer.html'-->
</body>
</html>

返回