第一天学习的课件

最新推荐文章于 2024-05-21 23:21:19 发布
最新推荐文章于 2024-05-21 23:21:19 发布
阅读量151 收藏
点赞数
文章标签： 前端 html javascript

第一章——初始HTML

HTML—百科

  • HTML全称 : Hyper Text Markup Language

  • HTML的全称为超文本标记语言，是一种标记语言。

  • 它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

  • HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

  • HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的

  • 自1990年以来，HTML就一直被用作万维网（World Wide Web Consortium万维网联盟W3C）的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。

  • HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。

  • HTML是对大小写不敏感的,HTML与html是一样的；但是我们一般规定：书写时一律小写

  • HTML不需要编译,直接由浏览器执行

  • HTML文件必须使用html或htm为文件名后缀

HTML发展史

1989年，Tim Berners-Lee伯纳斯-李，规定HTML规则，并在1990年底写出浏览器和服务器软件。

  • HTML 1.0 -- 在1993年6月发为互联网工程工作小组(IETF)，工作草案发布(并非标准)

  • HTML 2.0 -- 1995年11月发布,于2000年6月发布之后被宣布已经过时

  • HTML 3.2 -- 1996年1月14日,W3C推荐标准

  • HTML 4.0 -- 1997年12月18日,W3C推荐标准

  • HTML 4.01(微小改进) -- 1999年12月24日,W3C推荐标准（太过于松懈）

  • XHTML 1.0 -- 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布

  • XHTML 1.1 -- 于2001年5月31日发布

  • XHTML 2.0 –2002年发布

  • HTML 5.0 -- 2008年发布

标签格式

<span style="background-color:#333333"><span style="color:#b8bfc6"><span style="color:#da924a"><!-- 1、双标签 --></span> 
<span style="color:#999977"><</span><span style="color:#7df46a">开始标签</span><span style="color:#999977">></span>标签修饰的内容<span style="color:#999977"></</span><span style="color:#7df46a">结束标签</span><span style="color:#999977">></span>
<span style="color:#da924a"><!-- 2、单标签 --></span>
<span style="color:#999977"><</span><span style="color:#7df46a">标签</span><span style="color:#999977">/></span>
<span style="color:#da924a"><!-- 3、特殊字符 --></span>
<span style="color:#84b6cb">&nbsp;</span></span></span>

标签关系

包含关系：(父子关系)

<span style="background-color:#333333"><span style="color:#b8bfc6"><span style="color:#999977"><</span><span style="color:#7df46a">外标签</span><span style="color:#999977">></span>
    <span style="color:#999977"><</span><span style="color:#7df46a">内标签</span><span style="color:#999977">></</span><span style="color:#7df46a">内标签</span><span style="color:#999977">></span>
<span style="color:#999977"></</span><span style="color:#7df46a">外标签</span><span style="color:#999977">></span></span></span>

并列关系：（兄弟关系）

<span style="background-color:#333333"><span style="color:#b8bfc6"><span style="color:#999977"><</span><span style="color:#7df46a">标签一</span><span style="color:#999977">></</span><span style="color:#7df46a">标签一</span><span style="color:#999977">></span>
​
<span style="color:#999977"><</span><span style="color:#7df46a">标签二</span><span style="color:#999977">></</span><span style="color:#7df46a">标签二</span><span style="color:#999977">></span></span></span>

示例：对一段文本进行标记，超文本标记语言-HTML

<span style="background-color:#333333"><span style="color:#b8bfc6">文本：今天是<加粗>2022</加粗>年的<变金黄>第一节课</变金黄></span></span>

样式：今天是2022年的第一节课

HTML—网页结构

主要组成部分：

<span style="background-color:#333333"><span style="color:#b8bfc6"><span style="color:#999977"><</span><span style="color:#7df46a">html</span><span style="color:#999977">></span>      <span style="color:#999977"></</span><span style="color:#7df46a">html</span><span style="color:#999977">></span>         网页的根标签
<span style="color:#999977"><</span><span style="color:#7df46a">head</span><span style="color:#999977">></span>      <span style="color:#999977"></</span><span style="color:#7df46a">head</span><span style="color:#999977">></span>         网页头部标签
<span style="color:#999977"><</span><span style="color:#7df46a">title</span><span style="color:#999977">></span>     <span style="color:#999977"></</span><span style="color:#7df46a">title</span><span style="color:#999977">></span>        网页标题标签
<span style="color:#999977"><</span><span style="color:#7df46a">body</span><span style="color:#999977">></span>      <span style="color:#999977"></</span><span style="color:#7df46a">body</span><span style="color:#999977">></span>         网页的内容标签</span></span>
<span style="background-color:#333333"><span style="color:#b8bfc6"><span style="color:#999977"><</span><span style="color:#7df46a">html</span><span style="color:#999977">></span>
    <span style="color:#999977"><</span><span style="color:#7df46a">head</span><span style="color:#999977">></span>
        <span style="color:#999977"><</span><span style="color:#7df46a">title</span><span style="color:#999977">></span>标题<span style="color:#999977"></</span><span style="color:#7df46a">title</span><span style="color:#999977">></span>
    <span style="color:#999977"></</span><span style="color:#7df46a">head</span><span style="color:#999977">></span>
    <span style="color:#999977"><</span><span style="color:#7df46a">body</span><span style="color:#999977">></span>
        内容
    <span style="color:#999977"></</span><span style="color:#7df46a">body</span><span style="color:#999977">></span>
<span style="color:#999977"></</span><span style="color:#7df46a">html</span><span style="color:#999977">></span></span></span>

小试牛刀：用新建文本文档写一个html网页

  1. 新建文本文档

  2. 在文本文档中搭建基本网页结构

  3. 在搭建好的网页结构中添加内容

  4. 更改文本文档的文件后缀

  5. 打开更改后的网页即可

