后端人员必备的前端[HTML CSS JS]基础知识大合集

kiddkid

已于 2024-03-08 16:37:14 修改

阅读量261

点赞数 10

于 2024-03-06 23:26:02 首次发布

本文链接：https://blog.csdn.net/kiddkid/article/details/136520569

版权

介绍

web里的网页里有三门基础的语言 HTML CSS JavaScript/js
HTML用于定义网页的基本内容
CSS样式用于调整网页内容的样式(外观相关的)
js 用于给网页内容添加功能

html

标签定义内容属性调整效果

结构

<!DOCTYPE html>
<html lang="en"><!-- HTML整个文档里的标签 呈现树形结构 html标签是根标签 -->
				<!--首行是 HTML5版本的 文档声明 这是给 浏览器等看的-->
<head><!-- head标签 是 整个页面的 头部标签,其内部可以添加 页面的修饰信息
      以及 引入的外部文件-->

    <meta charset="UTF-8"><!-- 修饰标签 -->
    <title>Baidu一下!</title><!-- 浏览器标题 -->
    <link href="img/logo.png" rel="icon" sizes="55X57"/>
</head>
<body><!-- body标签 是 页面的正文部分,可以在其内部添加 图片,文本,表格,,, -->

</body>
</html>

h1-h6 p img 实意字符 font

h1 ~ h6 六级标题 1最大 6最小
img标签是个单标签引入图片的功能
src 引入图片的路径可以是本地的也可以是网络的
alt 在图片引入不成功的时候的文字显示
itle 鼠标悬浮时的标题
width 调整图片的宽度,图片高度会跟着按比例调整,可以是数值默认单位是px像素 ,也可以是百分比,百分比是 img标签所在的父标签的宽度的100%

转义字符与实意字符

网页正文部分默认不解析换行符,默认是页面显示一行,内容满了,才会换行,如果需要将文字换行显示.则可以使用br标签单标签
网页正文部分默认是不解析多个连续空格的,只解析一个,如果想要多个空格,则需要使用转义字符 no break space
尖括号< >都已经被HTML官方定义为标签的符号,本身的比较符号就不能使用了,需要使用比较则也需要转义字符 < > 看手册

<p> 学习 <br/> 演 &nbsp; &nbsp;示</p>
<p>10 &lt; 20 ---- 100 &gt; 97 --- a &ge; b --- c &le; d</p>

<!-- lt:less than   gt:greater than  ge:great than or equal to le:less than or equal to -->
<!-- 10 < 20 ---- 100 > 97 --- a ≥ b --- c ≤ d -->
<p>删除线: 某米手机 原价 <s>4999</s> 现价 2099</p>
<p>上标和下标: X的平方: X<sup>2</sup>, Y下标3: Y<sub>3</sub></p>
<p align="center">济备字: 20240219 - 097 济南日报&copy; 电话:400123321</p>

font
- face
- size 1-7
- color

<font face="楷体" size="5" color="#ff6810"> <u><b><i>“欲买桂花同载酒,终不似,少年游。”</i></b></u></font>

u:下划线 b:加粗 i:倾斜 s:删除

img

img标签是个单标签引入图片的功能

src 引入图片的路径可以是本地的也可以是网络的
alt 在图片引入不成功的时候的文字显示
title 鼠标悬浮时的标题
width 调整图片的宽度,图片高度会跟着按比例调整,可以是数值默认单位是px像素

也可以是百分比,百分比是 img标签所在的父标签的宽度的百分比

<img src="img/logo-text.png" title="logo" alt="网络错误:这是人民日报的logo"/><br/>
<img width="200px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd41d8620-e92d-42c4-a8cc-523894827af3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1710924278&t=9e9bcd0214b28087c3dac6ca6520f74d"/>

a 超链接

a的第一种作用:作为页面跳转
- 可以点击文字也可以点击图片
- 默认在当前页面打开要链接到的文档 (这里的文档可以是浏览器能打开的任意文档 , 也可以是一个程序比如java后端,python…)
- 使用 target 属性来调整在什么位置打开要链接到的文档默认值 _self

<a href="https://www.cctv.com/">在自己页面打开央视网</a><br/>
<a href="https://www.cctv.com/" target="_blank">在浏览器空白页打开央视网</a><br/>
<a href="https://www.cctv.com/" target="contentArea">在contentArea内嵌框架内打开央视网</a><br/>
<a href="https://www.cctv.com/" target="_top">在顶层窗口打开央视网</a><br/>
<a href="https://www.cctv.com/" target="_parent">在父窗口打开央视网</a><br/>

a的第二种作用:作为锚点跳转
- 场景: 回页面顶部,去页面底部,去页面中间
- 需要两对a标签,1对作为定点,需要使用name或id标识
- 另外一对正常点击使用的需要在href里使用 # 和定点的name或id的值

<!-- 下面这对a没有内部的文字 也没有内部的图,所以不会被浏览器显示出效果,仅仅是有名字的定点 -->
<a name="theTop"></a>

    <img src="img/logo-text.png" width="100px" height="5000px"><br>

<p align="right">
    <a href="#theTop">
        <!-- 字体名 得看系统里的字体 -->
        <font color="red" size="7" face="verdana">↑Top↑</font>
    </a>
</p>

ol ul

<!-- ol order list 有序列表    list 列表项-->
小学生最喜欢的游戏排名:
<ol type="1" start="10" reversed>
    <li>王者荣耀</li>
    <li>穿越火线</li>
    <li>我的世界</li>
    <li>赛尔号</li>
    <li value="15">问道</li>
</ol>

<!-- ul 无序列表 -->

小学生喜欢吃的食品,前后不分顺序:
<ul type="square">
    <li>辣条</li>
    <li type="desc">炒冷面</li>
    <li type="circle">冰淇淋</li>
    <li>煎饼果子</li>
</ul>

一些常用的工具网站:
<ul>
    <li><a href="http://www.baidu.com" target="_blank">百度搜索</a></li>
    <li><a href="http://www.jd.com" target="_blank">京东</a></li>
    <li><a href="http://www.bilibili.com" target="_blank">B站</a></li>
</ul>
<hr/><!-- 水平线 -->

table 表格

table 表格默认不显示边框 border属性可以调整边框

tr 行
td 普通单元格
th 表头单元格比普通单元格多了加粗字体,默认居中
thead 表的头部区域,里面通常放表头行可以不用
tbody 表的数据区域,里面通常放数据行可以不用
tfoot 表的脚部区域,里面可以放类似合计,备注… 可以不用
caption 表的标题表名可以不用
表格的合并单元格:

看合并之前所有要合并的格是在几行还是在几列
如果合并之前所要合并的格是在多行,合并之后是在一个大行,那么就是行合并
如果合并之前所要合并的格是在多列,合并之后是在一个大列,那么就是列合并
在所有要合并的单元格的第一个格里书写合并属性

如果是行合并就写 rowspan=“总数”, 里面写所有要合并的单元格的总数

如果是列合并就写 colspan=“总数”
把被合并的多个格使用注释注掉或删除掉

cellspacing 单元格和格之间的间距
cellpadding 单元格内部格和内容之间的间距

