文章目录

  • 一、HTML
    • 1.1 文档结构
    • 1.2 标题标签
    • 1.3 文本标签
    • 1.4 图像标签
    • 1.5 超链接标签
    • 1.6 锚点跳转
    • 1.7 列表标签
    • 1.8 表格标签
    • 1.9 表格标签练习
    • 1.10 表单标签
    • 1.11 表单标签练习
  • 二、CSS
    • 2.1 css 简介
    • 2.2 标签的引入方式:
    • 2.3 选择器
    • 2.4 文字设计样式
    • 2.5 背景或者标签的样式
    • 2.6 练习
    • 2.7 列表的样式设计
    • 2.8 表单与表格的练习
    • 2.9 display显示设计
  • 三、JavaScrip
    • 3.1 JavaScrip简介
    • 3.2 变量与数据类型
    • 3.3 字符串类型
    • 3.4 运算符
    • 3.5 分支语句
    • 3.6 循环
    • 3.7 JS中的函数
    • 3.8 JS中的对象类型
    • 3.9 DOM
    • 3.10 DOM对文档元素的增删
    • 3.11 事件
    • 3.12 事件案例
    • 3.13 定时器
    • 3.14 jQuery
    • 3.15 jQuery动画

一、HTML

1.1 文档结构

<!-- 注释 html 快捷键 command + / (ctrl + /) -->
<!-- DTD 文档类型声明 Document Type Define将当前文档声明为HTML文档-->
<!DOCTYPE html><!-- HTTML 文档开始位置 -->
<html><!-- 文档头部设置: 文档编码, 文档标题, 文档中引入的文件等等 --><head><meta charset="utf-8"><title>文档结构</title></head><!-- 在文档中呈现的内容都是放在body中 --><body><p>hello</p></body><!-- HTML文档结束位置 -->
</html>

1.2 标题标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标题标签</title></head><body><!-- hi标签i是数字, 由1-6.--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!-- 分割线 --><hr /></body>
</html>

1.3 文本标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文本标签</title></head><body><!-- 呈现一般文本: span 由span结合css给一些文字设计样式--><span>一般文本</span><!-- 加粗文本字体 b 或者 strong --><b>小明</b><strong>hello world</strong><!-- 斜体文字的文本 i 或者 em --><i>斜体</i><em>斜体2</em><!-- 段落标签 --><p>第一段</p><p>第二段</p></body>
</html>

1.4 图像标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图像标签</title></head><body><!-- 属性src -- 要显示图片的路径 [本地文件路径, 或者网路图片路径]相对路径(使用)参考物: 当前正在编辑的文件两个路径:. ---当前编辑这个文件所在的文件夹 HTML.. ---文件所在文件夹的上一级目录找文件的方式参照正在编辑的文件, 找与目的文件相同的一级目录, 找到这级目录之后,从这个目录为起点依次去定位到目的文件./img/000.png绝对路径C:\User\....width --- 设置图片的宽度height ---- 设置图片的高度width 和 height 设置一方即可, 另外一边会根据图片比例自适应alt ---- 图片路径错误提示title ---- 鼠标悬浮提示语, 可以应用到所有标签--><img src="./img/000.png" width="200"><img src="https://scpic.chinaz.net/files/pic/pic9/202103/apic31350.jpg" width="300" alt="图片显示失败" title="我被鼠标盯上了"></body>
</html>

1.5 超链接标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>超链接标签</title></head><body><!-- 属性href --- 设置连接地址可以使网络地址, 也可以是本地的html的文件地址target --- 设置的是链接地址显示的位置, 默认是当前页面中显示_blank -- 新建一个空白的界面, 在界面中显示指定具有某个名字的窗口中显示 --- --><a href="https://www.baidu.com">百度一下1</a><a href="https://www.baidu.com" target="_blank">百度一下2</a><a href="https://www.baidu.com" target="_blank" name="custom">跳转到指定窗口</a><!-- 内嵌窗口 --><iframe src="http://www.360.com" name="custom"></iframe><img src="img/000.png" width="400" ><!-- 如何让一张图片具有链接性 --><a id="xiaoming" href="https://www.baidu.com"><img src="./img/000.png" width="200" /></a></body>
</html>

1.6 锚点跳转

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>锚点跳转</title><!-- 引入一个style 标签 --><style type="text/css">/* css代码 *//* 标签名称进行定位 --- 选择器*/div{/* 相对于窗口进行定位 */position: fixed;/* 定位位置 */bottom: 0;right: 0;/* 背景颜色 */background-color: pink;/* 文字颜色 */color: red;/* 设置内边距: 变迁边缘与内容之间的边距 */padding: 10px;/* 宽度 px像素 *//* width: 150px; *//* 设置内容居中 */text-align: center;}</style></head><body><!-- div 区 块 --><div><a href="#first">第一张图片</a><!-- 换行标签 --><br><a href="#second">第二张图片</a><br><a href="#third">第三张图片</a><br><a href="#forth">第四张图片</a><br><!-- 跳转到其他html中的标签位置 xiaoming 的位置 --><a href="./5.超链接标签.html#xiaoming">第五张图片</a><br></div><!-- id属性: 建立a和目的标签之间的关系 --><img src="img/000.png" width="1000" id="first"><img src="img/007.png"  width="1000" id="second"><img src="img/023.png"  width="1000" id="third"><img src="img/11.png"  width="1000" id="forth"></body>
</html>

1.7 列表标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表标签</title></head><body><!-- 1. 有序列表ol -- 列表li -- 列表的元素2. 无序列表ul -- 列表标签li -- 列表元素3. 自定义列表dl -- 列表标签dt -- 列表元素dd -- 对列表元素的解释--><!-- 1. 有序列表 属性 type --- 设置有序的符号默认是1 ---- 数字符号A ---- 大写英文字母a ---- 小写英文字母I ---- 大写罗马符号i ---- 小写罗马符号--><ol type="i"><li>西瓜</li><li>榴莲</li><li>香蕉</li></ol><!-- 2. 无序列表 type : desc -- 默认 实心黑点circle -- 圆圈square 实心黑框--><ul type="square"><li>热巴</li><li>杨紫</li><li>赵丽颖</li></ul><!-- 3. 自定义列表 --><dl><dt>苹果</dt><dd>富含果酸, 解决坏心情</dd><dt>香蕉</dt><dd>缓解便秘良方</dd></dl></body>
</html>