使用vscode新建html页面

<span style="background-color:#333333"><span style="color:#b8bfc6"><span style="color:#b7b3b3"><!DOCTYPE html></span>
<span style="color:#da924a"><!-- 这是给浏览器看的，大致意思为这个文件是一个HTML5的文件 --></span>
<span style="color:#999977"><</span><span style="color:#7df46a">html</span> <span style="color:#7575e4">lang</span>=<span style="color:#d26b6b">"en"</span><span style="color:#999977">></span>
​
<span style="color:#999977"><</span><span style="color:#7df46a">head</span><span style="color:#999977">></span>
    <span style="color:#999977"><</span><span style="color:#7df46a">meta</span> <span style="color:#7575e4">charset</span>=<span style="color:#d26b6b">"UTF-8"</span><span style="color:#999977">></span>
    <span style="color:#da924a"><!-- charset=字符集  UTF-8=中文的字符集 --></span>
    <span style="color:#999977"><</span><span style="color:#7df46a">title</span><span style="color:#999977">></span>标题<span style="color:#999977"></</span><span style="color:#7df46a">title</span><span style="color:#999977">></span>
<span style="color:#999977"></</span><span style="color:#7df46a">head</span><span style="color:#999977">></span>
​
<span style="color:#999977"><</span><span style="color:#7df46a">body</span><span style="color:#999977">></span>
    内容
<span style="color:#999977"></</span><span style="color:#7df46a">body</span><span style="color:#999977">></span>
​
<span style="color:#999977"></</span><span style="color:#7df46a">html</span><span style="color:#999977">></span></span></span>

更改标题图标

<span style="background-color:#333333"><span style="color:#b8bfc6"><<span style="color:#7df46a">link</span> <span style="color:#7df46a">rel</span>=<span style="color:#d26b6b">"icon"</span> <span style="color:#7df46a">type</span>=<span style="color:#d26b6b">"image/x-ico"</span> <span style="color:#7df46a">href</span>=<span style="color:#d26b6b">"图标路径"</span>></span></span>

  • rel : relation 联系 就是与此html网页有什么联系，是它的什么

  • href : 路径，图标从哪里来的

  • type : 固定格式（经本人测试，加不加都不影响效果，可能对代码的可移植性有影响）加上最好

HTML — 常用标签

块状标签

  • 纵向排列，独占一行

  • 长宽可调，默认情况下：宽自动向浏览器最左最右延伸。

  • 块可以套块和行（例：div）

行内标签

  • 水平排列，长宽不可调

  • 默认情况下：长宽以内容大小进行调节

  • 行只能套行（例：span）

基本常用标签

  • div div标签，一个没有任何默认属性的块状标签

  • span span标签，一个没有任何默认属性的行内标签

  • <h1>~<h6> h标题标签，自带加粗和字号，而且独占一行上下有间隔

  • <p> p段落标签，独占一行上下有间隔

  • <hr/> 水平线标签

  • <br/> 换行标签

  • &nbsp; 特殊字符，不需要加间括号

图像标签

  • <img> 属性：

    • src：路径

      • 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径（图片相对于HTML页面的位置）

        • 下级路径：<img src="文件夹/image.png">

        • 同级路径：<img src="./image.png">

        • 上级路径：<img src="../image.png">

      • 绝对路径（不推荐使用）

      • 网络路径

    • width：宽

    • height：高

      • 调宽不调高，调高不调宽。建议调图像的宽！！！

    • alt：当图像路径出错时，提示文字

    • title：可以悬浮提示

超链接标签

  • <a> 属性：

    • href：路径

    • target：跳转页面模式

    • name：锚点

<span style="background-color:#333333"><span style="color:#b8bfc6"><!-- 直接返回到顶部 -->
<a href="#top"></a>

<!-- 返回到锚点 -->
<a name="名字"></a>
<a href="#名字"></a>

<!-- 跨页面返回到锚点 -->
<a name="名字"></a>
<a href="网页路径#名字"></a>
</span></span>

注释和特殊符号

<span style="background-color:#333333"><span style="color:#b8bfc6">注释   方便阅读代码   浏览器自动忽略注释内容
vscode 常用快捷键： ctrl+/     ctrl+shilt+/
</span></span>
特殊符号字符实体示例
空格&nbsp;百度 | 新浪
大于号(>)&gt;如果时间>晚上6点，就坐车回家
小于号(<)&lt;如果时间<早上7点，就走路去上学
引号&quot;W3C规范中，HTML的属性值必须用成对的"引起来
版权符号&copy;© 2003-2013 阿里巴巴

HTML特殊字符编码对照表 http://www.jb51.net/onlineread/htmlchar.htm

W3C标准

标签名称、属性名称必须小写 标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合 属性值必须用引号引起来

html书写规范

  • 标签换行写法

    <span style="background-color:#333333"><div><span>span标签</span><p>段落标签</p></div>	<!-- 错误示范 -->
<div>
	<span>span标签</span>
	<p>段落标签</p>
</div>											<!-- 正确示范 -->
</span>

  • 标签需要关闭

    <span style="background-color:#333333"><div>
    <span>span标签	 <!-- 错误示范,错误原因：没有结束标签 -->
    <p>段落标签<p>		<!-- 错误示范,错误原因：结束标签书写不正确 -->
</div>
<div>
	<span>span标签</span>		 <!-- 正确示范 -->
	<p>段落标签</p>				<!-- 正确示范 -->
</div>
</span>

章节问题：

  1. 行标签是否能包含行标签？

  2. img是什么标签？行还是块？

  3. 网页内最基本的四个结构标签分别是什么？

  4. 图像路径属性名和超链接路径属性名分别是什么?

  5. 代码标签的两种关系分别是什么？

第二章 —— 初识CSS

为什么要使用css

使用css，可以让原始的页面即黑色文字页面变得丰富起来，漂亮起来，实现我们想要的排版布局的效果

