第一周总结

一.引入前端的扫盲（HTML）
1.认识html：
超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML是一种标记语言（markup language），是网页制作所必备的工具。
2.html的基本结构
二.前端开发工具HbuilderX开发工具的使用
三.常用的文本基本标签

• 标题标签 h1-h6 从大到小的标题
  例子：

  *****

• 水平线标签(分割线)
• 段落标签 p标签 在插入段落标签的时候,前后会给我们加入空行
  注意事项:像html中标签如果有开始有结束,结束标签不要忘记(建议还是写上,即使没有写浏览器也会自动去加上)
  例子：

  ****

• 换行标签 br 没有开始标签,它会在浏览器中标记一个空行
  例子：

• 文本格式化标签
  常见的一些文本格式化标签:
  i标签,b标签,strong标签,em标签
  b和strong的区别
  共同点:都是加粗的意思,对某段文本内容进行加粗标记
  不同点:如果没有 语义上的一种强调
  那么就去使用b标签(通用加粗标签:使用b 标签)
  如果有语义上的一种强调
  那么就使用strong
  i标签和em同上:
  共同点:都是标记斜体标签
  不同点:如果没有语义强调就使用i标签(通用斜体标记)
  如果有语义强调,使用em标签
• 引用标签 短引用,q元素 被引入的元素加入引号
• 引用标签 长引用 blockquote,将它包括内容进行"缩进"处理 类似于
  键盘上tab键效果一样
  三.文本标签之列表标签
• 列表标签
• 无序列表 ul 和li
  ul是父标签
  li是列表项(子标签)
• ul标签默认的属性
  type:给列表项前面的标记值(默认disc,实习圆点) 不写就是默认值
  circle:空心圆点
  square:实心的小正方形
• 有序列表
  ol和li
  li是ol子标签,列表项元素
  ol的默认属性type,默认值值1
  其他的值 A,a,I,i
• 自定义列表
  自定义列表以

  每个自定义列表项以

  每个自定义列表项的定义以

  四.滚动标签

• 滚动标签 marquee
  属性:
  背景色bgcolor
  behavior:滚动的方式 默认值scroll :连续滚动
  滑动一次到浏览器边框停止掉 slide
  alternate:来回滚动
  direction:滚动的方式 :默认属性值 left(从右到左)
  right:(从左到右)
  up
  down
  scrollamount 表示运动速度，值是正整数 ,默认值是6
  scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒
  五.块元素
• div和span有什么区别?
  div:块元素,占一行空间,多个div之间会自带换行效果
  div应用场景 :结合css(给html标签进行修饰的),完成层级页面布局
  span:行内标签 ,不会像div元素一一;
  处在同一行上的
  span应用场景:前端完成表单校验去做的;
  举例: 用户在输入用户名之后,后面会有提示信息
  使用span标签动态完成文本内容的设置
• pre 原样输出标签
  将我们写的文本内容使用pre包裹起来,
  浏览器就会按照我们文本的格式进行展示;
  六.html中常用的转义字符
    相当于在敲了一个空格 (代表一个空格)
  &ensp 相当于两个空格
  >在浏览器将 ">"进行转义
  < “<” 进行转义
  网站底部会有些版权所有或者注册商品的符号 使用转义字符的
  版权所有 © 转义成 ©
  注册商标 ®转义成 ®
  七.超链接标签
• HTML 超链接（链接）
  a标签来表示
  通过使用 href 属性 - 创建指向另一个文档的链接
  href=“url” url 称为 “网络资源定位符号”
  可以使用本地地址也可以是网络地址
  target:打开资源地址的方式
  默认打开方式：_self（当前窗口直接打开新地址）
  _blank :新建一个窗口打开
• 超链接的第二种用法:
  通过使用 name 属性 - 创建文档内的书签
  作为"锚链接来使用"
  在同一个html下
  打锚点—(创建一个锚点(标记/书签))
  创建跳转链接(需要从某个位置跳转到上面的锚点位置)
  在不同页面下进行锚点跳转
  在另一个页面的某个位置
  打锚点—(创建一个锚点(标记/书签))
  
  当前页面创建跳转连接,跳转到另一个页面的那个锚点位置
  八.广告页面背景
• 如果相给页面上设置背景图片
  body 里面加入属性background=“图像地址”
  如果图像本身的尺寸没有电脑分辨率那么大,这个图片会X轴/y轴重复
  九.表格标签