<table  width="852" height="500" border="2px" align="center"
        cellspacing="0xp" cellpadding="40px">
    <caption><font color="blue" size="7">出勤表</font></caption>
    <tr>
        <th>姓名</th>
        <th>1月11日</th>
        <th>1月12日</th>
        <th>1月13日</th>
        <th>1月14日</th>
    </tr>
    <tr>
        <td>lucy</td>
        <td rowspan="4">present√</td>
        <td><img src="img/bg.webp" width="80px"/></td>
        <td>
            <a href="html01.html">
                <img src="img/bg.webp" width="80px"/>
            </a>
        </td>
        <td></td>
    </tr>
    <tr>
        <td>tom</td>
        <!--<td>present√</td>-->
        <td></td>
        <td></td>
        <td></td>
    </tr>
	...
    <tr>
        <td>杰伦</td>
        <td colspan="4" align="center">absent×</td>
        <!--<td></td>
        <td></td>
        <td></td>-->
    </tr>
</table>

audio video

<audio src="media/When%20I%20Saw%20You.mp3" controls loop></audio><br/>
<video src="media/Bumkey-When%20I%20Saw%20You%20MV.mp4" controls width="1080px" height="720px"></video>

form 表单

表单是用来收集用户的不同输入的数据,然后发送给"服务器程序"
表单form标签,内部可以定义很多不同形式的"表单组件".

表单组件有的表现为单行文本框,密码框,按钮,复选框,下拉菜单
form标签有method属性,设置本表单的提交方式,默认值为get 可以设置为post
form标签有action属性,设置本表单提交到的路径,通常是"服务器程序"的路径

get提交方式,会把表单里的key value对数据显示在地址栏上以?开头 key=value&key2=value2
get方式提交量有限制
post方式相对安全,不会把数据明文显示在地址栏上,提交数据的量没有限制,上传文件必须使用post方式

form标签有enctype属性,设置当表单里有文件上传时,表单的特殊编码形式.
表单里的每一个组件如果要向提交到服务器,需要给每一个组件设置name属性.

name的值就是提交的时候的键组件里用户输入的数据,就是提交的时候键对应的值

input标签根据不同的type属性值有不同的表现
checked
- 设置复选框被选中:<input type="checkbox" checked>
- 读取该属性时:
  - 如果复选框被选中，hobby.checked 将返回 true。
  - 如果复选框没有被选中，hobby.checked 将返回 false。

<form method="get" action="http://www.baidu.com" enctype="multipart/form-data">
    
1.文本输入框
    <label for="usernameInput">username:</label> <!-- label标签,for是为了谁,填写表单组件的id -->
    <input type="text" name="username" id="usernameInput" placeholder="输入用户名"
    required="required" pattern="^[a-zA-Z]\w{3,7}$"/>
    <small>4-8位字母数字组成,数字不开头</small>
    <br/>
2.密码输入框
    <label for="nicknameInput">nickname:</label>
    <input type="text" name="nickname" id="nicknameInput" size="20" maxlength="10" value="jacky"/>
    <small>英文昵称:最多10个字母</small>
    <br/>
    <!-- value 可以设置默认值 -->
    <!-- placeholder 占位符,不输入的时候一个提示 -->
    <!-- size 输入框的长度 -->
    <!-- maxlength 能输入的字符的最大个数 -->
    <!-- required 必须填写,否则表单无法提交,属性名和值相同的,这样的属性 可以直接写属性 -->
    <!-- pattern 设置 正则表达式 -->
    <!-- 提交按钮 HTML中已经定义好的 可以提交表单的按钮,把表单里的数据发送出去 -->
    <label for="passwordInput">Password:</label>
    <input type="password" name="password" id="passwordInput" value="123456" readonly>
    <small>4-8位字母数字</small>
    <br/>
    <!-- 密码框能设置的属性跟单行文本框一致 -->
    
    
3.按钮
    <!-- 单选按钮 必须提供相同的name属性 才能成为互斥的一组
    <label>Gender:</label>
    <input type="radio" name="gender" value="1" checked/><label>Female</label><img src="img/logo.png"/>
    <input type="radio" name="gender" value="2"/><label>Male</label><img src="img/logo.png"/>
    <br/>
    input 单标签 它的值需要使用value来定义.后面的label/文本/图片 仅仅和它是排版上一起
    单选按钮 默认选择的属性 checked -->
    
     <!-- 图片形式的提交按钮 -->
     <input type="image" src="img/logo.png" width="50px" height="50px"/>
     <input type="button" value="普通按钮"/> <!-- js添加功能 -->
     <!-- 按钮这里 还有一个特殊的button双标签 根据type属性的不同 有不同的效果 -->
     <br/>
    
     <button type="button">普通按钮</button>
     <button type="submit">提交按钮:有功能</button>
     <button type="reset">重置按钮:有功能</button>
4.复选框
    <label>Hobby:</label>
    <input type="checkbox" name="hobby" value="coding" checked/>编程
    <input type="checkbox" name="hobby" value="gaming"/>游戏
    <input type="checkbox" name="hobby" value="cing" checked/>电影
    <input type="checkbox" name="hobby" value="sport"/>运动
    <input type="checkbox" name="hobby" value="art"/>艺术
    <br/>
    <!-- 复选框 默认被选择 添加 checked -->
5.隐藏域
    <input type="hidden" name="secret" value="秘密数据"/>
    <!-- 隐藏域 用户看不到,但是可以跟随表单一起提交的数据,一般是程序员设置在此的一个数据 -->
    <label for="birthdayInput">Birthday:</label>
6.日期 email color week time
    <input type="date" name="birthday" id="birthdayInput">
    <br/>
    <label for="emailInput">Email:</label>
    <input type="email" name="email" id="emailInput" required/>
    <br/>
    <!--<input type="color" name="color">
    <input type="week" name="week">
    <input type="time" name="time">-->
7.file
    <!-- 有文件上传时,必须将form的enctype 属性 改为enctype="multipart/form-data"(多组件表单数据)
      并且 method 必须改为post,这里没有改 因为 并不能进行真正的上传
     -->
    <label for="photoChoose">Photo:</label>
    <input type="file" name="photo" id="photoChoose"/>
    <br/>
8.按钮
    <hr/>
    <input type="submit" value="send">
    <input type="reset" value="clear">
</form>

9.多行文本框 rows cols 设置区域大小
 <form method="get" action="http://www.baidu.com">
     <label for="introduce">介绍:</label>
     <br/>
     <textarea disabled name="introduce" id="introduce" rows="10" cols="50">
         这里面的文本不受页面正文的限制,比如:空格和换行
         1     2     3
     </textarea>
     <br/>

10.下拉菜单 
   每一个菜单项使用option定义
   真正提交的是 选项option里的值,可以使用value定义值,没用value,就是option标签的标本
     <label for="pro">省份:</label>
     <select disabled name="pro" id="pro">
         <option>-请选择-</option>
         <option value="齐鲁">山东</option>
         <option value="yue">广东</option>
         <option selected>江苏</option>
     </select>
     <br/>
     