CSS的优势

  • 内容与表现分离

  • 网页的表现统一，容易修改

  • 丰富的样式，使页面布局更加灵活

  • 减少网页的代码量，增加网页的浏览速度，节省网络带宽

  • 运用独立于页面的CSS，有利于网页被搜索引擎收录

CSS语法规则

CSS 规则集（rule-set）由选择器和声明块组成：

<span style="background-color:#333333"><span style="color:#b8bfc6">h1 {
    color: red;			/* 这就是一个声明 */
    font-size: 16px;
}
</span></span>

提示：在规则的最后一个声明后也加上分号是一个好习惯。

在向规则增加另一个声明时，就不必担心忘记再插入一个分号。

CSS文件配置

1、内联式

head标签的内部，写法在同一文件里，写在head里面，写style标签里面。

<span style="background-color:#333333"><span style="color:#b8bfc6"><html>
	<head>
        <title>Document</title>
        <style>
            h1{
                color: red;
            }
        </style>
    </head>
    <body>
    </body>
</html>
</span></span>

2、外联式

需要新建一个css 文件【.css 后缀的文件】使css和html关联起来即可。一个html文件，引入的CSS文件数量不限

  1. 链接式：使用link标签来链接css和html

    <span style="background-color:#333333"><link rel="stylesheet" type="text/css" href="./index.css">
</span>

  2. 导入式

    <span style="background-color:#333333">@import url('./index.css')     /* @import规则必须在CSS文档的开头 */
</span>
<span style="background-color:#333333"><span style="color:#b8bfc6">/* 文件名：index.css */
h1{
    color: blue;
}
</span></span>
<span style="background-color:#333333"><span style="color:#b8bfc6"><!-- 链接式  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
    <h1>我是h1</h1>
</body>
</html>
</span></span>
<span style="background-color:#333333"><span style="color:#b8bfc6"><!-- 导入式  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @import url('./index.css');
    </style>
</head>
<body>
    <h1>我是h1</h1>
</body>
</html>
</span></span>

链接式和导入式的区别

  • <link/>标签属于XHTML，@import是属于CSS2.1

  • 连接时符合html标签的，导入不是html标签

  • 连接样式表中不能在引入样式，而导入样式中还可以导入其他的样式表

  • 连接样式按他的位置加载的，而导入是先加载完标签才加载样式的

3、行内样式

<span style="background-color:#333333"><span style="color:#b8bfc6"><body>
    <h1 style="color:green;">我是h1</h1>
</body>
</span></span>

文件配置的层级关系

行内样式表>内部样式表=外部样式表

同级关系时，谁的执行顺序靠下执行谁

CSS 基础选择器

CSS通配符选择器

通配符选择器可以选中HTML内的所有元素

<span style="background-color:#333333"><span style="color:#b8bfc6">*{
    font-size:20px;
	color:red;
}
</span></span>

CSS 元素选择器

<span style="background-color:#333333"><span style="color:#b8bfc6">p {
    text-align: center;
    color: red;
}
</span></span>

CSS 类选择器

注：类选择器命名为英文，不能用中文不能以数字开头

使用 class 属性去标记要选择的元素

使用 . 声明类选择器

<span style="background-color:#333333"><span style="color:#b8bfc6">.center {
    text-align: center;
    color: red;
}
</span></span>

CSS id 选择器

注：id选择器名为为英文，不能用中文不能以数字开头

注：页面内不能有相同的 id 名

使用 id 去标记要选择的元素

使用 # 声明id选择器

<span style="background-color:#333333"><span style="color:#b8bfc6">#para1 {
    text-align: center;
    color: red;
}
</span></span>

类选择器和ID选择器允许以一种独立于文档元素的方式来指定样式。只有适当地标记文档后，才能使用这些选择器

所以使用这种选择器通常需要先做一些构想和计划。

总结：级别关系：ID > class > 元素

文本/字体样式

  1. color：文本颜色

    <span style="background-color:#333333">p {
	color: red;
}
</span>

  2. text-align：对齐方式

    <span style="background-color:#333333">p {
	text-align: left;
	text-align: center;  /* ★ */
	text-align: right;
}
</span>

  3. text-decoration：文字装饰（横线）

    <span style="background-color:#333333">p {
    text-decoration: none;  		/* 超链接去下划线 */
    text-decoration: overline;		/* 上横线 */
    text-decoration: line-through;	/* 中横线 */
    text-decoration: underline;		/* 下横线 */
}
</span>

  4. line-height：行高（文字垂直居中）

    <span style="background-color:#333333">p {
    line-height: 30px;
}
</span>

  5. font-size：字体大小

    <span style="background-color:#333333">p {
    font-size: 20px;
    font-size: 10vw;	/* vw固定文字在页面的大小，文字大小不随着页面的缩放而改变 */
}
</span>

  6. font-family：字体风格

    <span style="background-color:#333333">p {
    font-family: "Times New Roman", Times, serif,楷体,宋体,隶书;
}
</span>

  7. font-weight：字体粗细

    <span style="background-color:#333333">p {
    font-weight: bold;
}
</span>

背景属性

  1. background-color：背景颜色

    <span style="background-color:#333333">body {
    background-color: lightblue;
}
</span>

  2. opacity：透明度

    <span style="background-color:#333333">body {
    background-color: lightblue;
    opacity: 0.3;
}
</span>

  3. background-image：背景图像

    注：默认情况下，图像会重复，以覆盖整个元素。

    <span style="background-color:#333333">body {
    background-image: url("");
}
</span>

  4. background-repeat：消除背景重复

    <span style="background-color:#333333">body {
    background-repeat: no-repeat;	/* 无重复 */
    background-repeat: repeat-x;	/* 横向重复 */
    background-repeat: repeat-y;	/* 纵向重复 */
}
</span>

  5. background-position：背景定位

    <span style="background-color:#333333">body {
  background-image: url("");
  background-repeat: no-repeat;
  background-position: right top;
}
</span>
    属性值描述top
    top bottom left right center上下左右中
    20px 30px离左边20px 离上边30px

  6. CSS background - 简写属性★★★★★

    <span style="background-color:#333333">body {
	/* background: 颜色 路径 重复 定位 固定; */
    background: #ffffff url("tree.png") no-repeat right top;
}
</span>

