JavaWeb中关于前端HTML、CSS、JavaScript的学习笔记，参考尚硅谷教学视频

HTML笔记

1、a标签

a标签代表超链接，href属性设置链接的地址，target属性设置哪个目标进行跳转（”self“ 表示当前界面（默认值），blank表示打开新页面来进行跳转）

1 2	<a href="http://localhost:8080" target="_self">百度_self</a><br/> <a href="http://localhost:8080" target="_blank">百度_blank</a><br/>

2、无序列表ul、有序列表ol

type属性可以修改列表项前面的符号
li是列表项

<ul type="none">
    <li>黎明</li>
    <li>刘德华</li>
    <li>郭富城</li>
    <li>张学友</li>
</ul>

3、img标签

src可以设置路径，路径分为’相对路径’和’绝对路径’
- 相对路径：
  - ”.“ ：表示当前目录
  - ”..“ ：表示父目录
  - ”文件名“：表示当前文件所在目录的文件，相当于./文件名（./可以省略）
- 绝对路径：
  - 正确格式是：http://IP:Port/工程名/资源路径
标签属性有：
- width：宽度
- height：高度
- border：边框大小
- alt：路径找不到图片时，用来代替文本内容

1
2
3

<img src="../img/夜.jpg" width="500" height="300" border="1" alt="图片找不到"
<img src="../img/山河.jpg" width="500" height="300" border="1" alt="图片找不到"
<img src="../img/004.jpg" width="500" height="300" border="1" alt="图片找不到"

4、table表格标签

table标签属性有：border设置边框，width、height、cellspacing设置单元格间距
- tr 是行标签
- th 是表头标签
- td 是单元格标签
- align设置单元格文本对齐方式
- b标签是加粗标签
- colspan 属性设置跨列
  rowspan 属性设置跨行

<table border="1" width="300" height="300" cellspacing="0">
    <tr>
        <td align="center" colspan="2"><b>1.1</b></td>
        <th>1.2</th>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
    </tr>
</table>

5、iframe标签

作用：可以在页面上开辟一个小区域显示一个单独的页面
iframe和a标签组合使用的步骤：
- 在iframe标签中使用name属性定义一个名称
- 在a标签的target属性上设置iframe的name的属性值

6、表单form标签

重要的属性如下：
- input type=text 是文本输入框 value设置默认值
- input type=password 是密码输入框 value同上
- input type=radio 是单选框 name属性可以对其进行分组
- input type=checkbox 是复选框
- select标签是下拉列表框
  - option是下拉列表框中的选项，selected=‘selected‘设置默认选中
- textarea 表示多行文本输入框
  - rows 属性设置显示可以显示几行的高度
  - cols 属性设置每行可以显示几个字符宽度
- 起始标签和结束标签之间是默认值
- input type=”reset” 是重置按钮，value属性修改文本
- input type=”submit” 是提交按钮 value同上
- input type=”file” 文件上传
- input type=”hidden” 是隐藏域当我们要发送某些信息（不需要用户参与），就可以隐藏，提交的时候发送给服务器
- action属性设置提交的服务器地址
- method属性设置提交的方式GET或POST
  - GET请求的特点：
    1. 浏览器地址栏中的地址是：action属性[?+请求参数]，请求参数的格式是：name=value&name=value&name=value…
    2. 不安全
    3. 它有数据长度限制
  - POST请求的特点：
    1. 浏览器地址栏只有action属性值
    2. 相对于GET请求更安全
    3. 理论上没有数据长度限制
表单提交的时候，数据没有发送给服务器的三种情况
1. 表单项没有name属性值
2. 单选、复选（下拉列表中的option标签），都需要添加value属性，以便发送给服务器
3. 表单项不在提交的form标签中
测试代码

<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex"/>女
                <input type="radio" name="sex" checked="checked"/>男
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked"/>JAVA
                <input type="checkbox"/>Python
                <input type="checkbox"/>C++
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select>
                <option>--请选择国籍--</option>
                <option selected="selected">--中国--</option>
                <option>--美国--</option>
                <option>--德国--</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>>
            <td><textarea rows="10" cols="20" >我是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset"></td>
            <td><input type="submit"></td>
        </tr>
    </table>
</form>

运行效果展示：

7、其他标签

div标签默认独占一行
span标签长度是封装数据的长度
p段落标签默认会在段落的上方或下方各空出一行来

CSS笔记

1、CSS语法规则

选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）
属性：属性和值用冒号隔开，并用花括号包围，eg.p{color:blue}
多个声明：如果定义不止一个声明，则需要通过分号’;’分开。虽然最后一条声明的最后可以不加分号，但尽量都加上

2、CSS注释：和Java相同

3、CSS和HTML结合