11.多选下拉菜单
     multiple这个属性开启多选
     size属性定义最大显示选项数
     <label>你喜欢的地点:</label>
     <select name="place" multiple="multiple" size="5">
         <option value="1">校园</option>
         ...
         <option value="7">楼顶</option>
     </select>
     <br/>
     <!-- 有时选项很多,使用optGroup的标签 定义分组,这仅仅是一个提示! -->
     <label>你喜欢的城市</label>
     <select name="loveCity">
         ...
         <optgroup disabled label="首都经济圈">
             <option>北京</option>
             <option>天津</option>
             <option>石家庄</option>
         </optgroup>
     </select>
     <br/>
     <!-- 下拉菜单项 有属性 默认选择 selected -->
     <!-- 所有的表单组件 都能设置禁用 disabled, 被禁用的组件,无法获取光标焦点,也无法提交 -->
     <!-- 单行文本框 密码框 多行文本框 等可以输入的 可以设置 只读属性 readonly,无法获取光标焦点,但可以提交 -->
 </form>

iframe

<!-- iframe行级元素 用于引入其他文档 -->
    <iframe src="html01.html" width="99%" height="200px" frameborder="1" scrolling="auto"></iframe>
    <iframe src="html02.html" width="20%" height="500px" frameborder="1" scrolling="auto"></iframe>
    <iframe name="contentArea" src="html03.html" width="79%" height="500px" frameborder="1" scrolling="auto"></iframe>

marquee

滚动标签,可以对内容进行滚动显示
direction: left right up down 滚动的朝向
behavior:alternate(两端之间轮流滚动) 默认是scroll
scrolldelay:滚动两个动作之间的延迟,延迟越大滚动越慢
scrollamount:滚动一个动作之间的移动量,越小,滚动越慢

<marquee width="1000px" height="78px" bgcolor="gray" scrollamount="100">
    <img src="img/logo-text.png"/>人民日报
</marquee>

css

CSS用于调整html内容的外观/样式,指大小,位置,背景,颜色,边框,轮廓,填充,边距… …
CSS代码叫做样式.在HTML中写CSS的有三种样式:

1.行内样式/内敛样式: 在要调整的HTML标签内使用style属性.在style属性值里写CSS的声明
- CSS 声明指 CSS里的样式名:值冒号是等于的意思,多个CSS之间用分号分隔
- CSS里color字体颜色,background-color背景颜色
```
<h2 style="color: blue;">蓝蓝的天空!</h2>
<h2 style="color: green">绿绿的湖水!</h2>
```
2.内部样式: 在head头部内的style标签内,使用选择器{CSS声明}的方式调整选择器所选的那些标签
- 选择器: 就是选择哪个容器(HTML)标签进行调整
- 其中有一个叫ID选择器.给要调整的HTML标签设置id属性然后通过#id的值来选择它
```
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #h2third{color: gold;background: greenyellow}
    </style>
</head>
<h2 id="h2third">金黄的麦田!</h2>
```
3.外部样式: 在head头部内,使用link标签,将HTML外部的css文件引入进来,css文件里写: 选择器{css声明}

<p>Connection</p>
<p class="stmt">Statement</p>
<p class="stmt">PreparedStatement</p>
<p class="stmt">CallableStatement</p>
<p>ResultSet</p>
<h2 class="pool">以下是来自javax包的</h2>
<p class="pool">DateSource连接池</p>
<p id="pSpring">Spring框架里 有个 JDBCTemplate工具类 可以简化 JDBC的操作! </p>
<span class="span1">span标签是一个行级标签,用于修饰文本,如何修饰得去调整css样式!</span>
<span class="span2">div标签,是一个块级标签,用于做布局,叫做块或叫做层,得去调整css样式!</span>

/* id选择器 */
#h2four{
    color: purple;
    background-color: aquamarine;
}



/* . 来 选择 类选择器 */
.stmt{
    background-color: aquamarine;
}




/* 元素选择器 */
/*
p{
    color: red;
}
*/



/* 也可以 先 标签 然后 再 类选择器 */
/*p.pool{
    color: green;
}*/



/* 使用 , 一起调整 多个选择器的html的标签 */
/*#pSpring,.span2{
    background-color: yellow;
}*/



/* *代表所有 通配选择器 用得少 */
*{
    font-family: "楷体";
}


/* 属性选择器 */
/*
input[size]{      具有size属性的
    color: aqua;
}*/
/*
input[name='nick']{   name属性值是nick的
    color: red;
}*/
/*
input[name^='user']{
    background-color: green;  name属性值开头是user的
}*/
/*
input[name$='me'][id]{      name属性值结尾是me的 且具有id属性的
    background-color: purple;
}*/
/*
input[name*='s']{   name属性值里含有s字符的
    background-color: red;
}*/



/* 后代选择器 形式 为 A 空格 B ,A 为祖先元素 B为后代元素 , 这里调整的为后代元素 */
/* 后代可以是子,儿子,孙子... */
/*table a{
    color: red;
}
table tr th{
    background-color: aquamarine;
}*/



/* 子元素选择器 */

#p1>span{
    color: red;
}



/* 相邻兄弟选择器 */
h1+p{
    color: cornflowerblue;
}



/* 伪类 */
/* ：hover 鼠标悬浮时  :active 鼠标点击但未松开时 */
h1:hover,p:hover{
    background-color: azure;
}
h1:active{
    color: cornflowerblue;
}



/* css伪类选择器 可以给绝大多数的HTML添加 */
/* :focus 获取光标焦点时 */
input:focus{color: purple}
/* :first-child 选择作为第一个子元素的 */
tr:first-child:hover{
    background-color: aquamarine;
}
/*
这里是对tr进行 筛选, 选出所有tr中 作为别人的第一个子元素的tr
并不是选取 tr内部的第一个孩子
 */


/* 伪元素  css02 head部分 */

<style type="text/css">
/* 伪元素 */
p:first-line{
    background-color: green; color: gold;
}

h1:first-letter{
    font-size: 100px;
    color: blue;
}
/* h1里的内容的前面 再添加内容 */
/* css里如果要引入外部图片 需要使用url函数 函数内写清路径 */
h1:before{
    content:"Oh! ";
}
h1:after{
    content: url("img/logo.png");
}  
</style>

这三种方式如果同时修饰一个HTML标签,那么 1 行内样式优先级最高!!

背景    
/* table{
            background-image: url("img/bg.webp");
            background-repeat: no-repeat;
            !* 背景图片的位置 第一个:水平x轴的移动  第二个:垂直y轴的移动 *!
            !*background-position: 80px 150px;*!

            !* 背景图片的大小 *!
            background-size: 100% 100%;
        }*/
        body{
            background-image: url("img/bg-sea.jpg");
            background-size:1500px 700px;
            background-position: 50px 0px;
            background-repeat: no-repeat;

背景

背景图片关联(附着) 
            background-attachment: fixed;
        }
        h1{
            background-image:url("img/logo-text.png");
        }

字体

字体大小的单位 px 是像素
em 相对大小相对父元素里定义的文本大小
rem 相对大小相对于根元素 html 来设置的

	p{
            font-family: 华文行楷;
            font-size: 16px;
            font-style: oblique;
            font-weight: 900;
        }
span{
            font-size: 2rem;
        }

文本链接列表表格轮廓outline

