Javaweb笔记

HTML基本知识

常用html标签

• <form></form> ：定义表单
• <div>:定义块级元素
• <h1> - <h6>:定义HTML标题，共6种
• <a>:定义链接
• <input></input>:定义输入控件
• <li>：定义列表的项目
• <link>:定义文档与外部资源，如css
• <ol> :定义有序列表
• <ul>:定义无序列表
• <p>:定义段落

CSS基本知识

html标签可以设置属性，例如class、id等。在css文件中可以编辑网页的样式，通过class、id等属性控制某些控件的样式。

css选择器简介

• id选择器，用#来定义id选择器。给html标签添加id属性，且该id唯一，就可以在css种使用id选择器来定义该标签的样式。

  <p id = "color">这个段落用来修改颜色</p>
  

  #color{color:red;}   /*css中定义类选择器*/
  

• 类选择器，用.来定义类选择器。同样，给标签添加class属性，就可以在css中定义类选择器来改变样式

  <!--一个标签可以属于很多个类，在class属性中可以声明，不同类之间用空格间隔-->
  <p class = "test">这个段落用来修改颜色</p>    
  <p class = "test color">这个段落用来修改颜色</p>
  <h3 class = "test">这个段落用来修改颜色</h3>
  

  /*表示test类下所有的标签颜色都变为蓝色*/
  .test{
      color:blue;
  }
  
  /*表示test类下的h3标签变为绿色*/
  .test h3{
      color:green;
  }
  /*表示属于color类的p标签都变为红色*/
  p.color{
      color:red;
  }
  

• 元素选择器，这个相对比较好理解

  <p class = "test">这个段落用来修改颜色</p>    
  <p class = "test color">这个段落用来修改颜色</p>
  <h3 class = "test">这个段落用来修改颜色</h3>
  

  p{color:gray;}
  h3{color:red;}
  /*表示选中所有的p标签改为gray，所有的h3标签改为red*/
  

• 分组选择器

  p,h2,body,ol {color:red;} /*多个元素进行分组选择，每个元素的颜色都改为red*/
  

• 属性选择器

  *[title]{color:red;}  /*表示把包含title的所有元素都变为红色*/
  a[herf]a {color:red;}  /*表示把所有a标签含有herf属性的元素都变为红色*/
  
  a[herf][title] {color:red;} /*将同时有herf和title属性的超链接的文本设置为红色*/
  

• 后代选择器

  <ol>
  <li>你</li>
  <li>好</li>
  <li>啊</li>
  
  <div>
  <h1>古诗300首</h1>
  <ul>
  <li>送孟浩然之广陵</li>
  </ul>
  </div>
  </ol>
  

  ol li{color:red;}  /*ol中的li标签的字体都改为红色，包括 - 送孟浩然之广陵-*/
  

• 子元素选择器，子元素选择器只选择其子代。

  ol li{color:blue;} /*只改变子代样式，不包括 - 送孟浩然之广陵-*/
  

JavaScript基本知识

js数据类型

• Number数值类型
• String字符串类型，使用双引号或单引号引起来的内容
• Array数组类型，数组类型可以存储任意的对象，如[1,2,2.0,2.3,"hello","hello":"js"]
• Object类型，{key：value…}，如{"name":"javascript","time":2020}

js中的变量

• var定义变量，即variable，如var a = "hello";var b = 10…
• let定义变量，如let a = "hello";let b = 10…
• const定义常量，如const a = "hello"；

tips：js中的变量没有类型

js中的函数

function 方法名(参数列表){…}

如：function add(a,b) {return a + b;} 形参没有类型，返回值也没有类型

js中的函数可以作为一种数据类型直接赋给变量

如：let a = add；

匿名函数

如：let a = function(a,b){return a + b;}

小结：js是一种弱类型语言，js是事件驱动的，js运行在浏览器上。