尚硅谷JavaWEB学习笔记1（自整理，自用）

最新推荐文章于 2024-11-02 18:17:46 发布

发际线码农

最新推荐文章于 2024-11-02 18:17:46 发布

阅读量6.2k

点赞数 29

文章标签：前端 html javascript javaweb

本文链接：https://blog.csdn.net/qq_43130076/article/details/121761497

版权

本文是JavaWEB学习笔记的第一部分，主要涵盖了HTML的基础知识，包括B/S软件结构、前端开发流程、网页组成部分、HTML简介、标签介绍及常用标签的详细讲解。此外，还简单介绍了CSS语言的语法规则和与HTML的结合方式，以及JavaScript的基本概念、与HTML的结合方式和变量、关系运算等内容。笔记旨在帮助初学者快速掌握JavaWEB开发的前端基础。

摘要由CSDN通过智能技术生成

JavaWEB学习笔记

1、HTML

1.1、B/S软件的结构

Javase C/S结构 Client Server客户端----->服务器

B/S结构 Brower Server结构浏览器----->服务器

1.2、前端的开发流程

美术实现---------------------------------------------->前端工程师------------------------------------------->java后台

网页设计师根据需求设计网页前端工程师将设计做成静态页面后台工程师将静态网页修改为动态网页

1.3、网页的组成部分

页面由三部分内容组成！

内容：是我们在页面中可以看到的数据，我们称之为内容，一般内容使用html技术来展示。
表现：指这些内容在页面上的展示形式。比如：布局，颜色，大小等等。一般使用css技术实现
行为：指的是页面中元素与输入设备交互的响应，一般使用javascript技术实现。

1.4、HTML简介

Hyper Text Markup Language（超文本标记语言）

通过标签来标记要显示的网页中的各个部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

1.5、创建HTML文件

创建一个web工程
在工程下创建HTML页面

1.6、HTML文件的书写规范

<!DOCTYPE html><!--约束，说明-->
<html lang="zh_CN"><!--html标签表示html的开始 lang="zh_CN"表示中午
                   html标签中一般分为两个部分，分别是head和boby
                   -->
<head><!--表示头部信息，一般包含三个部分内容：title标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
    <title>页面主题内容</title><!--表示页面标题-->
</head>
<body><!--boby标签是整个html页面显示的主体内容-->
    hello
</body>
</html>

注释：

1.7、HTML标签介绍

标签的格式：

<标签名>封装的数据</标签名>
标签名大小写不敏感
标签拥有自己的属性
- 分为基本属性：bgcolor=“red” 可以修改简单的样式效果
- 事件属性οnclick=“alert(‘你好！’);” 可以直接设置事件响应后的代码。
标签又分为，单标签和双标签
- 单标签格式：<标签名 />
  水平线
  换行
- 双标签格式：<标签名>…封装数据…<标签名/>

标签的语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0-标签语法.html</title>
</head>
<body>
	<!--标签不能交叉嵌套-->
	正确：<div><span>早安，尚硅谷</span></div>
	错误：<div><span>早安，尚硅谷</div></span>
	<hr/>
	<!--标签必须正确关闭(闭合)-->
	<!--1、有文本内容的标签-->
	正确：<div>早安，尚硅谷</div>
	错误：<div>早安，尚硅谷
	<hr/>
	<!--2、没有文本内容的标签-->
	正确：<br/>
	错误：<br>
	<hr/>
	<!--属性必须有值，属性值必须加引号-->
	正确：<font color="#00bfff">早安，尚硅谷</font>
	错误：<font color=#00bfff>早安，尚硅谷</font>
	错误：<font color>早安，尚硅谷</font>
	<hr/>
    <!--注释不能嵌套-->
    正确：<!--注释内容--><br/>
    错误：<!--注释内容<!--注释内容-->-->
</body>
</html>

1.8、常用标签介绍

1.8.1、font字体标签