• 表格表格:使用table表示
  下面有子标签
  tr:行
  属性:align:将td中的内容进行对齐方式
  行的子标签
  caption:给表格中设置标题
  td:一行指定的单元格 (普通单元格)
  th:给单元格设置表头信息(自动居中加粗效果)
  按照上面的信息写了表格,但是没有表格格式出现
  table里面有一些属性
  border:表格边框线 单位为像素大小(指定1-5px,值越大,边框线越粗)
  cellspacing:设置表格单元格和边框之间的空隙,设置0,将单元格边框和表格的边框合并了
  width和height:宽度和高度 像素大小或者占整个分辨率的百分比
  align:给表格设置对齐方式 center 中间对齐
  bgcolor:设置背景颜色
• font字体标签 color颜色属性
• 例子：学生信息
  十.表格单元格合并
• 单元格合并
  td标签的属性
  rowspan:行合并(合并行) 你当前这个单元格行合并所占的格子数量
  colspan:列合并(合并列) 你当前这个单元格列合并所占的格子数量
  十一.重要面试题
• get和post有什么区别?
  1.会将用户的信息提交到地址栏上
  格式 是在action的url地址后面?表单项标签中name属性值1=输入的内容值1&name属性的属性值2=输入内容
  2.get提交,不适合提交用户的私密数据(像登录密码,需要进行处理加密(Java中–MD5加密的工具))
  3.get提交由于在地址栏上的,所以提交的数据大小有限制!
  post提交:HbuilerX运行,提交,找不到地址
  手动方式去运行这个页面(不要使用工具运行)
  1.不会将用户信息提交到地址栏上
  2.相对get安全,安全一些,但是密码的信息还需要加密的(后期通过工具加密)
  3.相对get来说不会将信息提交地址栏上,所以提交数据大小无限制的!
  十二.表单标签 form
• 属性:action=“url服务器地址”
• method=“提交方式”
  两种:
  get/post(默认提交方式就是get:在浏览器直接输入访问地址都是默认get提交)
  文本输入框
  密码输入框
  特殊按钮
  提交按钮将用户表单中的所有的表单项的内容提交到url地址上,进行服务器校验
• placeholder h5的新增属性:提示信息
  自带一种效果:当鼠标点击进去写 内容时候,提示文字消失了
  value:设置输入框的默认值 没有上面的那种效果表单项的所有标签
• 都需要加上name属性 (必填)
  给后端服务器程序标记 用户输入的内容值是什么
  ****十三.表单标签中的元素
• 都需要必填name属性=“值” ,服务器地址就能够知道了用户输入的信息是什么
  输入类型元素input
  属性:
  type=“text” 文本输入框
  type=“password” 密码输入框
  type=“radio” 单项按钮 男或者女同一组代表性别,给后端标记,指定相同的name属性
  type=“checkbox” 复选框 看成同一组信息,指定相同的name属性,给后端标记,用户选的哪些
  type=“date” 日期组件
  type=“Ũ le” 文件上传组件
  type=“button” 普通按钮 结合value去使用 ,给按钮默认值
  type=“submit” 结合value属性=“登录/注册” 特殊的提交按钮,将用户的信息提交到了action=“服务器地
  址”
  type=“reset” 重置按钮
  type=“hidden” 隐藏域,没有效果,但是可以提交数据
  下拉菜单select标签
  子标签 option:下拉选项
  文本域:textarea
  rows:指定书写的行数
  cols:一行有多个字符
  十四.框架标签的引入
  --
• style=“background-image: url(img/bg01.jpg);”
  每一个被标签都有一个Style属性:行内样式 指定一些样式内容
• 邮箱组件: 如果你写的内容不包含@符号,不能提交 会提示
  例子：
  十五.Css入门
• 前端三剑客：
• Html:理解"房屋的主体结构"
  CSS :理解"具体的房屋里面加入修饰"
  Js(Javascript):理解 “具体房屋里面的功能(前端自己的逻辑)”
  js:变量,数据类型
  CSS:Cascading Style Sheet:层叠样式表
  我们自己书写的样式一定是系统里面有的样式(样式库规定的)
  1.CSS使用方式第一种:行内样式
  html的每一个标签都有style属性:设置样式的
  style=“样式属性名称1:属性值1;样式属性名称2:属性值2;…”
  弊端:一次只能控制一个标签去进行修饰(如果在实际操作过程中,仅仅给某个标签去设置,就直接用这个方式)
  2.CSS使用方式第二种:内联样式(内部样式)
  在head标签体中书写

<style>