伪类选择器语法

<span style="background-color:#333333"><span style="color:#b8bfc6">div:hover{
    background-color:red;	/* 悬浮时背景颜色变红 */
}
</span></span>

鼠标形状 cursor：

值说明
pointer小手
text文字光标
wait转圈
<span style="background-color:#333333"><span style="color:#b8bfc6">a:hover{
    cursor: pointer;	/* 悬浮时变小手 */
}
</span></span>

光标形状表：CSS cursor 属性

光标形状演示：W3School TIY Editor

练习：

  1. 分别使用不同的方式分别对<h1>、<h2>、<h3>标签调整不同的大小和颜色 (使用内联，外联，行内)

  2. 台历——使用背景图像的纵向平铺制作台历效果

  3. 竹子——使用背景图像的垂直平铺制作竹子效果

  4. 摩托车——使用背景固定制作效果

  5. 光标形状

第三章 —— 列表、表格

1、有序列表

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<span style="background-color:#333333"><span style="color:#b8bfc6"><ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>
</span></span>

示例：

<span style="background-color:#333333"><span style="color:#b8bfc6"><body>
    <ol>
        <li>代表委员建议降低个税最高边际税率，该降吗？怎么降？</li>
        <li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗</li>
        <li>中国进入“两会”时间 外国记者最关注啥？</li>
        <li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相</li>
    </ol>

    <!-- type 的取值为 A a I i  -->
    <ol type="a">
        <li>代表委员建议降低个税最高边际税率，该降吗？怎么降？</li>
        <li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗</li>
        <li>中国进入“两会”时间 外国记者最关注啥？</li>
        <li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相</li>
    </ol>

    <!-- start 规定了起始的数字  reversed表示从起始位置降序排列-->
    <ol start="4" reversed>
        <li>代表委员建议降低个税最高边际税率，该降吗？怎么降？</li>
        <li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗</li>
        <li>中国进入“两会”时间 外国记者最关注啥？</li>
        <li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相</li>
    </ol>
</body>
</span></span>

2、无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<span style="background-color:#333333"><span style="color:#b8bfc6"><ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>
</span></span>

示例：

<span style="background-color:#333333"><span style="color:#b8bfc6"><ul>
    <li>代表委员建议降低个税最高边际税率，该降吗？怎么降？</li>
    <li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗</li>
    <li>中国进入“两会”时间 外国记者最关注啥？</li>
    <li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相</li>
</ul>

<!-- type ='circle' 空心圆:square  实心正方形:disc  默认样式:实心圆-->

<ul type='circle'>
    <li>代表委员建议降低个税最高边际税率，该降吗？怎么降？</li>
    <li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗</li>
    <li>中国进入“两会”时间 外国记者最关注啥？</li>
    <li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相</li>
</ul>
</span></span>

  1. <ul></ul>或 <ol></ol>中的子元素只能嵌套<li></li>

  2. 直接在 <ul></ul>或 <ol></ol>标签内输入其他标签或者文字的做法是不可以的哦！

  3. <li>与</li>之间相当于一个容器，可以容纳所有元素。

  4. 列表会带有自己样式属性，可以使用CSS搞定！

3、自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<span style="background-color:#333333"><span style="color:#b8bfc6"><dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ......
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ......
</dl>
</span></span>

4、列表样式 （通过css 来修改列表的样式）

注意：ul 和 ol 本身带有 外边距和内边距。使用列表做布局的话，需要把内外边距清零！

list-style-type 属性指定列表项标记的类型。

<span style="background-color:#333333"><span style="color:#b8bfc6">ol{
	list-style-type:decimal-leading-zero;
}
</span></span>
值描述
none无标记。
disc默认。标记是实心圆。
circle标记是空心圆。
square标记是实心方块。
decimal默认是数字。
decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)
lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek小写希腊字母(alpha, beta, gamma等。)
lower-latin小写拉丁字母(a, b, c, d, e, 等。)
upper-latin大写拉丁字母(A, B, C, D, E, 等。)
hebrew传统的希伯来编号方式
armenian传统的亚美尼亚编号方式
georgian传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic汉字一二三
hiragana标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

list-style-image 属性将图像指定为列表项标记：

默认图标宽高为15*20px

<span style="background-color:#333333"><span style="color:#b8bfc6">ul{
    list-style-image: url("");
}
</span></span>

list-style-position 修改列表标识的位置

值描述
inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
<span style="background-color:#333333"><span style="color:#b8bfc6"><style type="text/css">
    ul.inside{
        list-style-position: inside
    }

    ul.outside{
        list-style-position: outside
    }
</style>
<!-- inside列表样式 -->
<ul class="inside">
    <li>曾经有一份真挚的爱情摆在我面前，但我没有珍惜，等到失去了我才后悔莫及，尘世间最痛苦的事莫过于此。如果上天可以给我再来一次的机会，我会对那个女孩说三个字：“我爱你!”如果非要在这份爱前加一个期限的话，我希望是一万年。</li>
    <li>Life is like a box of chocolates, you never konw what you're going to get. — — 生活就像一盒巧克力，你永远不知道你会得到什么。</li>