在网页上显示，我是字体标签，并修改字体为宋体，颜色为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1-font标签.html</title>
</head>
<body>
    <!--字体标签
        需求：在网页上显示，我是字体标签，并修改字体为宋体，颜色为红色

        font标签时字体标签，它可以修改文本的字体，颜色，大小（尺寸）
        color属性修改颜色
        face属性修改字体
        size属性修改大小
    -->
<font color="red" face="宋体" size="7">我是字体标签</font>
</body>
</html>

1.8.2、特殊字符

把换行标签变成文本转换成字符显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-特殊字符.html</title>
</head>
<body>
    <!--特殊字符
    需求1：把<br>换行标签变成文本转换成字符显示在页面上

    常用的特殊字符：
        <    &lt;
        >    &gt;
        空格  &nbsp;
    -->
我是<br>标签
我是&it;br&gt;标签<br/>

</body>
</html>

1.8.3、标题标签

标题标签是h1到h6

显示标题1到标题6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-标题标签</title>
</head>
<body>
<!--标签标题
    需求1：演示标题1到标题6的
    h1-h6都是标题标签
    h1 最大
    h6 最小
    align：属性是对其属性
    left     左对齐：默认
    right    右对齐
    center              
-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>

1.8.4、超链接

在网页中所有点击之后可以跳转的内容都是超链接

标签

需求：普通的超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4-超链接</title>
</head>
<body>
<!--a标签是：超链接
        href属性设置链接的地址
        target属性设置那个目标进行跳转
            _self        表示当前页面（默认）
            _blank       表示打开新页面来进行跳转
-->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>

1.8.5、列表标签

无序列表：

有序列表：

定义列表：

需求：使用无序列表方式，把四大天王，刘德华，郭富城，黎明，张学友，展示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9-列表</title>
</head>
<body>

<!--
    需求：使用无序，列表方式，把四大天王，刘德华，郭富城，黎明，张学友，展示出来
    ul是无序列表
        type属性可以修改列表项前面的符号
		li是列表项
    ol是有序列表
-->
<ul>
    <li type="none">赵四</li>
    <li>宋小宝</li>
    <li>小沈阳</li>
    <li>刘能</li>
</ul>
<ol>
    <li>赵四</li>
    <li>宋小宝</li>
    <li>小沈阳</li>
    <li>刘能</li>
</ol>
</body>
</html>

1.8.6、img标签

img标签可以在html页面上显示图片

需求：使用img标签显示一张美女的照片。并修改宽高和边框属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5-img标签</title>
</head>
<body>

<!--
    需求：使用img标签显示一张美女的照片。并修改宽高和边框属性
    img标签是图片标签，用来显示图片
        src属性可以设置图片的路径
        width属性可以设置图片的宽度
        height属性可以设置图片的高度
        border属性可以设置图片的边框大小
        alt属性设置当指定路径找不到图片时，用来替代显示的文本内容

    在javase中路径也分为相对路径和绝对路径
        相对路径：从工程名开始算

        绝对路径：盘符：/目录/文件名

     在web中路径分为相对路径和绝对路径两种
        相对路径：
            .          表示当前文件坐在的目录
            ..         表示当前文件所在的上一级目录
            文件名       表示当前文件所在目录的文件，相当于  ./文件名    ./可以省略

        绝对路径：
            正确格式是：http://ip:prot/工程名/资源路径
            错误格式是：盘符:/目录/文件名
-->
<img src="../imgs/1.jpg" width="100" height="128" border="2" alt="图片不存在"/>
</body>
</html>

1.8.7、表格标签

需求1：做一个带表头的，三行，三列的表格，并显示边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6-表格标签</title>
</head>
<body>
<!--
    需求1：做一个带表头的，三行，三列的表格，并显示边框
    需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距

        table标签是表格标签
            border   设置表格标签
            width    设置表格宽度
            height   设置表格高度
        tr   是行标签
        th   是表头标签
        td   是单元格标签
            align     设置单元格文本对齐方式
        b标签是加粗标签
-->
<table border="1" width="300" height="300">
    <tr>
        <td align="center"><b>1.1</b></td>
        <td align="center"><b>1.2</b></td>
        <th>1.3</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

