实训日记·oneday

最新推荐文章于 2022-06-27 18:13:39 发布

Skeram_Huang

最新推荐文章于 2022-06-27 18:13:39 发布

阅读量533

点赞数

分类专栏： X学习笔记

本文链接：https://blog.csdn.net/Huangxu_MIKU/article/details/92722094

版权

X学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、课堂笔记

html 5 
sublime 
1) html+tab 生成结构
2）命名带html后缀
3）html文档结构1、头部2、body3、样式（css）style 4、脚本（JavaScript）
4）h5遵循开闭原则，除了换行符<br/>等属于单标签（可加可不加）

span标签 段内标签不换行 包裹文本或者分割文本（改变字体、颜色等特征）
p标签 段外标签换行

pre标签 只是一个带格式的p标签
保留格式展示计算机代码，带缩进和格式
&lt等于小于号 &gt等于大于号

块级元素（div）：默认占取一整行，可以直接设置宽高
非块级元素（行内块元素）（img）：可以设置宽高，仅占所占区域
行内元素（span）：不能直接设置宽高

·只能由上往下嵌套

div：没有任何样式的块级元素，用来分割或者包裹内容
iframe：框架元素，用来显示其他内容
a：链接元素，用法：链接、冒顶、下载、邮件
img：图片元素
optgroup：与下拉列表并用，下拉列表菜单（包裹下拉列表的元素）
lebel：不会有任何的显示效果，只是优化了鼠标用户体验，与input并用
fieldset：元素半包围边框，效果不可控且css改变比较复杂
legend：标题标签（与fieldset并用）

css
内联样式：直接写到元素内部（在标签内部直接style）
内部样式：在head设置，作用于相关的标签
外部样式：外部独立的css文件，需要link rel href type引入css文件，样式复用，内容与表现分离

·一般使用外部样式

margin：外边距，让块级元素居中、优化显示效果 auto：自动居中效果
四种写法：1、直接使用margin：0； 上下左右为0px
          2、margin：10px 20px；上下为10 左右为20
          3、margin： 10px 20px 30px； 上为10px 左右为20px 下为30px
          4、margin：10px 20px 30px 40px； 上右下左

paddi：内边距
border-radius：边框圆角，弧度等于高度的一半时，变成一个圆（正方形）
float：元素浮动属性
position：定位属性 相对定位（relative） 绝对定位（absolute）：相对于父级元素
固定定位（对于窗口而言）fixed：不需要父级元素作为参照
left right top bottom：轴变动，与position并用

a标签 LVHA保持顺序不能变

JavaScript
window.onload等待样式加载完成
console控制台打印日志log黑色 error红色 
alter警告框


var关键字（数据类型）变量名提升 直接+得到字符串拼接 只有在比大小时才使用值
script获取html元素值
DOM js操作网页的一个借口，通过标签名获取元素（id）
如： var div=document.getElementsById(‘标签的id’);
通过类名获取元素（class）
如：var div=document.getElementsByClassName('类名');
通过元素名获取元素
如：var div=document.getElimentsByTagName(‘元素名’);
获得的是个数组，若要精确取得元素，可以通过定义数组下标获得元素

通过css选择器返回所有选择匹配元素
如：var div=document.querySelectorAll（‘选择器名’）
.class类名选择器
#id id选择器
tagName 元素名选择器
*通配符选择器
html,body,.box分组选择器

事件语法：xxz
div.action()=function(){};

二、课堂作业

1)通过js获取输入框中的vlaue值

使用onclick监听，在function内处理

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<input type="text"  id="one">
<input type="button" id="two" value="获取">
<script type="text/javascript">
window.onload=function(){

	var one=document.getElementById("one");
	var two=document.getElementById("two");
	
	two.onclick=function(){
		console.log(one.value);
	}
	
}

</script>
</body>
</html>

2)点击某个元素，更改该元素的样式

使用onclick点击事件实现作业

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="change.css">
</head>
<body>

<input type="button" onclick="document.getElementById('red').style.color='red'" value="变红" id="red">
<input type="button" onclick="document.getElementById('blue').style.color='blue'" value="变蓝" id="blue">
<input type="button" onclick="document.getElementById('green').style.color='green'" value="变绿" id="green">
</body>
</html>

3)互换变量值（不设置第三变量）

先求两数之和，再求差，最后得到两数交换的结果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
	window.onload=function(){
		var a=2;
		var b=8;
		console.log('交换前变量');
		console.log('a='+a);
		console.log('b='+b);
		a+=b;
		b=a-b;
		a-=b;
		console.log('交换前变量');
		console.log('a='+a);
		console.log('b='+b);
	}
</script>
</body>
</html>

4)乘法口诀

嵌套for循环

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
	window.onload=function(){
		document.write('<table class="table" border="1">');
          for(var r=1;r<=9;r++){
              document.write('<tr>');
              for(var s=1;s<=r;s++){
                  document.write('<td>'+s+'*'+r+'='+(r*s)+'</td>');
              }
        document.write('</tr>');
         }
    document.write('</table>');
	}
</script>
</body>
</html>

Skeram_Huang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实训日记·oneday

一、课堂笔记html 5 sublime 1) html+tab 生成结构2）命名带html后缀3）html文档结构1、头部2、body3、样式（css）style 4、脚本（JavaScript）4）h5遵循开闭原则，除了换行符<br/>等属于单标签（可加可不加）span标签段内标签不换行包裹文本或者分割文本（改变字体、颜色等特征）p标签段外标签换行...
复制链接

扫一扫