<style type="text/css">
    #p1 {
        text-indent: 2em;
    }

    #p1 > a {
        text-decoration: none;
        color: green;
        font-weight: bold;
    }

    #p1 > a:hover {
        text-decoration: underline;
        color: gold;
        background-color: green;
    }

    .pp2 {
        text-transform: capitalize;
        word-spacing: 2em;
        text-align: center;
    }

    .pp3 {
        letter-spacing: 1em;
    }

    ul {
        /* list-style-position: inside;*/
        /*list-style-type: decimal;*/
        /*list-style-type: none;*/
        /*list-style-image: url("img/logo.png");*/
        /* 列表在设置时,一般会直接把列表项标志设置为none */
    }

    table {
        border-collapse: collapse;
        /*border-spacing: 10px 15px;*/
        /*caption-side: bottom;*/
       /* empty-cells: hide;*/

        /* 列宽度算法 */
        /*table-layout: fixed;*/
    }
    button{
        font-size: 100px;
        /*background-color: transparent;*//* 透明 */
    }
    button:hover{
        /*outline-style: solid;
        outline-width: 2px;
        outline-color: red;*/
        outline: green double 3px;
    }

</style>

box

margin: auto; /* 块级元素 外边距 自动的时候 居中 */

    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div01{
            width: 200px;/* width,height仅仅设置内容区域 */
            height: 200px;
            padding: 2em 4em;/* padding是简写,简写了四个方向 */
            /* 如果是给1个值 那就是 4个方向都设置 */
            /* 如果给2个值 第一个值是 上下 第二个值是 左右 */
            /* 如果给3个值 第一个值是 上 第二个值 左右 第三个值 下 */
            /* 如果给4个值 分别是 上 右 下 左 顺时针 */
            border: 2px solid red;
        }
        
        
        
        span{
            width: 200px;
            height: 200px;
            /* 行级元素的 宽高属性 无效,根据内容的大小自动调整的 */
        }
        #span2{
            /*border: 10px solid red;*//* 边框可以调整左右,上下不建议调整 */
            /*padding: 20px;*//* 内填充可以调整左右,上下不建议调整 */
            /*margin: 20px;*//* 外边距可以调整左右,上下不建议调整 */
            display: block;
            width: 200px;
            height: 200px;
            border: 2px solid purple;
        }
        .div01:first-child{
            border:2px solid blue;
            margin:20px;
            /* padding margin border 都可以写 xxx-方向 */
        }
    </style>
</head>

<body>
   <!-- div 块级标签 没有任何显示效果,需要结合css盒子模型属性的调整 -->
   <div class="div01" style="display: none">
       这是内容!
   </div>
   <div class="div01" style="display: inline">
       这是内容!
   </div>
   <!-- 盒子模型/框模型 在 行级元素里的部分 不建议调整 -->
   <span id="span1">span1</span><span id="span2">span2</span><span id="span3">span3</span>
</body>

定位 z-index

文档流: 默认的摆放形式,行级和行级在一行,实在放不下就换行,块级独占一行
定位:
- 相对定位relative: 相对于自身加载的原始位置的定位原来的位置是被保留的.
- 绝对定位absolute: 相对于已经定位的父元素的定位原来的位置不被保留.
- 固定定位fixed: 相对于视窗(浏览器窗口) 原来的位置不被保留.

#move{
    width: 400px;
    height: 200px;
    background-color: gold;
    /* 固定定位 */
    position: fixed;
    top: 200px;
    left: 400px;
    z-index: -1;
}
#outer{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;/* 相对定位 */
    left: 100px; /* 定位之后的位置 左边 100px 是原来的位置 */
    top: 100px; /* 定位之后的位置 上边100px 是原来的位置 */
    z-index: -1;
}
#outer2{
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    position: absolute;/* 绝对定位 父亲是body */
    left: 200px;
    top: 100px;
    z-index: -2;
}

float浮动

点击查看清除浮动

float可以使块级元素"一行显示",可以使行级元素文字环绕

清除浮动的行为： 当一个元素（如 .d4）设置了 clear: left; 属性，它告诉这个元素不能在它的左侧有任何浮动元素。浏览器会确保这个元素定位在所有左侧浮动元素的下方。

文档流的重启： 由于 .d4 清除了浮动，它会导致浏览器重新开始一个块级格式化上下文（BFC），这意味着它不会与之前的浮动元素共享同一行

定位： .d4 会定位在 .d3 的下方，但是它会尽量靠近它的包含块（通常是与页面左上角对齐）。由于 .d3 是浮动的，它不会占据正常的文档流空间，因此 .d4 会尽可能地向上移动，直到它的顶部与 .d3 的底部对齐。

.d3{
    width: 250px;height: 200px;background-color:deepskyblue;float: left;
}
.d4{
    width: 500px;height: 400px;background-color: darkgray;
    /* 如果不想补位,补位是由前面元素浮动产生的"后遗症" */
    clear: left;/* right both */
        img{
            float: left;
            /* 行级元素浮动,文字不会去补位,所占位置还在,但所在行行框缩短 */
        }
        a{
            background-color: pink;color: honeydew;
            text-decoration: none;
            /* 变为块级元素,进而设计内容区域的大小 */
            display: block;
            width: 150px;height: 45px;
            text-align: center;
            font-size: 24px;/* 字体外添加 */
            padding-top: 15px;
        }

overflow 溢出

#d1{
    width: 200px;
    height: 200px;
    border: 2px solid dimgray;
    /* overflow 调整内容溢出 */
    /*overflow: hidden; *//*隐藏 */
    /*overflow: scroll;*//* 滚动条*/
    overflow: auto;/* 自动添加滚动条 */
}

display

可见性属性设为不可见时,看不到,但是文档流里的位置要保留
display:none 元素就不描述,文档流里的位置不会保留

#d3:hover{
    /*visibility: hidden;*/
    display: none;
}

透明度样式

0-1的数值 0完全透明 1完全不透明

#d2:hover{
    opacity: 0.7;
}

css3

边框

<!-- 边框弧度 -->
img{
    border-radius:15px;
}

<!-- 边框阴影 -->
box-shadow: h-shadow v-shadow blur模糊距离 color 
img:hover{
    box-shadow: 10px 10px 30px red;
    position: relative;
    left: 0px;
    width: 24%;
}

背景

background-clip 裁剪背景的绘制区域
- border-box
- padding-box
- content-box

background-origin 规定图片的定位区域

border-box
padding-box

content-box

 #div1{
            width: 952px;height: 600px;
            border: 10px solid gray;
            background-image: url("img/bg.webp");
            background-repeat: no-repeat;
            padding: 10px;
            background-origin: content-box;
            /* 默认的 背景 会在 内容区域 和 内填充区域 都放置 */
        }

background-size 规定背景图片的尺寸
- length px设置背景图像的高度和宽度
- percentage 父元素的百分比
- cover 背景扩展至足够大,部分可能溢出
- contain 扩展至最大尺寸,可能一部分没有被遮盖

文本

word-wrap 对长单词进行分割
- normal
- break-word

text-shadow

h1{
            text-shadow: 5px 5px 5px black;
        }

转换

transform

translateX/Y/Z(x/y/z) 平移可单独,可统一

    .moveX200{
        /*transform: translateX(200px);*/
        transform: scale3d(0.5,0.5,1);
    }