</body>
</html>

需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6-表格标签</title>
</head>
<body>
<!--
    需求1：做一个带表头的，三行，三列的表格，并显示边框
    需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距

        table标签是表格标签
            border   设置表格标签
            width    设置表格宽度
            height   设置表格高度
            align    设置表格相对于页面的对齐方式
            cellspacing 设置单元格之间的间距


        tr   是行标签
        th   是表头标签
        td   是单元格标签
             align     设置单元格文本对齐方式
        b标签是加粗标签
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <td align="center"><b>1.1</b></td>
        <td align="center"><b>1.2</b></td>
        <th>1.3</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

</body>
</html>

1.8.8、跨行跨列表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7-表格跨行跨列</title>
</head>
<body>
<!--
    需求：新建一个五行五列的表格，
    第一行，第一列的单元格要跨两列，
    第二行第一列的单元格跨两行，
    第四行第四列的单元格跨两行两列
-->

<table width="500" height="500" cellspacing="0" border="1">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td rowspan="2" colspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>
</body>
</html>

1.8.9、了解iframe框架标签（内嵌窗口）

iframe标签可以在一个html页面上，打开一个窗口，去加载一个单独的页面

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>8-iframe标签</title>
</head>
<body>
我是一个单独完整的页面
<br/>
<!--
    iframe标签可以在页面上开辟一个小区域显示一个单独的页面
        iframe和a标签组合使用的步骤：
            1、在iframe标签中使用name属性定义一个名称
            2、在a标签的target属性上设置iframe的name的属性值
        iframe标签不是单闭合标签
-->
<iframe src="1-font标签.html" width="500" height="600" name="abc"></iframe>
<br/>
    <ul>
        <li><a href="1-font标签.html" target="abc">1-font标签.html</a></li>
        <li><a href="2-特殊字符.html" target="abc">2-特殊字符.html</a></li>
        <li><a href="3-标题标签.html" target="abc">3-标题标签.html</a></li>
    </ul>

</body>
</html>

1.8.10、表单标签

什么是表单？

表单html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。

需求：创建一个个人信息注册的表单界面。
包含用户名，密码，确认密码。性别（单选框）
兴趣爱好（多选框），国籍（下拉列表）。
隐藏域，自我评价（多行文本域。重置，提交）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
    需求：创建一个个人信息注册的表单界面。
    包含用户名，密码，确认密码。性别（单选框）
    兴趣爱好（多选框），国籍（下拉列表）。
    隐藏域，自我评价（多行文本域。重置，提交）
-->
<!--
    form标签就是表单
    input type="text"       是文件输入框
    input type="password"   是密码输入框
    input type="radio"      是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
    input type="checkbox    是复选框    checked="checked" 表示默认选中
    input type="reset"      是重置按钮  value属性修改按钮上的文本
    input type="submit"     是提交按钮  value属性修改按钮上的文本
    input type="button"     是按钮     value属性修改按钮上的文本
    input type="file"       是文件上传域
    input type="hidden"     是隐藏域    我们要发送某些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发给服务器）

    select标签是下拉列表框
        option标签是下拉列表框中的选项，可以设置selected="selected"设置默认选中

    textarea 表示多行文本输入（起始标签和结束标签中间的内容是默认值）
        rows 属性设置可以显示几行的高度
        cols 属性设置每行可以显示几个字符宽度

-->
<form>
    用户名称：<input type="text" value="默认值"/><br/>
    用户密码：<input type="password" value="123456"/><br/>
    确认密码：<input type="password" value="123456"/><br/>
    性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br/>
    兴趣爱好：<input type="checkbox" checked="checked"/>java<input type="checkbox"/>C<input type="checkbox"/>C++
            <input type="checkbox"/>Python<br/>
    国籍：<select>
            <option>---请选择国籍---</option>
            <option selected="selected">中国</option>
            <option>小日本</option>
            <option>棒子国</option>
         </select><br/>
    自我评价：<br/><textarea rows="10" cols="20">默认值</textarea>
    <input type="reset"/>
    <input type="submit"/>
    <input type="hidden" name="admin" value="admin" />