1.8 表格标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格标签</title></head><body><!-- table --- 表格标签tr --- 行td --- 单元格th --- 标题单元格thead --- 表格头 默认: 表头 -- 表body -- 表尾tbody --- 表格体tfoot --- 表格尾caption --- 表格的标题--><!-- table 的属性border -- 设置边框线的线宽 默认是0width -- 设置表格宽度height -- 设置表格高度cellpadding -- 设置单元格之间的缝隙--><table border="1" width="500" height="450" cellspacing="0"><thead><tr><!-- 标签名*数量 tab键就能生成对应个数的标签 --><th width="200" height="50">姓名</th><th>年龄</th><th>性别</th><th>成绩</th></tr></thead><tr height="200"><th>小米</th><th>12</th><!-- style 只作用于这里, 不作用域全局 --><!-- rowspan 占几行, 合并 行-单元格 --><th style="background-color: #FF0000; color: aqua;" rowspan="2">男</th><th>98</th></tr><tr><!-- colspan 占几列, 合并 列-单元格--><th colspan="2">小花</th><!-- <th>29</th> --><!-- <th>女</th> --><th>78</th></tr></table><!-- 父标签>子标签*数量>子标签*数量 例如:table>tr>th*4 --><!-- table>tr*3>th*4 tab 三行四列 --></body>
</html>

1.9 表格标签练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简历</title></head><body><!-- 练习: 写个简历 --><table border="2" width="800" height="350" cellspacing="0"><tr><th rowspan="4"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.meituan.net%2Fdpmerchantpic%2F8cbeaa3841daef52b9e7cf0dc32f248c3058279.jpg&refer=http%3A%2F%2Fp0.meituan.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645109303&t=392d0b3b0dac8d924081643cedaf6d2c" height="220" align="center"></th><th>姓名</th><th>小明</th></tr><tr><th>手机号</th><th>188 8888 8888</th></tr><tr><th>邮箱</th><th>xiaoming@163.com</th></tr><tr><th>毕业院校</th><th>北京大学</th></tr><tr height="120"><th>个人评价</th><th colspan="2" align="left"> 性格开朗,工作认真负责,细心,有很强的职责心和进取心,头脑灵活,不怕吃苦,理解潜力强,能够很好的处理同事的关系,具有强烈的团队合作精神,并能承担必须的工作压力。</th></tr></table></body>
</html>

1.10 表单标签

​ 表单标签的作用:
​ 用来收集用户信息数据的
​ 组成:
​ 表单标签 – 服务器[收集数据的网址] 和 收集数据的方式[客户端提交数据的方式]
​ 提交数据的方式:
​ get – 获取数据
​ 提交到服务器的数据会通过?接受数据的字段名1=提交的数据值1&字段名2=提交的数据值2
​ post – 提交上传数据
​ 相对于get比较安全一些
​ 常见于: 注册 登录 上传头像 上传照片 修改昵称等
​ 表单域 – 采集用户信息的
​ 表单按钮 – 提交或者重置用户信息的

 <body><!-- 属性: action 设置服务器地址 method: 设置数据提交的方式--><form action="" method="get"><!-- input -- 样式有多种, 样式不同, 作用不同属性type --- 赋予不同类型值, 就有不同的功能placeholder --- 空白提示符name --- 提交的字段: 设置服务器接受表单域内容的字段名value --- input的内容值, 提交的数据--><!-- 普通文本输入框 type=text --><div><input type="text" placeholder="请输入用户名" name="wd" id="" value="123" /></div><!-- 密文框 type=password --><div><input type="password" name="psw" placeholder="请输入密码"/></div><!-- 邮箱框 --><div><input type="email" placeholder="请输入邮箱" name="email" /></div><!-- 单选框 --><div><!-- 属性: checked 默认选中某个选项 --><input type="radio" name="sex" value="boy"/> 男<input type="radio" name="sex" value="girl" checked/> 女</div><!-- 复选框 checkbox 可以选择多个 --><div><h4>挑选喜欢的水果</h4><input type="checkbox" name="like" value="香蕉"> 香蕉<input type="checkbox" name="like" value="芒果"> 芒果<input type="checkbox" name="like" value="西瓜"> 西瓜<input type="checkbox" name="like" value="榴莲"> 榴莲<input type="checkbox" name="like" value="苹果"> 苹果</div><!-- 下拉菜单 --><div><select name="city"><h4>籍贯</h4><option value ="beijing">北京</option><option value ="shanghai">上海</option><option value ="tianjin">天津</option><option value ="shenzhen">深圳</option></select></div><!-- 日期 --><div><input type="date" name="time" /></div><!-- 普通按钮 --><div><input type="button" value="普通按钮"/></div><!-- 选取文件 --><div><input type="file" name="file"/></div><!-- 文本域 style="resize: none; 不允许调整大小--><textarea rows="10" cols="100" style="resize: none;" name="comment"></textarea><!-- 表单按钮 --><div><input type="submit" /></div></form></body>

1.11 表单标签练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="" method=""><table border="1", cellspacing="0" width="500" height="300" style="text-align: center;"><tr><td>用户名</td><td><input type="text" name="username" placeholder="请输入用户名"/></td></tr><tr><td>密码</td><td><input type="password" name="psw" placeholder="请输入密码"/></td></tr><tr><td>性别</td><td><input type="radio" name="sex" value="男" /> 男<input type="radio" name="sex" value="女" /> 女<input type="radio" name="sex" value="未知" checked /> 未知</td></tr><tr><td>籍贯</td><td><select name="city"><option value="北京">北京</option><option value="上海">上海</option><option value="深圳">深圳</option><option value="广州">广州</option></select></td></tr><tr><td>头像</td><td><input type="file" name="icon" /></td></tr><tr><td colspan="2"><input type="submit" name="" id="" value="注册" /></td><!-- <td></td> --></tr></table></form></body>
</html>

1.2

二、CSS

2.1 css 简介