使用css选择器{ //可以直接是标签名称(标签选择器)
样式属性名称1:值1;
样式属性名称2:值2;
样式属性名称3:值3;
…
}

style>

存在弊端:当前这个html只是写html标签元素的,样式代码style标签
和html标签元素混合了,不利于管理!(后端人员,这种方式够用了)
3.CSS使用方式3:
外联样式(外部样式)
前端开发人员:这种推荐,将css样式代码和html标签代码分离了
1)单独需要在项目下创建css文件夹,然后里面创建后缀名.css文件
2) css文件书写
选择器{
样式属性名称1:值1;
样式属性名称2:值2;
样式属性名称3:值3;
…
}
3)在当前html页面中导入css文件

<link href="css文件地址" rel="stylesheet"/>

rel:关联样式库中的样式(关联层叠样式表):固定写法

• /*css注释 ctrl+/或者是ctrl+shift+/
  css注释:注释不能嵌套

• 导入css文件

<link href="css/01.css" rel="stylesheet" />

十六.CSS常用的选择器

• 上课过程中,为了书写方便,使用的内部样式
  常用的选择器
  1.标签名称选择器{
  样式属性名称1:值1;
  样式属性名称2:值2;
  …
  }
  2 class选择器(类选择器)
  需要在 你的标签指定class属性=“值”
  .class属性值{
  样式属性名称1:值1;
  样式属性名称2:值2;
  …
  }
  同一个页面中的class属性值是可以同名的!
  class(类)选择器 :同一类元素 优先级 > 标签名称选择器
  3 id选择器
  在标签中指定id=“值”,注意:id选择器的id的值,必须唯一的!
  (id属性值唯一,能够解决浏览器中部分标签的兼容性问题)
  但是我们现在没有学习js(javascript),所以id值重复,也可以展示被id选中的效果;
  #id属性值{
  样式属性名称1:值1;
  样式属性名称2:值2;
  …
  }
  上面三个选择器是设置css的最基本选择器
  id选择器 > class选择器 > 标签名称选择器
  组合选择器
  4 并集选择器
  选择器1,选择器2,选择器3…{ 选择器可以是上面id,class类,标签名称选择器
  样式属性名称1:值1;
  样式属性名称2:值2;
  …
  }
  5 子元素选择器
  选择器1 选择器2 { 选择器2选中的标签是选择器1的子标签
  样式属性名称1:值1;
  样式属性名称2:值2;
  …
  }
  6 后代选择器:
  选择器1 > 选择器2 { //选择器2选中的元素是选择器1的后代元素
  样式属性名称1:值1;
  样式属性名称2:值2;
  …
  }
  十七. CSS里面特殊的选择器(伪类选择器)
• 伪类用于定义元素的特殊状态
  状态:
  1)link状态:鼠标未访问状态
  2)hover状态(使用居多):鼠标经过状态
  3)avtive状态:鼠标获取焦点状态
  (激活,点击了,但是没有松开),超链接就是这种
  4)visited状态:鼠标访问过了状态(举例:超链接点了松开后,就访问了)
  css代码书写格式:
  选择器:状态名称{
  样式属性名称1:值1;
  样式属性名称2:值2;
  …
  }
  注意:
  1)状态名称不区分大小写,但是建议小写
  2)注意： 规定这个先后顺序: 才能出现循环的效果
  a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
  a:active 必须在 CSS 定义中的 a:hover 之后才能生效
  十八. CSS文本样式

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS文本样式title>
<style>
div{
/*文本颜色 color*/
color: red;
/* 文本对齐样式 text-align
left center right
*/
text-align: center;
/* 文本修饰 text-decoration 属性用于设置或删除文本装饰。
underline:设置下划线
none:不设置任何修饰
overline:上划线
line-through:中划线(电商平台:打折之后原件上面的中划线)
*/
text-decoration:underline;
}
p{
/* text-transform:文本转换 (了解)
capitalize:将每个单词首字母大写
uppercase:将英文单词转换成大写
lowercase:将英文单词转换成小写
*/
text-transform: capitalize;
text-align: left;
text-decoration: none;
color: blue;
/* text-indent:文本缩进 */
text-indent: 15px;
/*letter-spacing:指定文本中字符之间的间距。 */
letter-spacing: 10px;
/* 文本阴影
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px)
后面添加文本颜色
*/
text-shadow: 2px 2px red;
}
style>
head>
<body>
<div>今天是2022年10月21日div>
<p>hello Worldp>
body>
html>