</form>
</body>
</html>

居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
    需求：创建一个个人信息注册的表单界面。
    包含用户名，密码，确认密码。性别（单选框）
    兴趣爱好（多选框），国籍（下拉列表）。
    隐藏域，自我评价（多行文本域。重置，提交）
-->
<!--
    form标签就是表单
    input type="text"       是文件输入框
    input type="password"   是密码输入框
    input type="radio"      是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
    input type="checkbox    是复选框    checked="checked" 表示默认选中
    input type="reset"      是重置按钮  value属性修改按钮上的文本
    input type="submit"     是提交按钮  value属性修改按钮上的文本
    input type="button"     是按钮     value属性修改按钮上的文本
    input type="file"       是文件上传域
    input type="hidden"     是隐藏域    我们要发送某些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发给服务器）

    select标签是下拉列表框
        option标签是下拉列表框中的选项，可以设置selected="selected"设置默认选中

    textarea 表示多行文本输入（起始标签和结束标签中间的内容是默认值）
        rows 属性设置可以显示几行的高度
        cols 属性设置每行可以显示几个字符宽度

-->
<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="123456"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="123456"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" checked="checked">男
                <input type="radio" name="sex">女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked"/>java
                <input type="checkbox"/>C
                <input type="checkbox"/>C++
                <input type="checkbox"/>Python
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select>
                    <option>---请选择国籍---</option>
                    <option selected="selected">中国</option>
                    <option>小日本</option>
                    <option>棒子国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">默认值</textarea></td>
        </tr>
        <tr>
            <td align="center"><input type="reset"/></td>
            <td align="center"><input type="submit"/></td>
            <td><input type="hidden" name="admin" value="admin"/></td>
        </tr>
    </table>
</form>
</body>
</html>

表单提交细节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    form标签是表单标签
        action属性设置提交的服务器地址
        method属性设置提交的方式GET（默认值）或post

        表单提交的时候，数据没有发送给服务器的三种情况：
            1、表单项没有name属性
            2、单选、复选、下拉列表中的option标签，都要添加value属性，以便发给服务器
            3、表单项不在提交的form标签中
        https://www.baidu.com/
        ?
        action=login
        sex=on
        admin=admin

        get请求的特点是：
            1、浏览器地址栏中的地址是：action属性[+?+请求参数]
                参数格式是：name=value&name=value
            2、不安全
            3、数据长度的限制
        post请求的特点是：
            1、浏览器地址栏中只有action属性值
            2、相对于get请求要安全
            3、理论上没有数据长度的限制
-->
<form action="http://www.baidu.com" method="get">
    <input type="hidden" name="action" value="login">
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input name="username" type="text" value="默认值"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input name="password" type="password" value="123456"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input name="password2" type="password" value="123456"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="boy" checked="checked">男
                <input type="radio" name="sex" value="girl">女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input name="hobby" value="java" type="checkbox" checked="checked"/>java
                <input name="hobby" value="c" type="checkbox"/>C
                <input name="hobby" value="c++" type="checkbox"/>C++
                <input name="hobby" value="python" type="checkbox"/>Python
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option value="null">---请选择国籍---</option>
                    <option value="cn" selected="selected">中国</option>
                    <option value="jp">小日本</option>
                    <option value="kr">棒子国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea name="desc" rows="10" cols="20">默认值</textarea></td>
        </tr>
        <tr>
            <td align="center"><input type="reset"/></td>
            <td align="center"><input type="submit"/></td>
            <td><input type="hidden" name="admin" value="admin"/></td>
        </tr>
    </table>
</form>
</body>
</html>

1.8.11、其他标签

div、span、p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--div\span\p标签-->
<!--
    div标签：默认独占一行
    span标签：它的长度是封装主句的长度
    p标签：段落标签  默认会在段落上方或下方各空出一行（如果已有就不再空）
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p标签1</p>
<p>p标签2</p>
</body>
</html>