scaleX(x,y,z) 缩放可单独,可统一

rotateX/Y/Z(angledeg) 旋转

.rz-30{
            transform: rotate(30deg);
        }
        .rz-45{
            transform: rotate(45deg);
        }

过渡

变形直接就变完了过渡可以设置时间

transition 对所有行为进行过渡
transition-property 过渡属性
transition-duration 过渡效果花费时间
transition-timing-function 过渡效果时间曲线

在这里插入图片描述

transition-delay 过渡效果多久后开始

    .btn{
        width: 80px;height: 40px;border-radius: 4px;
        border: 1px solid cornflowerblue;
    }
    .btn:hover{
        width: 120px;height: 60px;font-size: 1.5em;
        font-weight: bolder;
        transition: 0.5s;
        color: white;
        background-color: cornflowerblue;
        border: 1px solid white;
    }

   /* #myHead:hover{
        !* 转换 瞬间完成 *!
        !*transform: rotateZ(300deg);*!
        !* 过渡 有一个持续时间 *!
        transform: rotateZ(360deg);
        transition-duration: 1.2s;
        transition-property:transform ;
        transition-timing-function: ease;
        -webkit-transition-delay: 0.3s;
    }*/

动画

@keyframes xxx 规定动画
animation
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-conut
- animation-direction


   <style type="text/css">
        #myHead{
            width: 200px;
            height: 200px;
            background-image: url("img/head.jpg");
            background-size: 100% 100%;
            border: 2px solid green;
            border-radius: 50%;
            box-shadow: 5px 5px 25px darkgreen;
            position: absolute;
            left: 0px;
            top: 0px;
            animation-name: myanimation;
            animation-duration: 5s;
            animation-direction: normal;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            z-index: 1;
        }
        #myHead:hover{
            animation: none;
        }

        @keyframes myanimation {
            0%{left: 0px;top: 0px;transform: rotateZ(0deg);border-color: green}
            25%{left: 200px;top:100px;transform: rotateZ(90deg);border-color: yellowgreen}
            50%{left: 400px;top:200px;transform: rotateZ(180deg);border-color: yellow}
            75%{left: 200px;top:100px;transform: rotateZ(270deg);border-color: yellowgreen}
            100%{left: 0px;top: 0px;transform: rotateZ(360deg);border-color: green}
        }

    </style>
</head>

JavaScript

js分类
- 核心语法 + Bom + Dom
  - 核心语法定义基本的语法
  - Bom brower object model 浏览器对象模型
  - Dom document object model 文档对象模型访问HTML标签属性文本…

如何在html中使用js

html中使用js有三种,标签内,内部,外部使用js一般是两种,也就是内部和外部

标签内

<a href="javascript:alert('这是js的信息弹框!这样的用法几乎不使用')">点我弹出一个信息框</a>

内部

<head>
...
  <script type="text/javascript">
        /* 脚本 */
       /* alert("js的弹框000");*/
        //js 里函数 就是 java里的方法
        function show() {
            alert('show方法里的弹框!')
        }
    </script>
...
<head>

<div onclick="show()">
    通过在标签上的 事件动作 on在click点击 的时候 执行 js函数 show()
</div>

外部

<h2 onmouseenter="changeBg(this)">html中使用css有三种,行内样式,内部样式,外部样式</h2>

数据类型与变量

在这里插入图片描述

js里语句最后的分号可加可不加
使用关键字 var let 可以声明变量,const声明常量
- var声明的变量为 js顶级对象window的属性,为全局变量
- let声明的变量为局部变量

let a = 10;
let b = 20.55;
let c = "123";
let d = true;
let e = [1,2,3];
let f = {name:"lucy",age:19};
let g = function (a,b) {
    return a - b;
}
let h = null;
// 向浏览器控制台输出 变量的类型 使用 typeof 运算符
console.log('a:' + typeof a);
console.log('b:' + typeof b);
console.log('c:' + typeof c);
console.log('d:' + typeof d);
console.log('e:' + typeof e);
console.log('f:' + typeof f);
console.log('g:' + typeof g);
console.log('h:' + typeof h);
console.log('i:' + typeof i);//i没有声明过

js运算符和java的异同

算术运算符 + - * / % ++ –
- 除了+在处理字符串和数字时是java一致的连接符,其他都是可以做运算,要求字符串必须是个数字的形式
- ```
let a = 10;
let str = "123.45";
console.log(str+a);//连接符
console.log(str-a);
console.log(str/a);
console.log(str*a);
console.log(str%a);
```

赋值运算符和 java一致
比较运算符 > >= < <= != $==$ 判断数值相等 $===$ 判断数值和类型都相等
- 另外字符串和字符串直接比较字符是否一致也直接使用==,没有equals方法
```
let b = "1234",c = "1234";
let d = 1234;
console.log(b==c);//t
console.log(b===c);//t
console.log(b===d);//f
console.log(b==d);//t
```
逻辑运算符 & | ~ ^ && || 但是js里的与或可以对非boolean类型的数值进行运算,
- 数字只要不是0 就是真,字符串只要不是null 不是""就是真
- && 如果运算的第一个操作数为true,则返回第二个操作数,反之则返回第一个操作数
- || 如果运算的第一个操作数为 true,则返回第一个操作数,反之则返回第二个操作数

let num = 100;
let bool = false;
let name = "jack";
console.log(num&&bool);//num换作true,则由bool变量的值 来决定最终结果
console.log(num&&name);//num换作true,则由name变量的值 来决定最终结果
//虽然有这样的特性(好听:灵活,不好听:乱来).我们还是使用java一致的逻辑,仅对boolean值进行逻辑运算.

三目运算符和java一致

流程控制

if switch while do-while for 跟java一致
break continue 跟java一致
嵌套循环时同样可以为循环添加标签控制语句可以直接控制指定标签的循环
for-in 类似于java的增强for循环

let arr = [10, 99, 77, 35, 28, 101];
//遍历
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
console.log('=============');
for (let i of arr) {
    console.log(i);
}//iter
console.log('============');
for (let i in arr) {
    console.log(arr[i]);
}//forin
console.log('-------------')


//对象
let stu = {
    name: 'jacky',
    age: 10,
    gender: '男',
    address: "长大",
    study: function () {
        alert("学习学习")
    }
}
//for-in可以去遍历对象,遍历对象的时候,对象类似一个Map集合  let变量 是 键
for (let stuKey in stu) {
    console.log(stu[stuKey]);
}

类型转换

number date boolean 转换为String
- .toString()
- String()
String 转换为 Number
- 字符串变为数字
  - Number(“xxx”)
- 字符串的开始部分提取/解析为数字
  - .parseFloat()
  - .parseInt()

错误

java一致的,出错以后就不执行了(不再被浏览器解析了!)

try {
    console.log(person.name + person.age);//这里有错误
}catch (e) {
    console.log(e);
}

js高级教程

Date()

let now = new Date();//获取的是浏览器所在的电脑的时间
//document 是顶级对象 window 对象的一个属性(子对象) 代表 整个文档
document.write(now.toLocaleString()+"<br/>");
let y = now.getFullYear();
let m = now.getMonth()+1;
let d = now.getDate();
let h = now.getHours();
let min = now.getMinutes();
let s = now.getSeconds();
document.write(y+"年"+m+"月"+d+"日"+" "+h+":"+min+":"+s);