</ul>
<!-- outside列表样式 -->
<ul class="outside">
    <li>曾经有一份真挚的爱情摆在我面前，但我没有珍惜，等到失去了我才后悔莫及，尘世间最痛苦的事莫过于此。如果上天可以给我再来一次的机会，我会对那个女孩说三个字：“我爱你!”如果非要在这份爱前加一个期限的话，我希望是一万年。</li>
    <li>Life is like a box of chocolates, you never konw what you're going to get. — — 生活就像一盒巧克力，你永远不知道你会得到什么。</li>
</span></span>

list-style 简写属性,在一个声明中设置所有的列表属性，可以按顺序设置如下属性：

  • list-style-type

  • list-style-position

  • list-style-image

注意，列表会自带一些padding和margin属性。在必要时需要清除掉

表格

表格的基本结构：行、列、单元格

标签描述
<table></table>表格标签
<tr></tr>行标签
<td></td>单元格标签
<th></th>表头标签
<span style="background-color:#333333"><span style="color:#b8bfc6"><!-- 表格基本结构 -->
<table>
    <tr>
        <th>表头</th>
        <th>表头</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        ......
    </tr>
    ......
</table>
</span></span>
属性描述
border="1px"表格边框
cellspacing="10px"边框与边框之间的间距
cellpadding="10px"边框与内容之间的间距
align="center"行内或单元格内内容横向对齐方式
valign="center"行内或单元格内内容纵向对齐方式
width="600px"宽
height="200px"高
<span style="background-color:#333333"><span style="color:#b8bfc6"><!-- 表格基本结构 -->
<table border="1px" cellspacing="10px"  cellpadding="10px" width="600px" height="200px">
    <tr>
        <th>表头</th>
        <th>表头</th>
    </tr>
    <tr>
        <td align="center">单元格1</td>
        <td valign="top">单元格2</td>
        ......
    </tr>
    ......
</table>
</span></span>
属性描述
colspan跨列合并
rowspan跨行合并
<span style="background-color:#333333"><span style="color:#b8bfc6"><style>
    table {
        border: 1px solid black;
        width: 500px;
        height: 200px;
    }
    td {
        border: 1px solid black;
    }
</style>
<table>
    <!-- 第一行 -->
    <tr align="center">
        <th colspan="3">老一们的电话号码</th>
        <!-- <td>被第一个单元格合并掉了</td> -->
        <!-- <td>被第一个单元格合并掉了</td> -->
    </tr>

    <!-- 第2行 -->
    <tr>
        <td rowspan="2">普京大帝</td>
        <td>座机</td>
        <td>0379-8888 9999</td>
    </tr>

    <!-- 第3行 -->
    <tr>
        <!-- <td>被普京大帝顶掉了</td> -->
        <td>手机号</td>
        <td>169-3489-1548</td>
    </tr>

    <!-- 第4行 -->
    <tr>
        <td rowspan="2">窜西拜登</td>
        <td>座机</td>
        <td>0714-3399 4488</td>
    </tr>

    <!-- 第5行 -->
    <tr>
        <!-- <td>被窜西拜登顶掉了</td> -->
        <td>手机号</td>
        <td>177-9476-8246</td>
    </tr>
</table>
</span></span>

练习

  1. 制作品牌闪购效果

第四章 —— 表单

1、什么是表单

  • 表单用于收集用户的信息，是浏览器和用户之间沟通的桥梁。

  • 就是你在注册账号时，让你输手机号，输密码那个小框框，明白了吧

  • 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

  • HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

2、表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<span style="background-color:#333333"><span style="color:#b8bfc6"><form action="服务器url地址" method="提交方式get/post" name="表单名称">
  各种表单控件
</form>
例如：你需要把数据提交到 www.aaa.com 这个域名所对应的服务器上  http://www.aaa.com
</span></span>

常用属性：

  1. Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

  2. method 用于设置表单数据的提交方式，其取值为get或post。

  3. name 用于指定表单的名称，以区分同一个页面中的多个表单。

注意：每个表单都应该有自己表单域。

3、input 控件(重点)

<span style="background-color:#333333"><span style="color:#b8bfc6"><input type="控件类型" name="" value="" />
</span></span>

  • <input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。

  • 除了type属性之外，<input />标签还需要定义很多其他的属性，其常用属性如下表所示。

属性值描述
typetext单行文本输入框
typepassword密码输入框
typeradio单选框
typecheckbox复选框
typebutton普通按钮
typesubmit提交按钮
typereset重置按钮
typeimage图像形式的提交按钮
typefile文件域
typenumber数字文本框
checkedchecked预先选定复选框或单选按钮。
disableddisabled禁用 input 元素
maxlengthnumber规定输入字段中的字符的最大长度。
valuevalue属性规定输入字段的初始值
readonlyreadonly只能读 不能修改
hiddenhidden隐藏元素，用于接受值，但不显示在页面
autocomplete（H5）off属性规定表单或输入字段是否提示历史记录
form（H5）formname规定输入字段所属的表单
placeholder（H5）文本规定在文本框内提示输入的内容
<span style="background-color:#333333"><span style="color:#b8bfc6"><form action="bujibuji">
    <!-- 输入框 -->
    姓:
    <input type="text" name="firstname" value="" placeholder="请输入您尊贵的姓氏:"><br>
    名:
    <input type="text" name="lastname" value="SIR" disabled><br>
    字:
    <input type="text" name="lastname" value="二世嗣" readonly><br>

    <!-- 密码框 -->
    银行卡密码:
    <input type="password" name="bank" maxlength="6"><br>

    <!-- 单选框 -->
    <!-- 一组单选框可以写一样的name，这样一组内同时只能选择一个 -->
    性别:
    <input type="radio" name="sex" value="man" checked>男
    <input type="radio" name="sex" value="woman">女<br>

    <!-- 复选框 -->
    娱乐:
    <input type="checkbox" name="play" value="chicken">炸鸡
    <input type="checkbox" name="play" value="beer">啤酒
    <input type="checkbox" name="play" value="NBA">NBA<br>

    <!-- 文件选择器 -->
    <input type="file" name="file" id="file" value="文件" />

    <!-- 提交按钮 -->
    <br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