第一种：在标签的style属性上设置“key：value value；”，修改标签样式
第二种：在head标签中，使用style标签来定义各种自己所需要的CSS样式
- 注意：只能在同一个页面内复用代码，维护起来不方便，成千上万的页面如果都要到每一个进行修改，工作量巨大
第三种：把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用
- 使用html的标签，导入CSS样式文件

4、标签名选择器

格式：标签名{ 属性：值; }
标签名选择器可以决定哪些标签被动地使用这个样式

5、id选择器

id 选择器的格式是：# id 属性值{ 属性：值; }
id选择器，可以让我们通过id属性选择性的去使用这个样式

6、class选择器（类选择器）

格式：.class 属性值{ 属性：值 }
class选择器选择器，可以让我们通过class属性选择性的去使用这个样式

7、组合选择器

格式：选择器1，选择器2…选择器n{ 属性：值; }
组合选择器，可以让多个选择器共用同一个CSS代码。

8、常用样式

字体样式：颜色（color）、字体大小（font-size）、
边框border：1px solid red
宽width、高height
背景颜色 background-color
div居中 margin-left: auto; margin-right: auto;
文本居中：text-align: center
超链接去下划线：text-decoration
表格细线：

JavaScript笔记

1、诞生背景

诞生主要是为了完成页面的数据验证，因此它运行在客户端，需要浏览器来解析执行JavaScript代码。JS是Netscape网景公司的产品最早取名为LiveScript，为了吸引更多java程序员，更名为JavaScript

2、JS是弱类型语言，Java是强类型

区别：弱类型就是类型可变（var来定义）；强类型就是定义变量的时候，类型已确定，不可变。

3、JS语言特点

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

4、JS和html代码结合方式

只需要在head标签中，或者在body标签中，使用script标签来书写JS代码
使用script标签引入单独的JavaScript代码文件
使用src属性来引入js文件路径（可以是相对路径，也可以是绝对路径）
注意：script标签可以用来定义JS代码，也可以用来引入，但是两个功能”二选一”！！

5、JS中的变量

什么是变量？可以存放某些值的内存的命名
JS的变量类型：
- 数值类型：short int long float double
- 字符串类型：string
- 对象类型：object
- 布尔类型：boolean
- 函数类型：function
- typeof是JS语言提供的一个函数，可以返回变量的数据类型
JS里特殊的值：
- undefined：未定义，所以js变量未赋予初始值时，默认都是undefined
- null：空值
- NAN：全称是Not a Number。非数字或非数值
JS的定义变量格式：
- var 变量名;
- var 变量名 = 值;

6、变量的运算

关系（比较）运算：等于（==）：简单的数字面值比较、全等于（===）：除比较数值以外，还会比较两个数值的类型、其余和Java一样
- eg. var a = 12; var b = “12”;
  - alert(a == b); // 输出true
  - eg2. alert(a === b) // 输出false
逻辑运算：和java一样：&&、||、!
- 注意：在JS语言中，所有的变量都可以作为一个boolean类型的变量去使用。0、null、undefined、""都认为是False
- &&且运算：当表达式全为真的时候，返回最后一个表达式的值；当表达式中有一个为假时，返回第一个为假的表达式的值
- ||或运算：当表达式全为假的时候，返回最后一个表达式的值；只要有一个表达式为真，返回第一个为真的表达式的值

7、数组（重点）

JS中数组的定义方式：
- var 数组名 = []; //空数组
- var 数组名 = [1,’abc’,true]; //定义数组同时赋值元
- 注意：JS语言中的数组，只要通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作

8、函数（重点）

函数的两种定义方式
- 可以使用function关键字来定义函数
- 使用格式：var 函数名 = function( 形参列表 ){ 函数体 }
注意：在Java中函数允许重载，但是在JS中函数的重载会直接覆盖掉上一次的定义
函数的arguments隐形参数（只在function函数内）：就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量，叫做隐形参数
- eg. 编写一个函数，计算传入参数中所有数字相加的和，并返回

function sum() {
	s = 0;
	for (var i = 0; i < arguments.length; i++) {
    	if (typeof(arguments[i]) == "number"){
        	s += arguments[i];
        }
    }
    return s;
}
//alert是JS语言提供的一个警告框函数，可以接收任意类型的参数，这个参数就是警告框的提示信息
alert(sum(1,2,3,4,5,"abc"))	// sum函数可传入任意数量的参数

9、JS中的自定义对象（扩展内容）

Object形式的自定义对象：
- 对象的定义：
  - var 变量名 = new Object(); //对象实例（空对象）
  - 变量名.属性名 = 值 //定义一个属性
  - 变量名.函数名 = function(){} //定义一个函数