Number()

Math()

<button onclick="playGame()">开始</button>
<script>
    //顶级对象 window 有三个函数 是 关于弹框的
    //1.警告框 alert()  信息
    //2.确认框 confirm()  确定或取消
    //3.确认框 prompt()  输入信息
    function playGame() {
        //产生一个0-100的随机数
        let sysNum =Math.round(Math.random()*100) ;
        while(true){
            let input = window.prompt("输入你的数字:","0");//提示信息 和 默认答案  返回值是字符串
            let number = Number(input);
            if (number<sysNum){
                alert("猜小了!");
            }else if (number>sysNum){
                alert("猜大了!");
            }else {
                alert("bingo! 随机数:"+sysNum+"  你猜的:"+number);
                break;
            }
        }
    }
</script>

String 对象

大多数字符串对象的方法跟 java 里的字符串一致

slice 截取字符串,通过下标来截取开始下标包括,结束下标不包括,可输入负数

console.log(s1.slice(2,10));//llo worl
console.log(s1.slice(2));//llo world! hello web! hello js!从2下标开始到末尾
console.log(s1.slice(-3));//js! 从到倒数第三个字符 开始 到末尾!

substr 截取子字符串,通过下标和字符个数来截取

console.log(s1.substr(2,3));//llo 从2下标开始(包括),截取3个字符
console.log(s1.substr(2));//llo world! hello web! hello js!从2下标开始到末尾!

substring 截取字符串,通过下标来截取不能使用负数下标

console.log(s1.substring(2,10));//llo worl
console.log(s1.substring(2));//llo world! hello web! hello js!

split

console.log(ss);//使用空格分割数组['hello', 'world!', 'hello', 'web!', 'hello', 'js!']
console.log("----------------------");

RegExp

正则对象调用的两个方法

let regExp01 = /hello/g;
console.log(regExp01.exec(s1));//判断s1中有没有子串 符合 regExp01 有就返回子串,没有返回null

let regExp02 =/^[a-z]{1,}$/i;// ^ $ 字符串的起始和结尾
console.log(regExp02.test(s1));//用来验证字符串符不符合正则格式

字符串调用的五个方法

let regExp03 = /! /;
console.log(s1.search(regExp03));// 查找 符合 正则描述的子串的 第一次出现的下标,没有就-1

console.log(s1.match(regExp01));//查找 符合 正则描述的子串的 数组

console.log(s1.replace(regExp01,"你好!"));//替换 正则描述的子串 为 后面的 你好!

console.log(s1.replaceAll(/ /g,"~"));//替换 正则描述的子串 为 后面的 ~ .这里的正则必须是个全局正则

console.log(s1.split(/ll/));//使用正则描述的子串分割 得到数组

Array

js里的数组更像java里的集合大合并

let names = ["lucy","jacky","candy","joe","tom"];
function len3(str){
    return str.length>=3;
}
console.log(names.every(len3));//对数组的每一个数据 调用 len3
console.log(names.every(name=>name.length>=3));//对数组的每一个数据 调用 判断 长度是否>=3

console.log(names.filter(name=>name.length===3));//过滤 得到 数组

console.log(names.find(name=>name.length==3));//查找 只返回 第一个de 下标

console.log(Array.from(names,name=>name.concat("^_^")));//数组类的工具方法,从某个数组,经过某个计算,得到新数组

console.log(names.join("~"));//使用连接符把数组里的每个数据连接起来返回字符串

console.log(names.map(name=>name.concat("-_-")));//数组里的每个数据 进行映射 映射为新数组

let stack = ["main","show","say","setColor"];
while(stack.length>0){
    console.log(stack.pop());//弹栈,从数组末尾删除 并得到数据
}
let stack2 = [];
let i = 1;
while(stack2.length<5){
    stack2.push(Math.random()+"="+ i++);//压栈,将数据添加到数组的末尾
}
console.log(stack2);
//total默认是第一个值 name是后面的每一个值,初始化total要放在reduce()中,不能放在log()中
console.log(names.reduce((total,name)=>{return total.concat(name,"=")},"名字大联合:"));
console.log(names.reduce((total,name)=>{return total.concat("=",name)}));

let queue = ["张三","小妹","小梅","黎明"];
console.log("买饭要排队:");
while(queue.length!=0){
    console.log(queue.shift());//从数组开头删除 并 返回数据
}

console.log("部分人员名单:"+names.slice(-2));//从倒数第二个开始 直到最后
console.log("部分人员名单:"+names.slice(0,3));//开始的下标 结束的下标(不包括)

console.log(names.some(name=>name.startsWith("j")));//查找有没有一个数组的数据 符合 开头是j
//let names = ["lucy","jacky","candy","joe","tom"];
//splice 先删除 后添加
/*names.splice(1,1,"小李","桃子")
console.log(names);*///在1下标处删除数据,添加 后面的两个数据,此方法会得到 删除的数据
names.splice(1,0,"小小船");//在1小标出删除0个数据,添加后面1个数据
console.log(names);//['lucy', '小小船', 'jacky', 'candy', 'joe', 'tom']

js函数

函数就是java里的方法作用,形式差不多.函数等待被调用

函数的定义

//第一种定义函数的方式
function fun001(a,b,c) {
    return a+b-c;
}

//第二种方式
const fun002 = function () {
    alert(123);
}//fun002引用匿名函数,可直接使用fun002();

//第三种方式 不建议使用的 极少使用的    恶心的是 使用字符串形式 写 函数里的参数 和 函数体
const fun003 = new Function("a","b","return a+b");

函数的调用

//1.手写调用
let res = fun001(10,20,15,40,50,60);//这里js只取前三个参数使用 最好还是按照个数给
console.log(res);
//fun002();
console.log(fun003(10,90));

//2.结合事件,给 html 标签 添加 onxxx="函数"
<button onclick="fun002()">按钮1</button>

    //3.js里给html标签对象 绑定函数
    //这里使用到了DOM 如何获取HTML对象

    //窗口加载完毕 去 执行
    window.onload = function () {//给window对象 的 加载完毕事件 绑定一个 匿名函数
        let btn2 = document.getElementById("btn2");
        btn2.onclick = fun002;//给btn2对象 绑定 函数fun002
    }
</script>
<button id="btn2">按钮2</button>

闭包

闭包:一个函数返回内嵌函数,这个函数可以使用到上层作用域

const fun000 = (function () {
    let times = 0;
    function show() {
        console.log(++times);
    }
    return show;//返回函数名 如果是show(),则返回函数结果
})();//后面添加() 就是 调用函数 得到 内嵌函数 show 也就是说 现在 fun000 引用的是show函数
fun000();
fun000();
//这样 就形成了 闭包 ,然后times变量 就 仅仅是 fun000函数的 私有使用变量,其他任何人都使用不到

DOM 文档对象模型

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点

基本操作

