JavaWeb入门（五）-HTML/CSS/Javascript基础
原文地址
DTD文档模型和HTML基础
是目前最流行的文档模型， 即 HTML5 模型。
常见标签的含义
表示指定文档的编码字符集为 utf-8。
viewport用于配置用户入口的一些参数，主要用于设置移动端的缩放比例等参数， width指定为设备的宽度， maximum-scale用于指定缩放比例，指定为1.0时表示不允许缩放。
语义化
语义化指我们在使用HTML标签的时候要注意选择合适的标签进行表达，这样的书写方式会使得我们的html 结构清晰，逻辑分明 ， 极大地方便了阅读以及日后的维护。
- -表示标题，重要性和大小依次递减。
- 表示段落，因此在p标签内使用强制换行在语义的角度是错误的。
- 表示重要的文本。
- 表示强调的文本。
- 标签表示一段斜体的文字，不过现在常用于表示一个。
常用标签
要养成多写注释的好习惯，使得html层次分明。
如：
这样的注释适用于无法直接通过html元素看出清晰结构的场景。
图片标签中的 alt 与 title 属性。
alt 属性是图片无法显示时展示的图片，而 title 是鼠标悬停时显示的文字。
a 标签的 target 属性用于指明链接打开的方式：
- _blank 在新的窗口中打开。
- _self 在原窗口打开。
标签是 水平分割线。
是有序列表。（ordered list）
是无序列表。 （unorderd list）
表格
一行
一个单元格
表头单元格
属性为合并行
属性为合并列
一般对于table的设计可以借助一些工具例如DreamWeaver,但现在用table来表现表格的不多见。
标签 表示内联框架，可以理解为浏览器中的浏览器。
表单控件
注： 所有的表单控件都要放到标签中。
HTML5改良的input元素
< input type="tel"> < input type="number"> 数字类型和电话类型的输入，然而支持并不好。
< input required> 表示 该输入框要求必填。
< input autofocus> 表示自动聚焦。
< label for="input_name"> 表示点击该label文字时聚焦到控件input_name中去。
CSS基础
三种使用css的方法
- 行内样式
- 内部样式 写在< head>标签中
- 外部样式
CSS选择器
6种常用选择器
- 标签选择器
页面中所有table的样式
- 类选择器
所有btn类的样式
- ID选择器
表示id为navBtn的样式
- 后代继承选择器
表示类container下所有table的样式
- 群选择器
表示container类和wrapper类都具有的样式
- 属性选择器
表示type属性为text的input空间的样式。
- 伪类选择器
CSS选择器的优先级
important > 内联 > Id > 类 > 属性
CSS核心模型
- 浮动 float
让原有元素脱离正常的文档流，实现左右排列，在不设置宽度的情况下宽度会变为最小宽度。如一个div设置了浮动，那么宽度会变为最小，不再是整行。
就像排队买票，突然有人飞了起来，骑到了别人的脖子上。
- 定位 position
relative:相对定位，指偏移后位置还在，原位置还占有文档流，偏移位置是相对原位置。
absolute:偏移后，原位置就没了，元素脱离了文档流，靠离自己最近的父容器中定位是absoute或relative的元素的位置进行偏移，一般它的父元素中并没有使用absolute/relative定位的，因此是相对整个文档< body>的偏移。
fixed: 固定定位，无论浏览器如何滚动，位置不变。
static: 默认的定位，即文档流定位。
- 行高 line-height
normal: 默认合理行高
number: 设置数字，该数字与当前字体尺寸相乘
length: 固定行间距
%： 基于当前尺寸尺寸的百分比
inherit: 继承自父节点
- 水平，垂直居中
text-align: center 文字居中
margin-left:auto;margin-right:auto; 也可居中
例： 用div模拟table cell的居中
注： 将一个元素宽高设置的特别大，那么它的宽度受父元素的限制，而高则不受限制。
例： 如何让一个div相对父元素居中？
CSS盒模型
默认元素都有自己的margin和padding，开发前如需去掉默认，那么需要以下代码：
标准/怪异盒模型
标准盒模型（W3C盒模型）：
W3C盒模型的宽度或者高度计算方式为：width/height = content。
怪异盒模型（IE盒模型 一般用于移动端布局）：
怪异盒模型的宽度或者高度计算方式为：width/height = content + padding + border。
如果计算一个盒子的长宽高，我们一般都是盒子本身的厚度加上盒子里的空间大小，所在在IE盒模型和W3C盒模型，我们会觉得IE盒模型更符合逻辑。
而我们利用CSS3的一个属性box-sizing:content-box | border-box | inherit, 默认值是 content-box 标准盒模型，宽度或高度仅仅限定内容的宽度和高度，盒子实际的宽度或高度为内容的宽高 + padding值 + border 值。如果值是 border-box, 则元素为怪异盒模型，宽度和高度即限定了盒子的大小，不会受到padding和border的影响。
如果页面整体使用标准/怪异盒模型，那么需要以下样式。
- overflow是一个很有用属性，它规定了当盒子中的内容超出了盒子大小时该如何使用
- overflow: hidden 表示超出部分隐藏，overflow: scroll表示超出部分可以用滚动条滚动。
CSS弹性盒模型
双飞翼布局
Javascript 基础
Javascript是一种 动态、弱类型、基于原型、 解释型 的语言。
变量类型
Js的变量是弱类型的，所有的变量类型都是对象，即 万物皆对象。
但也可以通过typeof()可以查看具体具体类型。
一般有如下几种类型：
以上几种变量的声明:
js文件的引入
- 页面中的js
- 外部js
变量和函数的命名法
驼峰式命名法： myName, getData;
switch 语句
字符串与数组
w3c java 基础
Array 对象
JS对象和函数
数值类型与数学函数
Javascript中的所有数值都是64位浮点型小数.
Js中小数计算有误差，对于精确运算要小心，如0.3/0.1 = 2.99999999999996
NaN表示非数值，它是一个值， 但 NaN != NaN,它不等于任何值，判断是否非数值要使用isNaN(value)方法
NaN做boolean运算时当做false,同 0， null, undefined, NaN, ""
isNaN(NaN)为true，是唯一为true的情况。
在原型上挂载
数学函数
常量： Math.E Math.PI
常用方法：
JS事件流
事件流的概念：在页面中接受事件的顺序。
- 事件冒泡：
由最具体的元素接收，然后逐级向上传至最不具体的元素节点。（文档）
- 事件捕获
由最不具体的元素先接收，逐级向下传至最具体的元素。
事件处理
- DOM 0级事件处理：把一个函数复制给一个事件处理程序属性。
例
这种方法的缺点是只能为事件处理程序属性绑定唯一的函数，当多次绑定时会覆盖之前的绑定。
- DOM2 事件处理
addEventListener("事件名", 事件处理函数, true/false);
true时事件流为捕获，由外向内，false时为事件冒泡，由内向外。默认false。
removeEventListner("事件名", 事件处理函数, true/false)
例
事件对象
在触发DOM事件的时候都会产生一个对象：event,它有以下常用属性：
type: 事件类型
target: 事件目标
currentTarget: 当前目标
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。
只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。
例
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.bianchenghao6.com/h6javajc/25839.html