HTML学习
*这是一个HTML文档
<html><!--html文档的根标签-->
<head><!-- 头标签-->
<title>peizeng</title><!--标题标签-->
</head>
<body><!-- 体标签-->
<font color='red'>Hello world</font><br/> <!-- br/换行标签-->
<font color='green'>Hello world</font><br/>
<h1>防火工作</h1> <!-- h1到h6依次为标题的大小 -->
<p>
一、高度重视冬季防火工作。目前已进入冬季，风干物燥，用火、用电、用油、用气增加，元旦、春节即将来临，人流、物流集中，
各种庆祝集会和传统民俗文化活动频繁，火灾事故隐患增多，防控难度加大，消防安全形势将更加严峻。
各县市区、各部门、各单位负责人要针对本地区、本部门、本单位消防工作存在的薄弱环节，组织制定各项防范措施，坚决防止重特大火灾事故的发生。
</p>
<p>
二、严格落实消防安全责任制。各县市区人民政府全面负责本地区消防工作，政府主要负责同志为第一责任人，分管负责同志为主要责任人。
要层层落实责任，把任务分解到部门、单位和个人。各单位负责人对本单位消防安全工作负总责，进一步落实消防安全责任制和岗位责任制。
要加大火灾事故责任追究力度，实行责任倒查和逐级追查，做到事故原因不查清不放过、事故责任者得不到处理不放过、整改措施不落实不放过、教训不吸取不放过。
发生重大火灾事故的，除追究单位主要负责人和实际控制人责任外，还要追究地方负责人和上级单位主要负责人的责任；
触犯法律的，依法追究单位主要负责人、单位实际控制人和上级单位负责人的法律责任。
</p>
<p>
三、认真组织开展消防安全大检查活动。
</p>
<!--段落标签 p-->
<!--hr标签 显示一条水平线-->
<hr color='red'>
<h2>文本标签</h2>
<!--b标签 加粗-->
白日依山尽<br/>
<b>白日依山尽</b><br/>
<!--i标签 斜体-->
黄河入海流<br/>
<i>黄河入海流</i><br/>
<!--font标签 字体标签-->
欲穷千里目<br/>
<font color='red' size='3'>欲穷千里目</font><br/>
<!--center居中标签-->
更上一层楼<br/>
<center>
更上一层楼<br/>
</center>
<!--
其中font与hr标签各有一定的属性
hr有color，width，size，align（对齐方式center居中，left居左，right居右）
font有color，size，face（字体）
属性的取值：
color：
1.直接接颜色单词
2.rgb（值1，值2，值3），值的范围0~225
3.#值1值2值3：值的范围00~FF之间。
width：
1.数值：width=‘20’。单位为像素
2.数值%：相当于屏幕的一个比例。例：50%。
-->
<!--
加载图片使用img标签。
<img src=”相对路径.jpg“>
-->
<hr color='red'>
<h2>列表标签</h2>
<!--
*有序列表
*<ol>
*<li>
*无序列表
*<ul>
*<li>
-->
<ol>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ol>
<ul>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ul>
<hr color='red'>
<h2>链接标签</h2>
<!--
a:定义一个超链接
属性：
href:指定访问资源的URL（统一资源定位符）
target:指定打开资源的方式
_self:默认值，在当前页面打开
_blank:在空白页面打开
-->
<a href='https://www.cnblogs.com/pzbangbangdai/'>这是一个超链接</a><br>
<a href='https://www.cnblogs.com/pzbangbangdai/' target='_blank'>这还是一个超链接</a>
<hr color='red'>
<h2>表格标签</h2>
<!--
*table:定义表格
*tr:定义行
*td:定义单元格
*colspan:合并列
*rowspan:合并行
*th:定义表头单元格
*caption:表格标题
-->
<table border='1' width='50%' cellpadding='0' cellspacing='0'>
<caption>学生信息表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>01</td>
<td>张三</td>
<td>70</td>
</tr>
<tr>
<td>02</td>
<td>李四</td>
<td>80</td>
</tr>
</table>
<hr color='red'>
<h2>表单标签</h2>
概念：用于采集用户输入的数据
<!--
form :用于定义表单。可以定义一个范围，范围代表采集用户数据的范围
属性：
action:指定提交数据的URL
methon:指定提交方式。常用的两类：
get：请求参数会在地址栏中显示
post：请求参数不会在地址栏中显示
要想数据被提交，必须指定name属性
-->
<form action='#' method='get'>
用户名：<input name='username'><br>
密码：<input name='password'><br>
<input type='submit' value='登录'>
</form>
<hr color='red'>
<h2>表单项标签</h2>
<!--
*input:可以通过type属性值，改变元素展示的样式
*type属性：
*text:文本输入框
*placeholder:输入提示信息
*password:密码输入框
*radio：单选框
*注意如果有多个单选框则name属性值必须一样
*每一个单选框的value属性一般指定被选择中提交的值
*通过添加checked属性指定其为默认选项
*checkbox：多选框
*每一个单选框的value属性一般指定被选择中提交的值
*通过添加checked属性指定其为默认选项
*file:文件选择框
*submit：按钮
*hidden：隐藏域，用于提交一下信息
*label：指定输入框的文字描述信息（即点击一个框的文字信息光标就会跳转至其框中）
*注意label的for属性值要与input的id属性值对应
*select:下拉标签
*子元素：option,指定列表项
*textarea:文本域
*cols:指定列数
*rows:指定行数
-->
<form action='#' method='post'>
<table border='1' width='500' align='center'>
<tr>
<td><label for='username'> 姓名</label></td>
<td><input name='username' type='text' id= 'username'></td>
</tr>
<tr>
<td><label for='password'> 密码</label></td>
<td><input name='password' type='password' id= 'password'></td>
</tr>
<tr>
<td><label for='email'> 邮箱</label></td>
<td><input name='email' type='email' id= 'email'></td>
</tr>
<tr>
<td><label > 性别</label></td>
<td><input name='gender' type='radio' value='male'>男
<input name='gender' type='radio' value='female'>女
</td>
</tr>
<tr>
<td><label for='birthday'> 生日</label></td>
<td><input name='birthday' type='date' id= 'birthday'></td>
</tr>
<tr>
<td colspan='2' align='center'><input type='submit' value='注册'> </label>
</td>
</tr>
<table>
</form>
</body>
</html>
CSS
CSS的使用：css与html结合方式
1，内联样式
*在标签内使用style属性指定css代码
*例 <div style="color: red;">hello world</div>
2，内部样式
*在head标签内，定义style标签，style标签的标签体内容就是css代码
3，外部样式
1.定义css资源文件。
2.在head标签内，对应link标签，引入外部的资源文件
CSS语法的格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
······
}
选择器：
基础选择器：
1，id选择器
语法：#id属性值
2，元素选择器
语法：标签名称
3，类选择器
语法：.class属性值
拓展选择器：
1，选择所有元素
语法：*{}
2，并集选择器
语法：选择器1，选择器2{}
3，子选择器：筛选选择器1下的选择器2元素
语法：选择器1 选择器2{}
4，父选择器：筛选选择器2的父选择器1
语法：选择器> 选择器2{}
5，属性选择器：选择元素名称，属性名=属性值的元素
语法：元素名称[属性名=”属性值”]{}
如input标签当中的type属性
6，伪类选择器：选择一些元素具有的状态
语法：元素：状态{}
如链接标签被访问的一些状态
属性：
1，字体，文本
font-size:字体大小
color：文本颜色
text-align：对其方式
line-height：行高
2，背景
Background
3，边框
border
4，尺寸
width:宽度
height:高度
5，盒子模型：控制布局
margin：外边框
padding：内边框
默认情况下内边距会影响整个盒子的大小
box-sizing:border-box;设置盒子的属性，让width和height就是最终盒子的大小
float：浮动
left
right
JavaScript
JavaScript
概念：客户端脚本语言。即运行在客户端浏览器当中的，不需要编译，直接就可以被浏览器解析执行。
JavaScript由EMCAScript,BOM,DOM构成
与HTML的结合方式：内部结合与外部结合。
内部结合：一般是在head标签中定义一个script标签，然后在script标签中书写js代码
外部结合：在另一个文件中书写代码，最后在head标签中通过script标签的arc属性值调用
（一般常用内部结合的方式）
js相比Java独有的一些东西：
1.在数据前面加'+'号把其强制转换为double类型
2.因为js是弱语言类型，所以字符串‘123’与整形123相比是等同的，可以通过3个‘=’来比较出两者的类型
3.在switch语句中，括号内可以填写任意类型的值
js的输出语句
document.write("字符串")
定义一个变量都用var
js的基础对象
Function函数对象
创建：1.function 方法名称（形式参数列表）{
方法体
}
2.var 方法名=function（形式参数列表）{
方法体
}
属性：.length代表形参的个数
特点：形参与返回值的类型不用写
如果方法名重复会实现覆盖
在方法的内部会有一个隐藏的arguments数组，用以储存所有传入的参数
Array数组对象
创建：1.var arr = new Array(元素列表）
2.var arr = new Array(默认长度)
3.var arr = [元素列表]
方法：jion(参数)将字符按指定的分隔符连接成字符串
push（）在数组的末尾添加一个或者多个字符，并返回新的长度
特点：js当中的数组元素类型可以不一样，数组的长度是可以随时改变的
date日期对象
创建：var date = new Date（）；
方法：tolocaleString():返回当地时间的字符串
getTime():获取当前时间到1970年1月1号的毫秒值差
Math数学对象
创建：直接使用。Math.方法名（）；
方法：random（）：产生0~1的随机数
ceil（）：上取整
floor（）：下取整
round（）：四舍五入
RegExp:正则表达式对象
正则表达式：定义字符串的组成规则
1.单个字符：[]
如：[a] [ab] [a~zA~Z0~9]
*/d:单个数字字符
/w:单个单词字符
2.量词符号
?:出现0次或者1次
*:出现0次或者多次
+:出现1次或者多次
{m,n}:表示大于等于m，小于等于n
{，n}：最多n次
{m，}：最少m次
创建：
var reg = new RegExp("正则表达式")；
var reg = /正则表达式/;
方法：test（参数）：验证指定的字符串是否满足定义的正则范围
Globel
特点：全局变量，不需要对象直接调用其中的方法。
方法：encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,可以编码更多的字符
decodeURIComponent():url解码
parseInt():将字符串中的数字转换出来，遇到字符停止
isNaN():判断一个数是不是NAN
DOM
DOM基础：
*功能：控制html文档的内容
*代码：获取页面标签(元素)对象 Element
*document.getElementById("id值")：通过元素的id值获取元素对象
*操作Element对象：
1.修改属性值：
*属性：.src
1.明确获取的对象是哪一个
2.查看文档找其中有哪些属性可以设置
2.修改标签体内容：
*属性：.innerHTML
1.获取元素对象
2.使用innerHTML属性修改表现体内容
事件
事件基础：
*功能：某些组件被执行了某些操作后，触发某些代码的执行。
*如何绑定事件：
关键属性 onclick ---单击事件
1.直接在标签上，指定事情的属性，属性值为js代码
例：<img id="xxx" src="xxx" onclick="一个js的方法名称">
2.通过js获取元素对象，指定事情属性，设置一个函数
例：var xx=document.getElementById("id值");
xx.onclick=方法名称；
BOM
BOM：
1.概念：将浏览器的各个组成部分封装成对象。
2.组成：窗口对象，浏览器对象，显示器屏幕对象，历史记录对象，地址栏对象
窗口对象（Windows）：
1.创建。可以不需要创建，直接使用其方法
2.方法
1.与弹出框有关的方法
alert（） 显示信息并带有一个确认
confirm（） 显示信息并有确认与取消，返回false与true
prompt（） 显示可以输入的框，返回输入的值
2.与打开关闭有关的方法：
close()关闭浏览器窗口，关闭的是调用其的窗口。
open（）打开一个新的浏览器，返回一个新的Windows对象
3.与定时器有关的方法
setTimeout() 在指定的毫秒数后调用函数或者计算表达式
参数：js代码或者方法对象 毫秒值
返回值：返回一个唯一标识，用以取消定时器
clearTimeout() 取消setTimeout()定时器
setInterval() 循环调用 参数同上
参数：js代码或者方法对象 毫秒值
返回值：返回一个唯一标识，用以取消定时器
clearInterval() 取消setInterval()定时器
3.属性
4.特点 可以直接使用其方法
浏览器对象(location):
1.创建
Windows.location
location
2.方法
reload() 刷新
例：location.reload(); //将当前页面刷新
3.属性
href 设置或者返回完整的URL。
例：location.href="https:www.baidu.com";//相当于在当前页面打开百度
Bootstrap
Bootstrap:
##响应式布局
*同一套页面可以响应不同分辨率的设备
*实现：依赖于栅格系统：将一行平局分为12个格子，可以指定元素占几个格子
*步骤：
1.定义容器。相当于之前的table.
容器分类：
1.container：两边留白
2.container-fluid：占满屏幕
2.定义行。相当于之前的tr 样式：row
3.定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
*设备名称：
1.xs 手机
2.sm 平板
3.md 笔记本
4.lg 台式机
https://www.w3school.com.cn/ HTML/CSS文档网站
https://www.bootcss.com/ 前端开发框架网站