<script type="text/javascript">
   // 1 dom 获取 name属性是hobby 的4个input对象 组合的数组 的长度  把他弹出!
   // 2 修改 .hh2 的h2 标题 的 文本内容为   "我的标题2"
   // 3 将 #zstd 单元格 所在行 文本居中.
   // 4 鼠标悬浮到表格上时  #myjava 被选择!
   //文档加载完毕,才去执行,这样就能获得html内容了
   window.onload=function () {
      alert(document.getElementsByName("hobby").length);
      document.getElementById("hh2").innerText = "我的标题2";//这里也可以写innerHTML(标签,文本)
      //原生的css里是text-align js里变为驼峰了
      document.getElementById("zstd").style.textAlign = "center";
      document.getElementsByTagName("table")[0].onmouseover=function () {
         document.getElementById("myjava").checked="checked";//true 修改浏览器内存里的对象属性 及时的反应在浏览效果上
         //document.getElementById("myjava").setAttribute("checked","checked");//修改源码里的对象的属性
      }
   }
</script>

其它操作

增

//弹框输入新的武器名字.如果为空则不加,存在则不加,不存在才加
//创建新的li对象,设置文本,设置class 添加到ol里的最后面
function add() {
   let weapon = prompt("输入新武器的名字:","刀");
   if (weapon.length===0)return;//点了输入框上的取消
   let ollis = document.getElementsByClassName("olli");
   for (let olli of ollis) {
      if (olli.innerText==weapon){
         alert("已存在:"+weapon);
         return;//结束函数
      }

}
//for没有return则:武器不存在
let newli = document.createElement("li");
newli.innerText = weapon;
newli.setAttribute("class","olli");
//添加到ol里
document.getElementsByTagName("ol")[0].appendChild(newli);
}

增首位

//添加到最上面
function up() {
   let weapon = prompt("输入新武器的名字:","刀");
   if (weapon.length===0)return;//点了输入框上的取消

   let ollis = document.getElementsByClassName("olli");
   for (let olli of ollis) {
      if (olli.innerText==weapon){
         alert("已存在:"+weapon);
         return;//结束函数
      }

   }


   //for没有return则:武器不存在
   let newli = document.createElement("li");
   newli.innerText = weapon;
   newli.setAttribute("class","olli");
   if (ollis.length===0){
      document.getElementsByTagName("ol")[0].appendChild(newli);
   }else{
      //父 把 新子 加到 旧子之前
      document.getElementsByTagName("ol")[0].insertBefore(newli,ollis[0]);
   }
}

删

function del() {
   let del = prompt("指定要删除的武器?","");
   if (del.length===0){
      return;//取消了 或 使用了默认的空窜
   }
   let ollis = document.getElementsByClassName("olli");
   for (let olli of ollis) {
      if (olli.innerText===del){
         //删除 父删子
         document.getElementsByTagName("ol")[0].removeChild(olli);
         return;//删完了
      }
   }
   alert("列表中没有:"+del);
}

替换和清空

//替换最后
function rep() {
   let weapon = prompt("输入新武器的名字:","刀");
   if (weapon.length===0)return;//点了输入框上的取消
   let ollis = document.getElementsByClassName("olli");
   for (let olli of ollis) {
      if (olli.innerText==weapon){
         alert("已存在:"+weapon);
         return;//结束函数
      }

   }
   //for没有return则:武器不存在
   let newli = document.createElement("li");
   newli.innerText = weapon;
   newli.setAttribute("class","olli");

   if (ollis.length===0){
      document.getElementsByTagName("ol")[0].appendChild(newli);
   }else{
      //父 用 新子 替换 旧子(最后一个li)
      document.getElementsByTagName("ol")[0].replaceChild(newli,ollis[ollis.length-1]);
   }
}

//清空ol 里的li
function cle() {
   //                         内部的HTML代码为空串
   document.getElementsByTagName("ol")[0].innerHTML="";
}

Event

//复选框如果不选择就不让提交
//提交按钮绑定单击事件
//form对象可以绑定 submit提交事件
document.getElementById("send").onclick = function () {
   let hobbies = document.getElementsByName("hobby");
   let count = 0;
   for (let hobby of hobbies) {
      if (hobby.checked===true){
         count++;
      }
   }
   if (count===0){
      alert("至少选择一个!")
      event.preventDefault()
   }
}

//move是js里 封装的 事件对象,有很多属性可以调用,有阻止默认行为的方法
function momo(){
   //circle跟随鼠标移动而移动!
   //鼠标指针的坐标
   let x = event.clientX;//event为内置对象
   let y = event.clientY;
   document.getElementById("circle").style.left = x - 50+"px";
   document.getElementById("circle").style.top = y - 50+"px";//?????????????????????????
}
//演示 event对象 的 阻止默认行为的 方法
document.getElementById("a1").onclick = function () {
   let b = confirm("确定要打开百度吗?");
   if (b===false){
      event.preventDefault();
   }
}
document.getElementById("province").onchange = function () {
   alert("你选择的省份: "+document.getElementById("province").value);
}
document.getElementById("username").onfocus = function () {
   document.getElementById("username").style.color = "red";
}
document.getElementById("username").onblur = function () {
   document.getElementById("username").style.color = "black";
}

模态框

模态框就是一个层次,当显现出来的时候会把里层的东西遮盖掉,处理完,原先的内容才会被处理掉

let classValue = "";//用于记录 当前修改的是 哪一个人物
function update(obj) {
       classValue = obj.getAttribute("name");//获取name属性值
       let personalData = document.getElementsByClassName(classValue);
       document.getElementById("username").value = personalData[0].innerText;
       document.getElementById("age").value = personalData[1].innerText;
       document.getElementById("modal").style.display = "block";
   }

   function closeModal() {
       document.getElementById("modal").style.display="none";
   }

   document.getElementsByTagName("form")[0].onsubmit = function () {
       //必须要知道本次修改的是哪个人物.
       document.getElementsByClassName(classValue)[0].innerText = document.getElementById("username").value;
       document.getElementsByClassName(classValue)[1].innerText = document.getElementById("age").value;
       //关闭模态框
       closeModal();
       //阻止表单的跳转
       event.preventDefault();
   }

innerText与value

innerText 和 value 是HTML DOM元素的两个不同的属性，它们用于不同的目的：

innerText

innerText 属性用于获取或设置元素内的文本内容。它通常用于以下类型的元素：
- <p>
- <div>
- <span>
- <td>
- 任何其他可以包含文本内容的元素
使用场景：
- 当你需要获取或设置元素中显示的文本时。
- 当你不希望保留HTML标签，而只是想要文本内容时。
```
// 设置元素文本内容
document.getElementById('myElement').innerText = '新文本';

// 获取元素文本内容
let text = document.getElementById('myElement').innerText;
```
value

value 属性用于获取或设置表单元素的值。它通常用于以下类型的元素：
- <input>
- <select>
- <textarea>
- <button>
使用场景：
- 当你需要获取或设置用户在输入字段中输入的值时。
- 当你需要处理表单提交时，获取表单元素的值。
```
// 设置input的值
document.getElementById('myInput').value = '新值';

// 获取input的值
let value = document.getElementById('myInput').value;
```
总结
- 使用 innerText 来获取或设置元素中的文本内容，不包括HTML标签。
- 使用 value 来获取或设置表单元素的值，如输入框、选择框等。
需要注意的是，innerText 和 value 都不会获取或设置隐藏的HTML标签，如 <script> 或 <style> 标签的内容。此外，innerText 在不同浏览器中的行为可能会有所不同，例如，在旧版本的IE中，它会保留空格和换行符，而现代浏览器通常不会。