2、CSS技术

2.1、CSS语言介绍

CSS是用于（增强）网页养蛇并允许将样式信息与网页内容分离的一种标记性语言。

2.2、CSS的语法规则

在这里插入图片描述

选择器：浏览器根据"选择器"决定CSS样式影响的HTML元素（标签）

属性：是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的声明，例如：p{color:bule}

多个声明：如果要定义不止一个声明，则需要用分号将声明分开。虽然最后一条声明的最后可以不用加分号（但尽量在每条声明的末尾都加上分号）

例如：

color:red;

font-size:30px;

}

一般每行只描述一个属性

CSS：注释：/**/

2.3、CSS和HTML的结合方式

2.3.1、第一种

在标签的style属性上设置"key:value value",修改标签样式。

需求：分别定义两个div、span标签，分别修改每个div标签的样式：边框1个像素，实线，红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="border: 1px solid red">div标签1</div>
<div style="border: 1px solid red">div标签2</div>
<span style="border: 1px solid red">span标签1</span>
<span style="border: 1px solid red">span标签2</span>
</body>
</html>

这种代码方式存在问题：

1、代码量太多而且大部分都是重复代码

2、可读性差

3、CSS代码没有复用性

2.3.2、第二种

在head标签中，使用style标签来定义各种自己需要的css样式

格式如下：

xxx{

key : value value;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        div{
     
            border: 1px solid rosybrown;
        }
        span{
     
            border: 1px solid rosybrown;
        }
    </style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

存在问题：这种方式存在的缺点

1、只能在统一页面内服用代码，不嫩恶搞在多个页面中复用css代码

2、维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改，工作量太大了。

2.3.3、第三种

把css样式写成一个单独的css文件，再通过link标签引入即可复用。

使用html的标签导入css样式文件

2.4、CSS选择器

2.4.1、标签名选择器

标签名选择器的格式是：

标签名{

属性：值；

}

标签名选择器，可以决定哪些标签被动的使用这个样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-标签名选择器</title>
</head>
<style type="text/css">
    div{
     
        border: 1px solid yellow;
        color: blue;
        font-size: 30px;
    }
    span{
     
        border: 5px dashed blue;
        color:yellow;
        font-size: 20px;
    }
</style>
<body>
<!--
    需求：在所有div标签上修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线
    并且修改所有span标签的字体颜色为黄色，字体大小20个像素，边框为5像素蓝色虚线。
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

2.4.2、id选择器

id选择器的格式是：

#id属性值{

属性：值

}

id选择器，可以让我们通过id属性选择性的去使用这个样式。

需求1：分别定义两个div标签。

第一个id为id001,然后根据id属性定义css样式修改字体颜色为蓝色，字体大小为30像素。边框为1像素黄色实线。

第二个div标签id为id002，然后根据id属性定义css样式修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        #id001{
     
            color:blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        #id002{
     
            color:red;
            font-size: 20px;
            border: 5px blue dotted;
        }
    </style>
</head>
<body>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>

2.4.3、class选择器（类选择器）

class类型选择器的格式是：

.class 属性值{

属性：值；

}

class类型选择器，可以通过class属性有效的选择性的去使用这个样式。

需求1：修改class属性值为class01de span或div标签，字体颜色为蓝色，字体大小为30个像素。边框为1像素黄色实线。

