今天主要学习了网页基础知识(html,css,js)
一、了解掌握了各种HTML元素语法及分类
html是HyperText Markup Language (超文本标记语言) 的缩写，是一款描述网页的标记语言(结构语言)
1、HTML主要构成
<!DOCTYPE html> 声明html版本
<html> 告知浏览器文档类型是html
<head>声明html头部信息
<meta /> 定义html元信息规则
<title></title> 定义页面的名称
<link /> 加载外部内容 (比如：css和页面图标)
<style></style> 定义样式
<script></script> 加载脚本文件
</head>
<body>声明html主体内容
...
</body>
</html>
2、HTML元素语法
尖括号包裹，比如：<p>
由开始标签(开放标签)和结束标签(闭合标签)组成，比如：<p></p>开闭原则
注意有些标签没有结束标签，比如：<br> 或者 <br /> ( 习惯规范写法 )
3、HTML元素分类
文档元素：<html>、<head>、<body>、<title>、<meta>、<link>、 <style>、<script>
文章元素：<h1> - <h6>、<p></p>、<br>、<span>、<pre>
字体样式元素：<i>、<b>、<strong>
布局元素：<div>
框架元素：<iframe>、<frameset>、<frame> => HTML5 不再支持 <frameset> 和 <frame>
链接元素：<a>
多媒体元素：<img>
表单元素：<from>、<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<label>、<fieldset>表单元素半包围边框、<legend>标题
列表元素：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
表格元素：<table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>、<caption>
特殊元素：<!DOCTYPE>、<!-- -->、<hr>
span 是一个没有任何样式的段落标签
pre 是一个有带格式的p标签,可以保留缩进、换行（用于展示代码）
div是没有任何样式的块级元素 用来包裹内容和分割内容
label 本身不会有任何的视觉效果，但是优化了鼠标用户的用户体验
块级元素：可以直接设置宽高、默认占一整行
行内块元素：可以直接设置宽高、但是不占一整行
行内元素：不可以直接设置宽高、也不占一整行
3、
<a>元素的链接方式：文本和图片
<a>元素的作用：
（1）指向另一个站点 href=”http://www.xiankesi.cn/”
（2）指向站内的一个文件 href=”./myfile.html”
（3）锚点定位
（4）回到顶部
（5）下载文件
<a>target属性打开链接方式：_self (默认)、_blank、_parent、_top
_parent：指向父frameset文档
_top：去掉所有页框并用document.html取代frameset文档
二、CSS
1、css选择器有5种
.class 类名选择器
#id id选择器
tagName 元素名选择器
* 通配符选择器
html,body,.box 分组选择器
2、css样式分为
（1）内联样式 写到元素内部的
（2）内部样式 写到head里面的style标签
（3）外部样式 独立的css文件；
3、文本样式属性
（1）text-indent ( 缩进文本 ，属性值可以为负数，也可以为百分比)
（2）text-align ( 文本对齐方式 )
（3）letter-spacing ( 字母或者字符的间距 )
（4）word-spacing ( 单词的间距 )
（5）text-transform ( 文本转换 )
（6）text-decoration ( 文本装饰 )
（7）white-space ( 文本空白 )
（8）color ( 文本颜色 )
（9）background-color ( 背景颜色 )
（10）line-height ( 行高，多数浏览器默认的行高是20px)
4、字体样式属性
（1）font-family ( 字体系列 )
（2）font-style ( 字体风格 )
（3）font-weight ( 字体加粗 )
（4）font-size ( 字体大小 )
（5）font ( 字体简写方式 )
( font-style font-weight font-size/line-height font-family )
5、背景样式属性
（1）background-color ( 背景颜色 )
（2）backgroud-image ( 背景图片 )
（3）backgroud-position ( 背景偏移位置 )
（4）backgroud-repeat ( 背景平铺 )
（5）backgroud ( backgroud-image backgroud-position backgroud-repeat )
6、链接样式属性
（1）a:link ( 未被访问的链接 )
（2）a:visited ( 已被访问的链接 )
（3）a:hover ( 鼠标悬浮 )
（4）a:active ( 链接被点击时 )
a的书写样式顺序：LVHA
7、列表样式属性
（1）list-style-image ( 图片标志 )
（2）list-style-type ( 标志类型 )
（3）list-style-position ( 标志位置 )
（4）list-style ( list-style-image list-style-type list-style-position )
8、表格样式属性
（1）border-collapse ( 折叠表格边框为单一边框 )
（2）border-spacing ( 分隔单元格的距离 )
（3）table-layout ( 表格布局 )
automatic ( 默认，列宽由单元格内容设定 )
fixed ( 列宽由表格宽度和列宽度设定 )
固定表格算法快，但是不灵活，而自动表格算法比较慢
9、轮廓样式属性
（1）outline-color ( 轮廓颜色 )
（2）outline-style ( 轮廓样式 )
（3）outline-width ( 轮廓宽度 )
（4）outline ( outline-width outline-style outline-color)
三、JS
1、var声明变量，有变量提升
2、保留字：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。（不能用作标识符）
另外，还有三个词虽然不是保留字，但是因为具有特别含义，也不应该用作标识符：Infinity、NaN、undefined。
3、const声明常量
4、对象的类型
狭义的对象（object）
数组（array）
函数（function）
5、判断数据类型 (typeof 操作符)，typeof操作符可以返回一个值的数据类型
6、js 事件的语法：
ele.action() = function(){
}
四、补充
1、margin: 外边距
padding:内边距
margin简写属性：
margin:0;
上下左右全部为0;
margin:10px 20px;
上下为10 左右为20
margin：10px 20px 30px
上为10px 左右为20px 下为30px
margin：10px 20px 30px 40px;
上 右 下 左
2、/*圆角属性*/
border-radius: 5px;
3、/*浮动属性*/
float:right;
float:left;
4、/*相对定位*/
position: relative;
相对于自身的静态位置定位
left 相对于原先的静态位置的left走，偏移了多少距离
right
top
bottom
5、字体左右居中
text-align: center;
行高等于高度时，字体上下居中
line-height:字体行高
五、课后练习：
1、通过js获取输入框中的vlaue值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过js获取输入框中的vlaue值</title>
<script type="text/javascript">
window.onload=function(){
var a=document.getElementById("t2");
var b=document.getElementById("t1");
a.onclick=function(){
alert(t1.value);
}
}
</script>
</head>
<body>
请输入内容<input type="text" id="t1" /><br/>
<input type="button" id="t2" value="获取输入数据" />
</body>
</html>
2、点击某个元素，更改该元素的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
点击元素改变样式
</title>
</head>
<body>
<div class="box">
<h1 class="text">单击我会变色喔</h1>
<h1 class="text">双击也会变色哦</h1>
<h1 class="text">——黑白 切换——</h1>
</div>
<script type="text/javascript">
window.onload = function(){
var h = document.getElementsByClassName('text');
console.log('h =>',h[2])
for (var i=0 ; i <h.length ;i++) {
h[i].onclick = function(){
this.style.backgroundColor = "Black";
this.style.color = "White";
}
h[i].ondblclick = function(){
this.style.backgroundColor = "White";
this.style.color = "Black";
}
}
}
</script>
</body>
</html>
3、互换变量值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交换a、b变量的值</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var a = 8;
var b = 2;
a=b+a;
b=a-b;
a=a-b;
console.log("a的值为：",a);
console.log("b的值为：",b);
}
</script>
</body>
</html>
4、乘法口诀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九九乘法表</title>
</head>
<body>
<div>
<script type="text/javascript">
window.onload = function(){
var biao="";
for (var a = 1; a <=9; a++) {
for (var b= 1; b <=a; b++) {
biao+=a+"*"+b+"="+a*b+" ";
if(a===b){
biao+="\n";
}
}
}
console.log("九九乘法表：\n",biao);
}
</script>
</div>
</body>
</html>
2967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