RegEx

内容检测

系统

<label for="username">username</label>
<input type="text" name="username" id="username" required="required" pattern="^\w{4,8}$"/>
<span id="usernameSpan">单词字符4-8位</span>

自定义函数模版

<form action="http://www.baidu.com" onsubmit="return chkALL()">
<label for="nickname">nickname</label>
<input type="text" name="nickname" id="nickname" onblur="chkNickname()"/>
<span id="nicknameSpan">昵称由3-6位英文字母组成</span>

<label for="some">some</label>
<input type="text" name="some" id="some" onblur="chkSome()"/>
<span id="someSpan">some由2-6位数字组成</span>
    ......
<input type="submit"  value="提交" />

</form>

function chkNickname() {
   return chkTemplate("nickname",/^[a-z]{3,6}$/i,"nicknameSpan","昵称由3-6位英文字母组成");
}

function chkSome() {
   return chkTemplate("some",/^\d{2,6}$/,"someSpan","some由2-6位数字组成");
}

function chkTemplate(inputId,regExp,spanId,regExpDis) {
   let val = document.getElementById(inputId).value;
   if (val.length === 0){
      document.getElementById(spanId).style.color = "red";
      document.getElementById(spanId).innerText = "必须填写此空";
   }else if (!regExp.test(val)){
      document.getElementById(spanId).style.color = "red";
      document.getElementById(spanId).innerText = regExpDis;
   }else{
      document.getElementById(spanId).style.color = "green";
      document.getElementById(spanId).innerText = "√";
   }
}

function chkALL() {
   return chkNickname() & chkSome();//总的检测要与上 所有的组件的这种验证的函数
}

Browser 对象

让浏览器进行跳转页面的方式

超链接 a
表单 form 的 action 属性指定跳转到的页面
window.open() 在新标签页打开新文档,老文档还在
window.location.href 在当前页面加载新的文档,有历史记录
window.location.assign() 在当前页面加载新的文档,有历史记录
window.location.replace() 使用新文档替换当前页面,不保留被替换的历史记录
其他…

Window

Window 对象表示浏览器中打开的窗口

弹框
- 警告框 alert() 信息
- 确认框 confirm() 确定或取消
- 确认框 prompt() 输入信息

延时执行和周期执行

setTimeout() 延迟执行

setInterval() 周期执行

function setTimeContent(){
   let now = new Date().toString();
   document.getElementById("m").innerText = now;
}
//周期执行的引用              注意这里周期执行的方法 要写字符串形式
let myInterval = window.setInterval("setTimeContent()",1000);

function sstart() {
   let myInterval = window.setInterval("setTimeContent()",1000);
}
function sstop() {
   window.clearInterval(myInterval);
}
let times = 4;
function show() {
   document.getElementById("hh2").innerHTML = times-- + "s 之后自动跳转到CCTV,如没有跳转,手动进行" +
         "<a href='http://www.cctv.cn' target='_self'>CCTV</a>"
}
window.setInterval("show()",1000);

open()

打开一个新的浏览器窗口或查找一个已命名的窗口。

<body>
   <h2 onclick="openNewWindow()">点击标题新开窗口</h2>
   <button onclick="closeNew()">点我关闭那个新开的窗口</button>
</body>
<script type="text/javascript">
   let newWindow = "";
   function openNewWindow() {
      let url = "http://www.cctv.com";
      //window.open(url);//默认在浏览器的新标签页打开
      newWindow = window.open(url,"",",toolbar=1,menubar=1,resizable=no",true);
   }

   function closeNew() {
      newWindow.close();
   }
</script>

History

<body>
   <h1>2009年</h1>
   <a href="21h.html">去看历史</a><br /><!-- 打开新页面 -->
   <a href="23h.html">去看未来</a><br />
   
   <hr>
   <button id="btn1" onclick="his()">去看历史</button>
   <button id="btn2" onclick="fu()">去看未来</button>
</body>
<script type="text/javascript">
   function his() {
      window.history.go(-1);//back()  回退页面
   }

   function fu() {
      window.history.go(1);//forward();
   }
</script>

Location

<body>
   <button id="btn1" onclick="replaceNow()">替换当前页面,并不留历史记录</button><br />
   <button id="btn2" onclick="mknewhtml()">加载新文档</button><br />
</body>
<script type="text/javascript">
   function replaceNow(){
      //window.location.replace("http://cctv.cn");//使用新文档 替换当前 页面,不保留被替换的历史记录
   }
   function mknewhtml(){
      //window.location.href = "http://cctv.cn";//在当前页面 加载 新的文档
      //window.location.assign("http://xuexi.cn")//在当前页面 加载 新的文档
   }

       document.getElementById("m").innerText = now;
    }
    //周期执行的引用              注意这里周期执行的方法 要写字符串形式
    let myInterval = window.setInterval("setTimeContent()",1000);
    
    function sstart() {
       let myInterval = window.setInterval("setTimeContent()",1000);
    }
    function sstop() {
       window.clearInterval(myInterval);
    }
    let times = 4;
    function show() {
       document.getElementById("hh2").innerHTML = times-- + "s 之后自动跳转到CCTV,如没有跳转,手动进行" +
             "<a href='http://www.cctv.cn' target='_self'>CCTV</a>"
    }
    window.setInterval("show()",1000);
    ```



- open() 

  打开一个新的浏览器窗口或查找一个已命名的窗口。

```html
<body>
   <h2 onclick="openNewWindow()">点击标题新开窗口</h2>
   <button onclick="closeNew()">点我关闭那个新开的窗口</button>
</body>
<script type="text/javascript">
   let newWindow = "";
   function openNewWindow() {
      let url = "http://www.cctv.com";
      //window.open(url);//默认在浏览器的新标签页打开
      newWindow = window.open(url,"",",toolbar=1,menubar=1,resizable=no",true);
   }

   function closeNew() {
      newWindow.close();
   }
</script>

History

<body>
   <h1>2009年</h1>
   <a href="21h.html">去看历史</a><br /><!-- 打开新页面 -->
   <a href="23h.html">去看未来</a><br />
   
   <hr>
   <button id="btn1" onclick="his()">去看历史</button>
   <button id="btn2" onclick="fu()">去看未来</button>
</body>
<script type="text/javascript">
   function his() {
      window.history.go(-1);//back()  回退页面
   }

   function fu() {
      window.history.go(1);//forward();
   }
</script>

Location

<body>
   <button id="btn1" onclick="replaceNow()">替换当前页面,并不留历史记录</button><br />
   <button id="btn2" onclick="mknewhtml()">加载新文档</button><br />
</body>
<script type="text/javascript">
   function replaceNow(){
      //window.location.replace("http://cctv.cn");//使用新文档 替换当前 页面,不保留被替换的历史记录
   }
   function mknewhtml(){
      //window.location.href = "http://cctv.cn";//在当前页面 加载 新的文档
      //window.location.assign("http://xuexi.cn")//在当前页面 加载 新的文档
   }