需求2：修改class属性值为class02的div标签，字体颜色为灰色，字体大小26个像素。边框为1像素红实线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <!--
    需求1：修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小为30个像素。边框为1像素黄色实线。

    需求2：修改class属性值为class02的div标签，字体颜色为灰色，字体大小26个像素。边框为1像素红实线。
    -->
    <style type="text/css">
        .class01{
     
            border: 1px yellow solid;
            color: blue;
            font-size: 30px;
        }
        .class02{
     
            color: gray;
            font-size: 26px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
<div class="class01">div标签1</div>
<div class="class02">div标签2</div>
<span class="class01">span标签1</span>
<span class="class02">span标签2</span>
</body>
</html>

2.4.4、组合选择器

组合选择器的格式是：

选择器1，选择器2，选择器n{

属性：值

}

组合选择器可以让多个选择器公用同一个css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        .class01, #id01{
     
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>
<!--
    需求：修改class="class01"的div标签和id="id01"所有的span标签
    字体为蓝色，字体大小20个像素，边框为1像素黄色实线。
-->
<div class="class01">div标签1</div>
<div id="id01">div标签1</div>
<span class="class01">span标签1</span>
<span id="id01">span标签2</span>
</body>
</html>

2.5、其他常用样式

字体颜色:

color
宽度

width:
高度

height:
背景颜色

background:
字体样式:

font-size
div居中：

margin-left:auto;

matgin-right:auto;
边框:

border
文本居中：

text-align:center
超链接去下划线：

text-decoration:none
表格细线:

border: 1px black solid;/设置边框/
border-collapse: collapse;/将边框合并/
ul无序列表去除符号:

list-style: none;

3、JavaScript语言入门

3.1、JavaScript介绍

javaScript语言诞生主要是完成页面的数据验证，因此，它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

JS是弱类型

java是强类型

弱类型就是类型可变

强类型就是定义变量的时候，类型已确定，而且不可变

int i = 12;

var i;

i=12 数值型

i=‘abc’ 字符串类型

特点：

交互性（它可以做的就是信息的动态交互）；
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

3.2、JavaScript和html代码的结合方式

3.2.1、第一种方式

JavaScript代码在页面执行的时候执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello,javaScript</title>
    <script type="text/javascript">
        //alert是JavaScript语言提供的一个警告框函数
        //它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("hello javaScript!");
    </script>
</head>
<body>
</body>
</html>

3.2.2、第二种方式

使用script标签引入，单独的JavavaScript代码文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        现在需要使用script引入外部的js文件来执行
        src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

        script标签可以用来定义js代码也可以用来引用js文件
        但是，两个功能二选一使用。不能同时使用两个功能
        即：不能再一个script标签里面又引用文件又写代码
    -->
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript">
        alert("helloscript!");
    </script>
</head>
<body>

</body>
</html>

3.3、变量

什么是变量？

变量是可以存放某些值的内存的命名

javaScript的变量类型：

数值类型 number
字符串类型 String
对象类型 object
布尔类型 boolean
函数类型 function

JavaScript里特殊的值：

undefined 未定义：所有js变量未赋予初值的时候，默认值都是undefined
null 空值
NaN 全称是Not a Number：非数字，非数值。

JS中的定义变量格式：

var 变量名；
var 变量名 = 值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
    <script type="text/javascript">
      var i;
      alert(typeof (i));//undefined
      i = 12;
      //typeof是javaScript提供的返回变量类型的函数
      alert(typeof (i));//number
      i="abc";
      //它可以取变量的数据类型返回
      alert(typeof (i));//String

      var a = 12;
      var b = "abc";

      alert(a*b);//NaN
    </script>
</head>
<body>

</body>
</html>

3.4、关系（比较）运算

> >= < <= !=

等于：== 是简单的做字面值的比较

全等于：=== 除了做字面值的比较之外还会比较两个变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系运算</title>
    <script type="text/javascript">
         var a = 12;
         var b = "12";

         alert(a==b);//true

         alert(a===b);//false
    </script>
</head>
<body>

</body>
</html>

3.5、逻辑运算

且运算：&&

或运算：||

取反：！

在javaScript语言中左右的变量，都可以作为一个boolean类型的变量去使用

0,null,undefined,""（空串）都认为是false;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算</title>
    <script type="text/javascript">
        var a = 0;
        if(a){
     
            alert("零为真");
        }else{
     
            alert("零为假");
        }

        var b = null;
        if(b){
     
            alert("null为真");
        }else{
     
            alert("null为假");
        }
        var c = undefined;
        if(c){
     
            alert("undefined为真");
        }else{
     
            alert("undefined为假");
        }

        var d = "";
        if(d

最低0.47元/天解锁文章