</span></span>

4、label标签

label 标签为 input 元素定义标注（标签）。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得焦点

for 属性规定 <label> 与哪个表单元素绑定。 for属性和被绑元素的id属性的值要一致

<span style="background-color:#333333"><span style="color:#b8bfc6"><label for="allName">姓名：</label>
<input type="text" name="allName" value="Yo Da Lee" id="allName"><br>

请选择性别：
<input type="radio" name="sex" id="man">
<label for="man">男</label> 
<input type="radio" name="sex" id="woman">
<label for="woman">女</label>
</span></span>

5、textarea 控件 (多行文本域 )

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<span style="background-color:#333333"><span style="color:#b8bfc6"><textarea cols="20" rows="20">
  	这是一个文本域内的初始内容
</textarea>
</span></span>

  • rows可以控制文本域的宽度

  • cols可以控制文本域的高度

6、下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<span style="background-color:#333333"><span style="color:#b8bfc6"><select>
  <option>选项1</option>
  <option>选项2</option>
  <option selected>选项3</option>
  ...
</select>
</span></span>

注意：

  1. <select></select>中至少应包含一对<option></option>。

  2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

button 元素

<span style="background-color:#333333"><span style="color:#b8bfc6"><button type="button" onclick="alert('快到碗里来')">点击我！</button>
<button type="button" onclick="console.log('你才到碗里去')">点击我！</button>
</span></span>

第五章 —— CSS 盒子模型

什么是盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。

  • Border(边框) - 围绕在内边距和内容外的边框。

  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。

  • Content(内容) - 盒子的内容，显示文本和图像 width height。

边框-border

边框可以设置：

情形效果
一个值四条边
两个值上下→左右
三个值上→左右→下
四个值上→右→下→左

  • 边框样式

    <span style="background-color:#333333">border-style:solid;
</span>
    属性描述
    dotted定义点线边框
    dashed定义虚线边框
    solid定义实线边框
    double定义双边框
    groove定义 3D 凹槽边框
    ridge定义 3D 凸线边框
    inset定义 3D inset 边框
    outset定义 3D outset 边框

  • 边框颜色

    <span style="background-color:#333333">border-color:red;
</span>

  • 边框宽度

    <span style="background-color:#333333">border-width:5px;
</span>

  • 边框简写

    • 注意简写时一定要写边框样式才有效果

    • 可以同时设置边框颜色、粗细、样式。前后没有顺序区别

    • <span style="background-color:#333333">border: 9px #F00 solid;
</span>

自适应宽度-width

  1. 内容最大宽度：max-content

  2. 内容最小宽度：min-content（不常用）

内边距-padding

内边距就是 盒子边框 与 盒子内容 之间的距离：

可以设置单个方向的内边距：

方向描述
padding-left左内边距
padding-top上内边距
padding-right右内边距
padding-bottom下内边距

并且如果你觉得一个边一个遍的设置过于麻烦，padding 同时支持简写方式。

<span style="background-color:#333333"><span style="color:#b8bfc6">padding: 5px 10px;
padding: 5px 10px 15px 20px;
</span></span>

百分比数值：

可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。

所以，如果父元素的 width 改变，它们也会改变。

<span style="background-color:#333333"><span style="color:#b8bfc6">padding: 10% 20%;
</span></span>

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

padding对行、块元素的影响

行内元素：只能左右设置，上下无效，虽然背景图增大，但是对文档流没有影响

块级元素：正常设置，没有影响，不会重叠

外边距-margin

外边距就是紧挨着 盒子边框 之外的空间：

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

外边距可以设置元素的单方向的边距：

方向描述
margin-left左外边距
margin-top上外边距
margin-right右外边距
margin-bottom下外边距

并且如果你觉得一个边一个遍的设置过于麻烦，margin 同时支持简写方式。

<span style="background-color:#333333"><span style="color:#b8bfc6">margin: 5px 10px;
</span></span>

margin扩展用法：

<span style="background-color:#333333"><span style="color:#b8bfc6">margin:auto;
/* 使元素水平居中 */
</span></span>

有些元素自带内外边距属性值，所以我们可以在不需要默认属性的时候用通配符去除他们自带的属性值：

<span style="background-color:#333333"><span style="color:#b8bfc6">* {
    margin: 0;
    padding: 0;
}
</span></span>

外边距合并：

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将合成伪一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

常见合并方式为：

  1. 同级元素外边距合并：p标签的外边距合并

  2. 父子元素外边距合并：父元素和子元素同时拥有外边距且外边距相遇时子元素外边距合并到父元素外边距中

注：只有普通文档流中块儿级元素的垂直外边距才会发生外边距合并。

解决方法：将相遇的外边距隔开

盒子模型的分类

box-sizing属性

  • content-box：盒子的实际宽度和高度仅作用于元素内容，不包括内边距和边框 【标准盒模型】

  • border-box： 盒子的实际高度和宽度包括元素内容、边框和内边距 【怪异盒模型】

display

行内元素和块级元素区别

  • 块级元素会独占一行，其宽度自动填满其父元素宽度

  • 行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化

  • 块级元素可以设置 width, height属性，行内元素设置width, height无效

  • 块级元素可以设置margin 和 padding

display属性

  • 控制元素的显示和隐藏

  • 块级元素与行内元素的转变

  • 行内块元素可以在一行内显示，并可调宽高

  • 值说明
    none设置元素不会被显示
    inline元素会被显示为行内元素
    block元素会被显示为块级元素
    inline-block行内块元素（缺点：元素间有间隔）

练习

  1. 使用外边距让元素水平居中

  2. 使用box-sizing让四个长宽为50px的子元素，在长宽为50px * 200px的父元素中不超出

  3. 鼠标悬浮在内容上的时候，背景颜色，文本颜色，鼠标样式都要有效果

  4. 小米头部导航栏