- 对象的访问：
  - 变量名.属性 / 函数名();
{}花括号形式的自定义对象：
- 对象的定义：var 变量名 = { 属性: 值, 属性: 值, 函数名: function() {} //定义函数 }; //对象实例
- 对象的访问：变量名.属性 / 函数名();

10、JS中的事件（重点）

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件
常用的事件：
- onload()加载完成事件：常用于做页面JS代码初始化操作
- onclick()单击事件：常用于按钮的点击响应操作
- onblur()失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法
- onchaneg()内容发生改变事件：常用于下拉列表和输入框内容发生改变后的操作
- onsubmit()：表单提交事件：常用于表单提交前，验证所有表单项是否合法
事件的注册（静态、动态）
- 什么是事件的注册？其实就是告诉浏览器当事件响应后要执行哪些操作代码，叫事件注册或绑定
  - 静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码，浏览器解析完页面会自动触发
  - 动态注册事件：指先通过JS代码得到标签的dom对象，然后通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码，叫动态注册
  - 基本步骤：
    ① 获取标签对象
    ② 标签对象.事件名 = function(){}

eg1.onload事件静态、动态注册

function onloadfun() {
	alert("静态注册onload事件，所有代码")
}//在标签中引入，如<body onload="onloadfun()">

//onload事件动态注册，是固定写法
window.onload = function(){
    alert("动态注册onload事件，所有代码")
}

eg2.onclick事件静态、动态注册

function onclickfun() {
	alert("静态注册onclick事件")
}
window.onload = function () {
        //1、获取标签对象
        //2、通过标签对象.事件名 = function(){}
        var btnObj = document.getElementById("btn2")//document是JS语言提供的一个对象（整个页面所有内容）
        btnObj.onclick = function () {
        alert("动态注册onclick事件")
	}
}

eg3.onsubmit事件静态、动态注册

function onsubmitFun() {
	//静态注册提交事务
	alert("静态注册表单提交事件——发现不合法");
	return false;
}
window.onload = function () {
	var formObj = document.getElementById("form2");
		formObj.onsubmit = function(){
		alert("动态注册表单提交事件——发现不合法");
		return false
	}
}

<!--return false可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
	<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form2">
	<input type="submit" value="动态注册"/>
</form>

11、DOM模型（Document Object Model）

DOM模型功能：把html文档中的标签、属性、文本，转换为对象来管理
Document对象的理解：Document管理了所有的HTML文档内容Document它是一种树结构的文档，有层级关系，它让我们把所有的标签都对象化，我们可以通过document访问所有的标签对象

Document对象中的方法介绍（重点）

document.getElementById(elementId) 返回对拥有指定id的第一个对象的引用
document.getElementsByName(elementName)
document.getElementsByTagName(tagName)
document.createElement(tagName)
注意：document对象的三个查询方法，如果有id属性，优先使用getElementById()方法查询，如果没有id属性则优先使用getElementByName()方法进行查询，最后考虑getElementByTagName()
eg. 当用户点击校验按钮时，要获取输入框中的内容，然后验证其是否合法，验证的规则是：必须由字母、数字、下划线组成，并且长度5~12位

function onclickFun() {
	var usernameObj = document.getElementById("username");
	var usernametext = usernameObj.value;
	//如何验证字符串，符合某个规则，需要使用正则表达式
	var pattern = /^\w{5,12}$/;	//正则表达式，有需求再去翻文档
	var usernameSpanObj = document.getElementById("usernameSpan");
	// innerHTML这个属性可读、可写
	if(pattern.test(usernametext)){
		usernameSpanObj.innerHTML = '用户名合法！'
		// alert('用户名合法！')
	}else {
	usernameSpanObj.innerHTML = '用户名不合法！'
		// alert('用户名不合法！')
	}
}

用户名：<input type="text" id="username"/>
<span id="usernameSpan" style="color:red"></span>
<button onclick="onclickFun()">校验</button>

节点（标签对象）的常用属性和方法

方法
- 通过具体的元素节点调用getElementByTagName()方法，获取当前节点的指定标签名孩子节点
- appendChild(oChildNode)方法，可以添加一个子节点，oChildNode是要添加的孩子节点
属性
- childNodes：获取当前节点的所有子节点
- firshChild：当前节点的第一个子节点
- lastChild：当前节点的最后一个子节点
- parentNode：获取当前节点的父节点
- nextSibling：获取当前节点的下一个节点
- previousSibling：获取当前节点的上一个节点
- className：用于获取或设置标签的class属性值
- innerHTML：表示获取/设置起始标签和结束标签中的内容
- innerText：表示获取/设置起始标签和结束标签中的文本
eg. 使用JS代码来创建html标签，并显示在页面上

window.onload = function () {
    var divObj = document.createElement("div");  //在内存中
    divObj.innerHTML = '代码显示标签内容1';   //法一：添加标签内容；此时标签已有内容，但还是在内存中

    var textNodeObj = document.createTextNode('代码显示标签内容2');//法二：添加标签内容
    divObj.appendChild(textNodeObj)

    document.body.appendChild(divObj)   //注意要等页面加载完成以后
}

CoderZQYのBlog

javaweb前端学习