首页 > 编程札记 > 编程

第一天学习的课件

阅读：评论：0

第一天学习的课件

第一章——初始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网页

新建文本文档
在文本文档中搭建基本网页结构
在搭建好的网页结构中添加内容
更改文本文档的文件后缀
打开更改后的网页即可

使用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/> 换行标签
  特殊字符，不需要加间括号

图像标签

<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>

特殊符号	字符实体	示例
空格	` `	百度 \| 新浪
大于号(>)	`>`	如果时间>晚上6点，就坐车回家
小于号(<)	`<`	如果时间<早上7点，就走路去上学
引号	`"`	W3C规范中，HTML的属性值必须用成对的"引起来
版权符号	`©`	© 2003-2013 阿里巴巴

HTML特殊字符编码对照表 .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>

章节问题：

行标签是否能包含行标签？
img是什么标签？行还是块？
网页内最基本的四个结构标签分别是什么？
图像路径属性名和超链接路径属性名分别是什么?
代码标签的两种关系分别是什么？

第二章 —— 初识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文件数量不限

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

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

导入式

<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 > 元素

文本/字体样式

color：文本颜色

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

text-align：对齐方式

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

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

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

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

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

font-size：字体大小

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

font-family：字体风格

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

font-weight：字体粗细

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

背景属性

background-color：背景颜色

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

opacity：透明度

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

background-image：背景图像

注：默认情况下，图像会重复，以覆盖整个元素。
```
<span style="background-color:#333333">body {background-image: url("");
}
</span>
```

background-repeat：消除背景重复

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

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

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

练习：

分别使用不同的方式分别对<h1>、<h2>、<h3>标签调整不同的大小和颜色 (使用内联，外联，行内)
台历——使用背景图像的纵向平铺制作台历效果
竹子——使用背景图像的垂直平铺制作竹子效果
摩托车——使用背景固定制作效果
光标形状

第三章 —— 列表、表格

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>

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

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

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

列表会带有自己样式属性，可以使用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-zero	0开头的数字标记。(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、什么是表单

表单用于收集用户的信息，是浏览器和用户之间沟通的桥梁。
就是你在注册账号时，让你输手机号，输密码那个小框框，明白了吧
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。
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 这个域名所对应的服务器上  
</span></span>

常用属性：

Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method 用于设置表单数据的提交方式，其取值为get或post。
name 用于指定表单的名称，以区分同一个页面中的多个表单。

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

3、input 控件(重点)

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

<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。
除了type属性之外，<input />标签还需要定义很多其他的属性，其常用属性如下表所示。

属性	值	描述
type	text	单行文本输入框
type	password	密码输入框
type	radio	单选框
type	checkbox	复选框
type	button	普通按钮
type	submit	提交按钮
type	reset	重置按钮
type	image	图像形式的提交按钮
type	file	文件域
type	number	数字文本框
checked	checked	预先选定复选框或单选按钮。
disabled	disabled	禁用 input 元素
maxlength	number	规定输入字段中的字符的最大长度。
value	value	属性规定输入字段的初始值
readonly	readonly	只能读不能修改
hidden	hidden	隐藏元素，用于接受值，但不显示在页面
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>

注意：

<select></select>中至少应包含一对<option></option>。
在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

内容最大宽度：max-content
内容最小宽度：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>

外边距合并：

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

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

常见合并方式为：

同级元素外边距合并：p标签的外边距合并
父子元素外边距合并：父元素和子元素同时拥有外边距且外边距相遇时子元素外边距合并到父元素外边距中

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

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

盒子模型的分类

box-sizing属性

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

display

行内元素和块级元素区别

块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
块级元素可以设置 width, height属性，行内元素设置width, height无效
块级元素可以设置margin 和 padding

display属性

控制元素的显示和隐藏
块级元素与行内元素的转变
行内块元素可以在一行内显示，并可调宽高
值说明
none 设置元素不会被显示
inline 元素会被显示为行内元素
block 元素会被显示为块级元素
inline-block 行内块元素（缺点：元素间有间隔）

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

练习

使用外边距让元素水平居中
使用box-sizing让四个长宽为50px的子元素，在长宽为50px * 200px的父元素中不超出
鼠标悬浮在内容上的时候，背景颜色，文本颜色，鼠标样式都要有效果
小米头部导航栏

第六章：浮动

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：可以使块属性元素并排排列

浮动练习：

四个浮动效果，见课件

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

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

overflow如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：
- 然后我们可以向包含元素添加 overflow: hidden;，来解决此问题
- 语义化
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>
```

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

溢出-overflow

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

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

溢出练习：

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

第七章：定位

本章目标

会使用 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值大的层位于其值小的层上方（值越大越靠上，值越小越靠下）

本文发布于:2024-02-02 07:05:33，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170682873342159.html

上一篇：python正确的字符串常量是

下一篇：《什么是中间人攻击》

标签：课件

留言与评论（共有 0 条评论）

特殊符号	字符实体	示例
空格	` `	百度 \| 新浪
大于号(>)	`>`	如果时间>晚上6点，就坐车回家
小于号(<)	`<`	如果时间<早上7点，就走路去上学
引号	`"`	W3C规范中，HTML的属性值必须用成对的"引起来
版权符号	`©`	© 2003-2013 阿里巴巴

特殊符号	字符实体	示例
空格	` `	百度 \| 新浪
大于号(>)	`>`	如果时间>晚上6点，就坐车回家
小于号(<)	`<`	如果时间<早上7点，就走路去上学
引号	`"`	W3C规范中，HTML的属性值必须用成对的"引起来
版权符号	`©`	© 2003-2013 阿里巴巴

第一天学习的课件