第六章：浮动

1.为什么需要浮动？

网页布局要求，标准流(页面的默认布局)不能满足我们的需要了，因此我们需要浮动来完成网页布局。

举例子：前面学过行内块，行内块可以一排显示；但是中间会有缝隙，所以不能满足我们的开发需求。

2.浮动可以写出什么效果

可以使块元素标签横向排列 👉演示一下

可以使两个或多个元素在一行内左右排列 👉演示一下

对比 inline-block 没有中间的间隙 👉演示一下

浮动元素需要搭配一个标准流的父元素进行使用 👉演示一下

浮动-float属性

属性值说明
left元素向左浮动
right元素向右浮动
none默认值，元素不浮动
<span style="background-color:#333333"><span style="color:#b8bfc6">/* 浮动写法示例 */
.layer01 {
	float:left;
}
</span></span>

浮动的原理及特性

  • float 先浮后动

  • float 属性用于创建浮动框，将其移动到一边，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    • 具有float属性的元素在父标签中是不占空间的（脱离标准文档流-脱标），需要手动设置父元素高度

  • 浮动的元素会在一行内显示，并且元素之间顶部对齐

  • 浮动的元素会在父元素顶部对齐排列，多余的元素会换行顶部对齐继续排列

浮动对行级元素和块级元素的影响

  • float 对行内属性标签的影响

    • float之后能设置width和height属性，并支持margin和padding属性

  • float 对块属性标签的影响 a：在没有设置宽高的情况下浮动后，内容撑开宽度高度，如果设置了宽高，那就按照设置的宽高来显示 b：可以使块属性元素并排排列

浮动练习：

  1. 四个浮动效果，见课件

清除浮动(扩展盒子高度)的方式

消除浮动用于解决当子元素浮动后，超出包含元素区域时脱标问题。

  1. overflow如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

    • 然后我们可以向包含元素添加 overflow: hidden;，来解决此问题

    • 语义化

  2. clear属性

    clear 属性必须写在块元素内，隔断设置方向的浮动脱标效果

    属性值说明
    left在左侧不允许浮动元素
    right在右侧不允许浮动元素
    both在左、右两侧不允许浮动元素
    none默认值。允许浮动元素出现在两侧

    1. 使用w3c推荐，添加隔断标签

      1. 添加标签的写法，效果和overflow是一样的，但是更加有语义化。

        <span style="background-color:#333333"><div class="fixclear"></div>
</span>

    2. 使用 ::after 伪元素

      1. ::after 伪元素必须加上content属性才可以使用

      2. <span style="background-color:#333333">div::after{
	content:'';
    display:block;
    clear:both;
}
</span>

溢出-overflow

知识点：基本上带有隐藏效果的动画或者过渡都使用的是overflow属性

属性值说明
visible默认值。内容不会被修剪，会呈现在盒子之外
hidden内容会被修剪，并且其余内容是不可见的
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，

溢出练习：

  1. 设置列表，当鼠标悬浮在一级列表项的时候，显示二级列表项

第七章：定位

本章目标

  • 会使用 position 进行网页元素的布局

  • 会使用 z-index 属性调整 定位元素 的堆叠次序

position：属性

属性值说明
static默认值，没有定位，标准流
relative相对定位
absolute绝对定位
fixed固定定位

偏移量：

属性值说明
left距离左方向，有多少个像素值
right距离右方向，有多少个像素值
top距离上方向，有多少个像素值
bottom距离下方向，有多少个像素值

偏移量的值可以为负

定位元素：

声明了 position 属性，并且属性值不为 static 的元素：相对定位，绝对定位，固定定位

<span style="background-color:#333333"><span style="color:#b8bfc6">.div1{
	position:static;
    /* 这不是一个定位元素 */
}
.div2{
	position:absolute;
    /* 这是一个定位元素 */
}
</span></span>

static属性值

没有定位和偏移量，以标准流方式显示

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

relative属性值※

  • 相对自身原来位置进行偏移（也就是相对于标准流偏移）

  • <span style="background-color:#333333">#div1 {
	position:relative;
	left:20px;
     top:-20px;
}
</span>

  • 设置相对定位的盒子会相对它原来的位置，通过指定偏移量，到达新的位置

  • 相对定位网页元素原来的位置保留（不脱标），不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移

absolute属性值※

  • 绝对定位相对于定位祖先元素定位，偏移量为距离父元素边框有多远

  • <span style="background-color:#333333">#div1 {
	position:absolute;
	right:30px;
}
</span>

  • 如果没有已经定位的祖先元素，那么会以body为基准进行定位

  • 绝对定位的元素从标准文档流中脱离(脱标)

  • 子绝父相：子元素需要绝对定位的时候，他的父元素一般配合着使用相对定位。

fixed属性值

  • <span style="background-color:#333333">.pos_fixed{
	position:fixed;
	top:30px;
	right:5px;
}
</span>

  • 元素的位置相对于浏览器窗口是固定位置即使窗口是滚动的它也不会移动 Fixed定位使元素的位置与文档流无关，因此不占据空间

z-index属性

  • 首先声明：z-index只能在定位元素上有效。

  • 调整元素定位时重叠层的上下位置

  • z-index属性值：整数，默认值为0，而且可以为负值

  • z-index值大的层位于其值小的层上方（值越大越靠上，值越小 越靠下）