CSS -- 层叠样式表Cascading Style Sheet 用于为html文档中的标签设计样式, 并且进行布局的选择器: 在CSS中查找定位要进行样式设计的标签的方式CSS设计标签样式的方式1. 行内引入 针对于对应的标签, 添加style属性<标签名 style="样式名:样式值;样式名:样式值;样式名:样式值;"></标签名>2. 内部引入在html文档中的head标签内嵌套一个style标签<style>选择器{样式名:样式值;样式名:样式值;}</style>仅作用于当前html文档3. 外部引入先单独创建CSS文件, 在css文件中使用选择器设计对应的样式在需要的html文档中的head标签中引入link标签通过link标签引入css文件<link rel=''stylesheet' href='css文件的路径' />谁引用作用于谁

2.2 标签的引入方式:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 内部引用 --><style>/* 标签名称选择器 */p{background-color: bisque;}</style><!-- 外部引用 --><link rel="stylesheet" type="text/css" href="./css/style.css" /></head><body><div><p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p><p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p><!-- 行内引用 --><p style="color: aqua;">侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p></div></body>
</html>

2.3 选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><style>/* 1.全局选择器: 定位的是所有标签 */*{background-color: #F0F8FF;}/* 2.元素选择器: 根据标签名称定位标签 */p{color: brown;}/* 3.id选择器: 根据标签id属性值定位到标签id属性值是标签的唯一标识*/#one{/* 设置字体 */font-family: "楷体";}/* 4.类选择器: 根据标签的class属性值定位标签一个类可以作用于多个标签一个标签也可以根据情况归为不同的类*/.font{/* 设置字号 */font-size: 20px;}.italic{font-style: italic;}/* 5.属性选择器 选择器[属性名] --- 定位有指定属性的标签*/p[title]{border: 1px solid #FF7F50;}/* 选择器[属性名='指定属性值'] 属性正好等于某个值选择器[属性名^='值'] 以指定的值开头选择器[属性名$='值'] 以指定的值结尾选择器[属性名~='值'] 包含以指定内容 包含指定的单词[这个内容前后不能连接字符,汉字, 需要有空格间隔]选择器[属性名*='值'] 包含指定内容*//*水平偏移垂直偏移虚化度 -- 值越大越模糊阴影颜色*//* p[title ='第三段']{text-shadow: 3px 3px 10px red;} */p[title*='第']{text-shadow: 3px 3px 10px red;}/* 复合选择器 *//* 1.包含选择器查找直接子标签 父标签选择器 > 子标签选择器 [定位到对应的子标签]查找后辈标签[包含子标签] 先辈选择器 后辈选择器 [定位到对应的后辈标签]*//* 儿子 */div > span{color: #A52A2A;}/* 后辈 */div span {font-size: 18px;}/* 2.组合选择器选择器1,选择器2,..选择器{}*/#one, .font, span{font-weight: bold;}</style></head><body><div><!-- 类与类之间使用空格隔开 --><p id="one" class="font italic" title="出师表 第 一 段">先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p></div><p class="italic" title="abc 123">宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p><p class="font" title="第三 段">侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p><div><!-- 孙子辈 --><p> 将军向宠，性行淑均，晓畅军事，试用于昔日，<span>先帝</span> 称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。 </p><!-- 兄弟辈子 --><span>亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。</span><p> 臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。 </p><p> 先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。 </p><p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏，臣不胜受恩感激。 </p></div><span>今当远离，临表涕零，不知所言。</span></body>
</html>

2.4 文字设计样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{/* 文字颜色1. 英文颜色名2. rgb 调色 rgb(红,绿,蓝)rgba(红,绿,蓝, alpha) alpha 0-13. 十六进制的颜色值rgb颜色, 每个颜色 0 - 255255 转化为 16进制; #00-#ff#rrggbb  #110011 ---> #101*/color: #5F9EA0;/* 设置文字的字号 */font-size: 20px;/* 文字的字体 */font-family: '宋体';/* 文字是否斜体 */font-style: italic;/* 文字加粗 */font-weight: lighter;/* 文字划线 underline 下划线line-through 删除线none 去除下划线*/text-decoration: none;/* 文本缩进 */text-indent: 2em;/* 文本阴影 水平,垂直偏移; 模糊度; 阴影颜色*/text-shadow: 3px 3px 10px gray;}a{text-decoration: none;}</style></head><body><p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p><a href="https://www.baidu.com">出师表</a></body>
</html>

2.5 背景或者标签的样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{/* 背景颜色 *//* background-color: rgb(190, 210, 180); *//* 渐变色 linear-gradient(方向,颜色1, 颜色2, 颜色2...);方向不设置, 默认从上到下, to bottomto left 从右到左to top 从下到上to right 从左到右to top left 从右下到左上*//* background: linear-gradient(to top left, #ffebcd, #ffd700, #ffc0cb); *//* repeating-radial-gradient 默认是椭圆形width: 500px; 明显一些height: 500px;*//* background: repeating-radial-gradient( circle, #ffebcd, #ffd700, #ffc0cb); *//* 背景图片 *//* background: url(./img/1111.jpg); *//* 设置背景图片是否允许平铺no-repeat 不允许平铺repeat-xrepeat-y*/background-repeat: no-repeat;/* 不平铺的场景下, 设置背景图片的位置 水平位置 left center right 自定义数值充值方向 top center bottom 自定义数值*//* background-position: center top; *//* background: url(./img/1111.jpg) no-repeat, center, top; *//* 边框 边框线的宽度边框线的样式 solid 单实线 double 双实线 dottoed 点虚线 dashed 段虚线 inset 渐变色边框线的颜色  */border: 3px solid #5F9EA0;/* 单独设置某一边 */border-bottom: 3px double #A52A2A;/* 切圆角 四个角上内切圆的半径*//* 左上与右下 *//* border-radius: 0px 20px; *//* 左上 右上 右下 左下 */border-radius: 10px 15px 0px;/* 边框阴影 */box-shadow: 3px 3px 0px red;/* 设置内边距 - 标签边缘与标签内容的边距 */padding: 10px;/* 外边距 --- 标签与标签之间的边距 */margin: 30px;/* 标签内容对齐方式 left 居左right 居右center 居中*/text-align: center;}input{/* 去除边框线 设置宽度为0即可 */border-width: 0px;}div{width: 300px;height: 300px;background-color: #FF7F50;border-radius: 0 50% 50% 50%;transform: rotate(-135deg);}</style></head><body><p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p><input style="text" placeholder="请输入内容" /><div></div></body>
</html>

2.6 练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* *{margin: 0px;} */h2{color: darkblue;}a{color: red;}.blue{color: blue;}.orange{color: orange;}.green{color: green;}#box{border: #00008B 10px solid;/* background: linear-gradient(to bottom, darkblue, blue); */box-shadow: 2px 2px 6px black;padding: 10px;}</style></head><body><div id="box"><div><h2>花千骨</h2><p>《花千骨》是由<a href="http://www.ciwen.com.cn/" target="_blank">慈文传媒</a>集团制作并发行，<span class="blue">林玉芬、高林豹、梁胜权</span class="blue"> 联合执导，<span class="blue">霍建华、赵丽颖</span> 领衔主演，<span class="orange">蒋欣、杨烁</span> 特别出演，<span class="green">张丹峰、马可、李纯、鲍天琦、安悦溪、徐海乔</span> 等主演的古装玄幻仙侠剧。该剧改编自fresh果果同名小说，讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐恋 [1]  。该剧于2015年6月9日起每周二、周三晚10点在 <span class="orange">湖南卫视</span> 的钻石独播剧场播出。</p><img src="./img/huaqiangu.jpg" width="300" /></div><div><h3>主要演员</h3><div><img src="./img/11.webp" height="300" /><img src="./img/22.webp" height="300" /></div></div></div></body>
</html>

2.7 列表的样式设计

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>li{background-color: red;/* 项目符号和内容是一体的, 可以设置为inside */list-style-position: inside;/* 自定义项目符号为图片 */list-style-image: url(./img/333.png);/* 去除项目符号¿ */list-style: none;}</style></head><body><!-- --><ol><li>香蕉</li><li>大鸭梨</li><li>芒果</li><li>苹果</li></ol></body>
</html>

2.8 表单与表格的练习

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>textarea{resize: none;width: 480px;}table{background: cadetblue;text-align: center;width: 600px;height: 350px;}</style></head><body><form method="post"><table border="1" cellspacing="2"><tr><th width="100">姓名</th><th><input type="text" name="username" /></th><th>姓名</th><th><select name="sex"><option>--请选择性别--</option><option value="男">男</option><option value="女">女</option></select></th></tr><tr><th>手机号</th><th><input type="text" name="phone" /></th><th>电子邮箱</th><th><input type="email" name='email' /></th></tr><tr><th>教育成都</th><th><select name="edu"><option >小学</option><option >初中</option><option >高中</option><option >大专</option><option >本科</option></select></th><th>工作职位</th><th><input type="text" name="job" /></th></tr><tr><th>工作城市</th><th><select name="city"><option >--请选择城市--</option><option >北京</option><option >上海</option><option >深圳</option><option >广州</option></select></th><th>期望薪资</th><th><select name="salary"><option >--选择区间--</option><option >6k-10k</option><option >10k-15k</option><option >15k-20k</option><option >20k-30k</option></select></th></tr><tr><th>自我介绍</th><th colspan="3"><textarea rows="" cols="" name="introduce"></textarea></th><!-- <th></th><th></th> --></tr><tr><th>特长</th><th colspan="3"><textarea rows="" cols="" name="specialty"></textarea></th><!--  <th></th><th></th> --></tr><tr><th>地址</th><th colspan="3"><textarea rows="" cols="" name="address"></textarea></th><!-- <th></th><th></th> --></tr></table><input type="submit"/></form></body>
</html>

2.9 display显示设计

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span,a{background-color: red;color: white;display: inline-block;width: 300px; /* 设置宽高无效 */}p{background-color: #5F9EA0;color: white;width: 300px;height: 100px;/* display: block; *//* 值 0-1 0完全透明 1完全不透明 *//* opacity: 0; */}img{width: 100px;display: block;}</style></head><body><!-- display 设置标签显示的情况根据显示的情况对标签进行分类块标签: block占用了父标签的整体宽度, 在前后都有换行符[独占一行] 高度是由内容进行填充 设置宽高有效例如: div p li tr h1内联标签: inline宽高都是由内容自适应的, 不携带换行符, 设置宽高无效例如: span a b i行内-块级标签 inline-block宽高都是有内容自适应的, 不携带换行符, 设置宽高有效例如: input img隐藏标签:nonedisplay 隐藏标签的特点 -- 标签的位置不会被保留还有另一种隐藏方式: opacity: 0; 设置透明度, 位置保留--><span>hello</span><p>nice to meet you</p><span>hello world</span><a href="https://blog.csdn.net/qq_31810357?spm=1001.2014.3001.5343">小韩哥的博客</a><img src="./img/1111.jpg"/></body>
</html>

三、JavaScrip

3.1 JavaScrip简介

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style></style></head><body><!-- JS 是web的编程语言，几乎所有的html页面都在使用JS在html文档中如何引入JS有两种方式：1.内部引入在head或者body中引入script标签，标签之间就是js的代码2.外部引入在head或者body中引入script标签，利用src属性导入已经存在的js文件--><script>// 行注释/*多行注释*/console.log('hello world')</script><script src="./js/main.js" type="text/javascript"></script></body>
</html>

3.2 变量与数据类型

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>/*变量---来源于数学鸡兔同笼:有35个头,94只脚,问有多少只鸡，多少只兔子?解： 设有x只鸡， y只兔子x + y = 352 * x + 4 * y = 942 * (35 - y) + 4y = 9470 + 2y = 94y = 12x = 35 - 12 = 23*/// JS中如何声明变量// var 变量名 = 值;/*数据类型类 -- 对具有共同特征的事物进行归类对象 -- 这一类下具体存在的某个实体数值类型Number对整数, 小数等进行的归类字符串类型String对文字信息,文本信息进行归类, 特点:需要使用引号包含,不区分单双引号'hello'布尔类型的数据Boolean对验证是否成立的状态进行归类, 只有两个值: true 和 false数组类型Array容器类型的数据, 使用[]包含的数据names = [姓名1, 姓名2, 姓名3]对象类型Object自定义一个类型,包含对应的特征和行为函数类型Function对具有独立功能的代码段的封装*/var number = 100console.log(typeof number)var text = '你好啊, html'console.log(typeof(text))var flag = trueconsole.log(typeof(flag))var nums = [12, 23, 34, 5]console.log(typeof(nums))</script></body>
</html>

3.3 字符串类型

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var s = 'hello nice to meet you';console.log(s);// 1. 获取字符串的长度console.log(s.length);// 2. 获取指定位置的字符, 长度为1的字符串是字符// 字符串是有序的序列: 添加顺序和显示顺序是一致的// 有序序列有一个特点: 序列的每个位置都有编号,编号从0开始console.log(s.charAt(s.length-2));// 3. 拼接字符串// 使用+号拼接 -- 可以和任意类型的数据进行拼接, 最后的结果都是字符串类型var append_s = s + 10 + true;console.log(append_s);// 使用concat进行拼接var concat_s = s.concat(10,'like', true);console.log(concat_s);// 4. 提取子串// 从指定位置提取指定长度的字串var sub = s.substr(3, 10);console.log(sub);// 从指定开始位置到指定的结束位置, [start, end)sub = s.substring(3, 10);console.log(sub);// 5. 切割字符串// 以指定字符为切割点, 将字符串切割成对应的段数var subs = s.split(' ');console.log(subs);// 6. 替换字符串, 替换的是查找到的第一个var replace_s = s.replace('nice','111');console.log(replace_s);// 7. 获取某个子串第一次出现的位置,如果不存在,获取的是-1var pos = s.indexOf('e');console.log(pos);// 8. 从指定位置开始第一次出现的位置pos = s.indexOf('e', 3);console.log(pos);/*练习:声明一个字符串s3 = 'good good study'1. 获取s这个字符串对应的位置2. 提取前4个字符串3. 提取后5个字符串4. 判断字符串中是否包含m这个字符*/var s3 = 'good good study';// 1.获取s这个字符串对应的位置var pos1 = s3.indexOf('s');console.log(pos1);// 2. 提取前4个字符串var s4 = s3.substring(0, 4);console.log(s4);// 3. 提取后5个字符串var s5 = s3.substr(s3.length-4, 4);console.log(s5);// 4. 判断字符串中是否包含m这个字符var s6 = s3.indexOf('m');console.log(s6)</script></body>
</html>

3.4 运算符

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>// 算数运算符/*+-*% -- 取余数自增 ++自减 --*/console.log(12 + 3)console.log(12 - 3)console.log(12 * 3)console.log(12 / 3)console.log(12 % 3)// 自增自减是针对于变量, 在变量原来的基础上自加1或者自减1//以自增为例/*变量++++变量单独写两个式子是没有任何区别的吗都是在原来的基础上加1在参与运算的时候存在区别变量++: 先取变量的值参与运算, 再对变量进行自加1++变量: 先对变量的值自加1, 再把变量的结果参与运算*/var a = 10;// a++;// ++a;// 参与运算var b = a++;console.log(b); // 11console.log(a); // 10var b = ++a;console.log(b); // 11console.log(a); // 11// 赋值运算符/*简单的赋值运算 =把等号右边的数据赋值给等号左边的变量符合赋值运算符+=-=*=/=%=先对变量进行对应的运算, 再把结果赋值给变量*/var m = 10; // 等号左边的变量是等待被赋值的var n = m + 1; // 等号右边的变量是取之前的值的变量参与运算的console.log(m);console.log(n);m += 1; // m = m+1console.log(m); //11m %= 3;console.log(m) // 2// 比较运算符/*>   判断前者是否大于后者>=  判断前者是否大于或者等于后者<   判断前者是否小于后者<=  判断前者是否小于或者等于后者==  判断两个数据的值是否相等=== 恒等  判断两个数据的值和类型是否相同!=  判断两个数据的值是否不相等!== 判断两个数据的值和类型是否不同比较运算符的结果是布尔类型*/var x = 10;var y = '10';console.log(x == y);  // trueconsole.log(x === y); // false// 逻辑运算符/*逻辑与 && 连接两个表达式之间是并且的关系, 两者同时成立结果才成立一假则全假短路原则:左边表达式不成立, 右边表达式不参与元素逻辑或 ||连接两个表达式之间是或者的关系, 两者有一方成立结果就成立一真则全真短路原则:左边表达式成立, 右边不参与运算逻辑非 !真变假 假变真!true = false!false = true*/var i = 10;var j = 11;var res = (j > i++) && (--j <= i);/*11 > 10 true , i = 1110 <= 11 true,  j = 10,  i = 11*/console.log(res); // trueconsole.log(i); // 11console.log(j); // 10i = 10;j = 11;res = (++i < j) && (j-- == i);/*11 < 11, false, i = 11, j == 11*/console.log(res); // falseconsole.log(i); // 11console.log(j); // 11// 练习var m = 11;var n = 10;var k = 9;res = (m > n++) && (n-- == k) && (k++ > n);/*11 > 10, true m = 11, n == 10m == k, false, m = 11, n = 10 不运算  m = 11, n = 10, k = 9*/console.log(res); // falseconsole.log(m); // 11console.log(n); // 10console.log(k); // 9// k = 9, n = 10, m = 11res = (k++ >= n) || (--m >= n++);/*9 >= 10, false , k = 1010 >= 10, true n = 11, m = 10, k = 10*/console.log(res); // trueconsole.log(m); // 10console.log(n); // 11console.log(k); // 10// 三元运算符/*条件表达式 ? 表达式1 : 表达式2条件表达式成立执行表达式1, 取表达式1的结果, 否则执行表达式2, 取表达式2的结果*/var p = 10;var q = 11;res = p >= q-- ? p++ : --q;/*10 >= 11 false , q = 10执行--q, --q = 9, res = 9, p = 10*/console.log(res); // 9console.log(p); // 10console.log(q); // 9</script></body>
</html>

3.5 分支语句

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>/*根据不同的条件完成不同的任务if 分支--- 如果发生某件事, 就做某个决定--- 如果发生某件事, 就做某个决定, 否则做另外一个决定--- 如果发生某件事, 就做某个决定, 否则如果发生另外一件事, 就做另一个决定...switch - caseswitch (表达式) {case 值1:操作1;break;case 值2:表达式2;break;...default:操作n;break;}表达式的结果是一个常量, 固定的数据拿这个固定的数据 与 case列出的值进行对比找到相同的那个case, 执行其中对应的操作, 遇到break结束整个语句如果没有一个case满足条件, 执行default*//*var age = prompt('请输入你的年龄');console.log(typeof(age)); // 不管输入的是什么数据, 都是字符串类型的// 将数据转化为整型age = parseInt(age);if (age > 18) {console.log('已满18周岁');} else if (age == 18) {console.log('刚好18周岁');} else {console.log('未满18周岁');}*/var age = parseInt(prompt('请输入你的年龄'));switch (age) {case 16:console.log('已满16周岁');break;case 18:console.log('已满18周岁');break;default:console.log('年龄不存在');break;}</script></body>
</html>

3.6 循环

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">/*循环 -- 周而复始做某件事两种情况:1. 重复做几次之后, 达到要求就不再做了2. 没有终止一直重复做 -- 程序中不会出现js中提供的循环机制1. while循环2. do-while循环3. for循环while循环语法:while(循环条件){重复做的事情}do-while语法:do{}while(循环条件);与while的区别:不管成立条件与否, do-while至少会执行一次重复的操作while必须条件成立的情况,才会执行重复的操作for循环语法:for(循环的初识语句; 循环条件; 循环操作结束之后对初识数据的改变;){重复的操作;}*/// 跑10圈var num = 0;while(num < 10) {console.log('圈正在跑第' + (num + 1) + '圈');console.log('.........')num += 1;}console.log('终于跑完了');// 打印1-10的数据var num1 = 0;while(num1 < 10) {console.log((num1 + 1));num1 += 1;}// 绳子长3000米, 每天减一半, 问多少天以后绳长小于5米var day = 0;var l = 3000;do{l /= 2;day++;}while(l >= 5);console.log((day) + '天后, 绳长小于5米')// for循环实现for(var length=3000, day1 = 0; length >= 5; day1++){length /= 2; }console.log((day1) + '天后, 绳长小于5米')/*for --- 用于条件进行计数遍历的容器数据while --- 循环条件比较明确一些的代码量简洁*//*字符串 --- 串有序的容器型数据添加的顺序和显示的顺序是一致的有序容器有一个特点:荣琼的每个位置都有一个标号, 这个标号是从0开始的*/var s = 'dfservwq'console.log(s)// 依次获取每个位置的字符for(var i = 0; i < s.length; i++){console.log(s.charAt(i))}/*break 和 continuebreak -- 在JS中可以break应用于swich结构和循环结构作用:退出当前所在结构, 结束当前所在结构的语句continue --- 只对循环结构起作用结束当前次, 回到条件判断的位置, 如果条件成立, 继续下一次*//*一口井深7米, 一只青蛙白天向上爬3米, 晚上下滑2米, 问多少天后青蛙可以爬出*/var day = 0;var height = 0; // 青蛙的高度// while(height < 7){//  height += 3; // 白天//  height -= 2; // 晚上//  day++;// } 这样做不成立while(true){day++; // 进行天height += 3;// 判断青蛙是否出去if (height>=7){// 退出循环break;} else {// 白天没出去, 晚上下滑height -= 2;}}console.log(day);// 呈现字符串的奇数位置下标的字符// 如果遇到偶数位 跳过var s1 = 'hellodadwqwq';for(var i = 0; i < s1.length; i++){if(i % 2 == 0)continue;console.log(s1.charAt(i));}var i = 0;while(i < s1.length){if(i % 2 ==0){i++; // 在跳之前获取数据continue; // 遇到这个, 后面的代码不会执行}console.log(s1.charAt(i))i++;}/*循环嵌套*/// 另外一种呈现数据的方式 --- 在文档上呈现结果// document --- 文档对象, 直接操作html文档document.write('hello' + '<br />'); //写的是字符串document.write('<b>小米</b>'); // 写标签document.write('<p>段落</p>');// 在文档上呈现一行 ****** 6颗星, 要求一颗一颗呈现在文档上// for(var i=0; i< 6; i++){//    document.write('*');// }// document.write('<br />');// 循环嵌套// for(var m=0; m < 3; m++){//   for(var i=0; i< 6; i++){//        document.write('*');//   }//  document.write('<br />');// }/*有行有列的情况下, 需要使用循环嵌套外层控制行内层控制列*//**************** 规律: 列 = 6 - 当前行数*/for(var r=0; r <= 5; r++){for(var c=0; c < 6-r; c++){document.write('*');}document.write('<br />');}</script></body>
</html>

3.7 JS中的函数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">/**function 函数名(形参){函数体return 功能结果}*//*** 求两个数的最大值*/function maxValue(a, b){return a > b ? a : b;}var maxV = maxValue(10, 20);document.write((maxV));/** 练习:* 1.封装一个功能 呈现九九乘法表* 2.封装一个功能 获取字符串中的小写字母*/function nineTable(){for(var r=1; r < 10; r++){for(var c=1; c<=r; c++){document.write(c + '*' + r + '=' + (c * r) + '  ');}document.write('<br />')}}nineTable();function getLower(str){var lowerStr = '';for(var i=0; i < str.length; i++){// console.log(str.charAt(i));if(str.charAt(i) >= 'a' && str.charAt(i) <= 'z'){lowerStr += str.charAt(i);} }return lowerStr;}var lowerStr = getLower('HelloWorld');console.log(lowerStr);// 匿名函数/**function(形参){函数体return 功能结果}*/var f = getLower;var lastStr = f('hewdwqWFQEC');console.log(lastStr);var func = function(a, b){return a === b;}var res = func(12, 12);console.log(res);</script></body>
</html>

3.8 JS中的对象类型

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">/*** object* 拥有属性和行为的这种结构的数据*/// 给对象添加属性和行为var person = {// 属性name : '李白',age : 20,//行为eat : function(){// this --- 表示调用方法的对象console.log(this.name + '在吃饭');}}// 执行对象的行为person.eat();// 调用对象的属性console.log(person.name);// 声明一个学生对象/*** 属性: 学号 姓名 年龄 成绩* 行为: 学习 吃饭 睡觉*/function slp(){console.log('睡觉');}var student = {sid : '0001',name : '小白',age : 30,score : 98,study : function(){console.log('学习')},sleep : slp}student.sleep();student.study();</script></body>
</html>

3.9 DOM

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.red{color: red;}.player{color: aqua;}</style><script>//会在对应的时机自动调用 onload --- 页面加载完成的时候window.onload = function(){console.log('内容加载完成');// 获取文档上的内容 (必须放在onload之后,否则获取不到)}</script></head><body><div><p id="51" class="player">五一假期过去了</p><p>很困呀</p><p class="red">玩一把游戏吧</p></div><p class="red">醒醒吧 写代码</p><img /><script type="text/javascript">/*** DOM --- Document Object Model*          文档对象模型*             通过JS操作HTML文档中的内容*           重要的对象 document -- 控制文档的对象*//*** 通过JS获取文档上标签元素*       根据id获取*         根据类获取*      根据标签名称获取*       根据选择器获取*/// 获取文本内容// 根据id获取var id_node = document.getElementById('51');// alert(id_node.innerText); //弹窗console.log(id_node.innerText);// 根据类获取var class_nodes = document.getElementsByClassName('red');console.log(class_nodes);// 获取集合中的元素console.log(class_nodes[0].innerText);// 根据标签名称获取var name_nodes = document.getElementsByTagName('p');console.log(name_nodes);// 根据css选择器来获取元素var p_node = document.querySelector('#player');console.log(p_node);// 获取类为red的元素var red_node = document.querySelector('.red'); // 根据选择器定位满足选择器的第一个元素console.log(red_node);// 获取满足选择器的所有的元素var red_nodes = document.querySelectorAll('.red'); console.log(red_nodes);// 操作内容// 设置文本内容red_node.innerText = red_node.innerText + ' (我是被JS修改的)';// 操作样式red_node.style.backgroundColor = 'cadetblue';red_node.style.border = '2px dotted blue';// 通过JS添加图片// 获取Imgvar img_node = document.querySelector('img');// 对象设置属性img_node.src = './img/1111.jpg';</script></body>
</html>

3.10 DOM对文档元素的增删

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="box"><p>我心里想的只有工作</p></div><script type="text/javascript">// 创建标签元素var img_node = document.createElement('img');// 设置src属性img_node.src = './img/1111.jpg';// 添加到文档上 -- 由父标签操作// document.body.appendChild(img_node); //直接添加到body上// 把img添加到box上// 先找到boxvar box_node = document.getElementById('box');// 添加box_node.appendChild(img_node);// 删除 --- 有父标签操作var p_node = document.querySelector('#box p');box_node.removeChild(p_node);</script></body>
</html>

3.11 事件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div><button>点我呀</button></div><script type="text/javascript">/*** 在文档上触发了某些动作, 完成了对应的事情 --- 事件* 完成了对应的事情 --- 做了某件事 --- 执行了某个函数* 为标签添加事件*/// 找到按钮var btn = document.querySelector('button');// 添加事件 --- 为它设计一个操作, 当这个操作被触发的时候执行对应的函数// 这个函数不用手动调用, 会在适当的时机自动调用btn.onclick = function(){console.log('我被点击了');}</script></body>
</html>

3.12 事件案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ol id="list"></ol><button id="add">添加</button><button id="sub">移除</button><script>var friuts = ['苹果','鸭梨','芒果','葡萄'];/*** 点击添加依次把水果添加到列表上, 没有水果添加时, 提示已无可添加的水果;* 点击删除的时候,依次从上到下把列表的元素删除, 如果没有元素时, 提示水果已被删完*/// 1.获取列表var list = document.getElementById('list');// 2.添加的逻辑// 2.1 设置一个变量, 记录水果的位置var addPos = 0;// 2.2 为添加按钮添加点击事件var addBtn = document.getElementById('add');addBtn.onclick = function(){if(addPos < friuts.length) {// 在数组中取出对应位置的水果var fruit = friuts[addPos];// 创建展示数据的li元素var li_node = document.createElement('li');// 为li元素添加内容li_node.innerText = fruit;// 添加到列表上list.appendChild(li_node);// 设置下一个水果的位置addPos++;} else {alert('取完了')}}// 3.减少的逻辑var subBtn = document.getElementById('sub');subBtn.onclick = function(){var li_node = document.getElementsByTagName('li');var subPos = li_node.length - 1;if(subPos == -1){ alert('已减完');} else {list.removeChild(li_node[subPos]);subPos -=1;addPos -=1;}}</script></body>
</html>

3.13 定时器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box{width: 600px;// 对外间隙 auto根据父标签宽度与自身的宽度 左右自适应margin: 0px auto;/*将其设置为广告层的参照物*/position: relative;}#cd{width: 600px;height: 375px;background-color: #5F9EA0;/*定位 锚点 参照物父标签, 默认相对于body, 如果想相对于其相对的哪个父标签, 需要再对应的父标签上设置position, 让其具有参照的特性*/position: absolute;/*设置定位的位置topleftrightbottom*/top: 0px;right: 0px;left: 0px;bottom: 0px;color: white;/*文本靠右对齐*/text-align: right;}#cd > span{color: #FF0000;}</style></head><body style="background-color: #FF0000;"><div id="box"><img src="./img/1111.jpg" width="600"/><div id="cd">距离广告自动关闭还剩余 <span>10</span> 秒</div></div><script type="text/javascript">// 获取秒数所在的标签var span_node = document.querySelector('#cd span');// 获取最初的秒数var second = parseInt(span_node.innerText);// 获取广告层var cd_node = document.getElementById('cd');// 定时器// 定时器id = setInterval(定时器执行的操作, 定时器的时间间隔)var timeid = setInterval(function(){second --;// 把时间赋值到标签上span_node.innerText = format_time(second);// 做临界判断if(second == 0){// 关闭定时器clearInterval(timeid); // 根据定时器id清除对应的定时器// 广告层隐藏cd_node.style.display = 'none';}},1000);// 格式化数据function format_time(time){if(time >= 10) {return time;} else {return '0' + time;}}</script></body>
</html>

3.14 jQuery

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> --><!-- 导入JQ文件 --><script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script></head><body><!-- jQuery 库是对js的一个封装, 使用更少的代码, 完成更多的事情 --><p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p><p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。 </p><p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。 </p><!-- 在JS中使用 --><script>/*** 语法:*   $(选择器).操作*  *   $(选择器) -- 定位文档上的元素的, 获取的是所有满足这个选择器的元素*/console.log($('p'));// 操作文本// 获取文本console.log($('p').text());// 设置文本/*两种: 统一设置和分别设置*/// 统一设置// $('p').text('统一天下');// 分别设置$('p').text(function(index, content){console.log(index);// 标签编号console.log(content);// 标签内容// return '统一天下'; // return 是设置的内容if(index == 0){return '<<出师表>>' + content;} else if(index == 1){return content + '<<出师表>>';}})/*操作属性*/// 设置属性// $('p').attr('id', 'page'); //设置一个属性$('p').attr({'title': '这是出师表的内容','name' : '出师表'})//获取属性console.log($('p').attr('title'));// 操作样式// $('p').css('color', 'red'); // 设置一个样式$('p').css({'background-color' : 'red','color' : 'white'})// 获取样式console.log($('p').css('color'));// 事件$('p').click(function(){console.log($(this).text())})// hover 表示是悬浮和离开$('p').hover(function(){//悬浮$(this).css('color', 'blue');}, function(){//离开$(this).css('color', 'white');})</script></body>
</html>

3.15 jQuery动画

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 200px;background-color: #FF0000;}</style><script src="js/jquery-3.6.0.min.js" type="text/javascript"></script></head><body><div></div><button class="show">显示</button><button class="hide">隐藏</button><script>$('.hide').click(function(){// $('div').css('display','none');// $('div').hide(1000);// $('div').hide('slow');$('div').hide('slow', function(){alert('已经完成了隐藏动作')});})$('.show').click(function(){$('div').show('slow', function(){alert('已经完成了显示动作')});})</script></body>
</html>

Python3 - 补充知识点之HTML 、JavaScript、CSS (第五天)相关推荐

  1. Django补充知识点——用户管理

    内容概要 1.Form表单 2.Ajax 3.布局,Django母板 4.序列化 5.Ajax相关 6.分页 7.XSS攻击 8.CSRF 9.CBV.FBV 10.类中用装饰器的两种方法 11.上传 ...

  2. 前端笔记知识点整合之JavaScript（五）关于数组和字符串那点事

    前端笔记知识点整合之JavaScript(五)关于数组和字符串那点事 一.数组 1.1数组概念 数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整 ...

  3. 绝对经典的滑轮新闻显示(javascript+css)实现

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...

  4. 一张图理清 Python3 所有知识点

    如果你前几天一直有关注 GitHub Trending,那你应该会留意到「Python3 in one pic」这个开源项目. 很多人学习python,不知道从何学起. 很多人学习python,掌握了 ...

  5. JavaScript+Css实现的鼠标悬停时动态翻滚的紫色菜单导航

    代码简介: 鼠标悬停时动态翻滚的导航条,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 代码内容: <!DOCTYPE html PUBLIC " ...

  6. 一张图学会python3高清图-一张图理清 Python3 所有知识点

    如果你前几天一直有关注 GitHub Trending,那你应该会留意到「Python3 in one pic」这个开源项目. 很多人学习python,不知道从何学起. 很多人学习python,掌握了 ...

  7. 一张图学会python3语法-一张图理清 Python3 所有知识点

    如果你前几天一直有关注 GitHub Trending,那你应该会留意到「Python3 in one pic」这个开源项目. 很多人学习python,不知道从何学起. 很多人学习python,掌握了 ...

  8. javascript+css实现走马灯图片轮播器

    javascript+css实现图片轮播-走马灯式 该图片轮播器主要是通过改变"图片容器"(即下面html代码中的div class="innerBox")的m ...

  9. 基于JavaScript+css写一个简单的h5动态下雨效果

    基于JavaScript+css写一个简单的h5动态下雨效果 文章目录 什么是前端 展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端 前端它是一个工作,它的 ...

  10. JavaScript+css实现的喜庆活动邀请函多页面html源码

    大家好,今天给大家介绍一款,JavaScript+css实现的喜庆活动邀请函多页面html源码(图1).送给大家哦,获取方式在本文末尾. 图1 模板制作精良美观,主题非常喜庆,慢慢向下滑动,可以看到, ...

最新文章

  1. vba 编辑combobox内容_初识Visual Basic编辑器并建立一段简单的代码
  2. 第一个通过HCIEv3.0的咱的学员
  3. [云炬创业基础笔记]第七张创业资源测试12
  4. centos7安装最新版node
  5. 唐山师范学院计算机二级报名,2017年3月唐山师范学院计算机等级考试报名时间（河北）...
  6. 下载丨58页PDF，云和恩墨技术通讯（2020年12月刊）
  7. html日期选择格式 now,JavaScript的Date.now()方法怎么用？
  8. 微信生成专属海报（专属二维码）
  9. mac 查看环境变量_Mac开工利器Homebrew介绍
  10. 学习“基于深度学习的故障诊断”开源
  11. 新加坡国立大学计算机系访学,从实践中来，到实践中去——记新加坡国立大学访学项目...
  12. bat 批处理查看局域网闲置ip(ping或Arp列表结合)
  13. 百度搜索结果页面的参数 键盘重复速度(rsv_sug3)
  14. 漫画英语作文怎么写 计算机,漫画类的英语作文怎么写
  15. 三次握手和四次挥手详解
  16. wget OpenSSL: error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version
  17. Windows7 半角全角快捷键 修改方法
  18. 明治维新VS洋务运动-同途殊归的变革by高铭君儿
  19. Python 爬虫-抓取小说《鬼吹灯之精绝古城》
  20. 【BZOJ 4892】DNA

热门文章

  1. 计算机科学与技术工程师职称考试试题,2018年下半年网络工程师考试下午试题及答案...
  2. 几何畸变的类型_几何畸变分为（）和（）。
  3. 量化投资学习——一份高频因子的研报综述
  4. char * 与char []区别总结
  5. 文兵生日--2010-12-1
  6. 百度有啊 真的还有啊
  7. BVH with SAH (Bounding Volume Hierarchy with Surface Area Heuristic)
  8. 2021 Hexo+Next7最全搭建个人网站（合集）
  9. 以太坊编程入门实战-熊健-专题视频课程
  10. 为什么固态硬盘比机械硬盘读取速度快？