反射狐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1天下第一楼——学生学习课件
11-23
1天下第一楼——学生学习课件
7天下第一楼_精美学习课件ppt
11-23
7天下第一楼_精美学习课件ppt
软考中级网络工程师全面学习笔记第2版(5万字)+配套视频及课件
热门推荐
m0_46179473的博客
08-04 12万+
1、文件包括网工第五版软考中级网络工程师全面学习笔记第二版(5万字)、常用检测命令实践图、协议神图、应第五常见编码图、相版配套视频及课件 2、文件中相应的视频链接也会持续的更新；对于相应的笔记文档的话，这里笔记只有一个文件且体积小也可以编辑，如果是用着WPS云文档也可上传到自己的云文档中，排版的也还可以，即便是打印出来也可以很好的进行阅读与查看 .........
第一天学习b站比特鹏哥的视频
DCY200198的博客
10-21 825
c语言小白
VUE学习笔记（黑马2023版 第一天~第三天）
m0_70675152的博客
11-02 4382
VUE学习笔记（黑马2023版）第一天1.Vue是什么？2.创建一个Vue实例2.1.准备容器（Vue所管理的范围）2.2.引包（开发版本包/生产版本包）2.3.创建实例2.4.指定配置项 el data3.插值表达式3.1.作用：3.2.语法：3.3.注意点3.4.实践案例4.Vue响应式特性4.1.什么是响应式？4.2.访问和修改数据5.Vue开发者工具安装：装插件调试Vue应用5.1浏览器为谷歌的安装方法通过谷歌应用商店安装（需要魔法）通过极简插件安装5.2浏览器为Edge的安装方法6.Vue指令6.
python学习课件
anzhong2632的博客
11-05 1269
张鑫 18511446896 -------------------------------------------------------------------------------------- Day1 1、概述 2、环境搭建、工具安装与配置 3、Python的运行原理 4、基本知识：缩进与行、跨行、注释 5、字符集编码问题 6、变量与数据类型 7、...
黑马程序员---三天快速入门Python机器学习（第二天）
zdb
04-21 8798
文章目录三、分类算法3.1 sklearn转换器和估计器3.1.1 转换器3.1.2 估计器（sklearn机器学习算法的实现）3.2 K-近邻算法3.2.1 什么是K-近邻算法（KNN）3.2.2 K-近邻算法API3.2.3 案例1：鸢尾花种类预测3.2.4 K-近邻总结3.3 模型选择与调优3.3.1 什么是交叉验证（cross validation）3.3.2 超参数搜索---网格搜索（Grid Search）3.3.3 鸢尾花案例增加K值调优3.2.4 案例：预测facebook签到位置3.4 朴
谷粒学院第一天
m0_52462015的博客
08-05 1440
谷粒学院第一天 一、起步 1、前置知识 2、项目背景 在线教育顾名思义，是以网络为介质的教学方式，通过网络，学员与教师即使相隔万里也可以开展教学活动；此外，借助网络课件，学员还可以随时随地进行学习，真正打破了时间和空间的限制，对于工作繁忙，学习时间不固定的职场人而言网络远程教育是最方便不过的学习方式。 3、项目采用的商业模式 B2C 模式（Business To Customer 会员模式）：此项目采用B2C B2B2C 模式：（商家到商家到用户） 4、项目功能模块 5、项目中
菜菜PyTorch深度学习框架最全笔记（第一次课）
m0_61413237的博客
02-08 5538
菜菜深度学习PyTorch框架
黑马程序员-3天快速入门机器学习
m0_61281610的博客
01-26 637
黑马程序员---三天快速入门Python机器学习（第三天）_黑马 python 机器学习 第三天-CSDN博客。黑马程序员---三天快速入门Python机器学习（第二天）_黑马程序员机器学习课件-CSDN博客。黑马程序员---三天快速入门Python机器学习（第一天）_黑马程序员机器学习-CSDN博客。
李宏毅机器学习2022春季-第一课
weixin_42369818的博客
02-20 1111
李宏毅2022年的课程内容与2021年类似，课程视频全部以线上视频的形式给出（已经全部录好，你可以选择短时间全部学完），另外上课时间会直播讲解额外的内容（可以不听）和作业（建议一定要做）。目前第一课视频和作业一代码已经分别放到了b站视频号（机器学习手艺人）和github（机器学习手艺人）。作业一需要去google drive或kaggle下载代码和训练数据集资料，不会使用科学上网梯子的同学请关注本公众号，文末有原始代码和训练数据集的获得方式。作业一的截至日期结束后本号会放出不同分数的代码供参考。 ...
3天快速入门python机器学习（黑马xxx）
毕竟是Shy哥
07-31 4416
人工智能的起点机器学习是人工智能的一个实现途径深度学习是机器学习的一个方法发展而来用机器来模仿人类学习以及其他方面的智能定义从数据中自动分析获得模型，并利用模型对未知数据进行预测数据、模型、预测从历史数据当中获得规律？...
开学第一天（语文A版）二年级语文上册PPT课件.ppt
12-18
开学第一天（语文A版）二年级语文上册PPT课件.ppt
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 312
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 1144
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
Nodejs util file getpost web express child_process mogodb
ooo
05-18 955
Nodejs util file getpost web express child_process mogodb
搭建自己的视频通话服务器Janus(WebRTC)
lvronglee的专栏
05-21 751
因为默认的代码，https是会请求8089的https请求的。apt install janus的源码安装了之后，要么自己写demo，要么直接用源码里面的前端页面。注意这里的pem文件，以及代理。janus 是后端，需要nginx或者其他等提供前端页面的服务器，此外因为这里并没有正式的证书，只能用自签名的证书用于https。穿透用来着，如果是局域网部署的，没有影响，如果部署到阿里云这样的，需要这个来做NAT穿透。随便注册个名字，然后用手机打开手机网络，这里看能不能穿透，不用和测试机一样的网络环境。
matlab学习课件
09-15
引用:一份比较通熟易懂的MATLAB学习课件，通过概念讲解以及例子，你可以很容易熟悉MATLAB的基本用法，快速上手～。 MATLAB学习课件是一种教学材料，旨在帮助学习者迅速掌握MATLAB的基本用法和概念。通过课件的概念...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值