【ASP.NET】E01-20200323-HTML标签

最新推荐文章于 2024-07-09 17:21:09 发布

我不想考公务员

最新推荐文章于 2024-07-09 17:21:09 发布

阅读量181

点赞数

分类专栏： 2020网站设计文章标签： asp.net

本文链接：https://blog.csdn.net/weixin_43968672/article/details/105047368

版权

2020网站设计专栏收录该内容

2 篇文章 0 订阅

订阅专栏

hey, 你好呀！

table标签

第1列

第2列

第3列

表单标记
注意两种传递方法

<form method='GET' border='1'>
	用户名：<input type='text' name='n1' value=name''><br>
	密码：<input type='password' name='n2' value=name'password'><br>
	<textarea name='n3' cols='3' rows='3'></textarea>
	<p> 这个可以实现自动换行
	个人爱好：   <input type='checkbox' name='n4' >看书</input>
			    <input type='checkbox' name='n5' >打球</input><br>
	性别： 	    <input type='radio' name='n6'>男</input> 
				<input type='radio' name='n6'>女</input> 
	所在城市：  <select>
							<option value='01' selected>汉中</option>  
							<option>镇江</option>
							<option>上海</option>
						</select><br>
	<p>
	<input type='button' name-'n6' value='确定'><br>
	上传文件：  <input type='' 
</form>

<form action='新的页面.jsp' method='post'>
	
</form>

frame框架
有利于页面的分割，类似于导航，是整个页面更加有逻辑

<frameset>
	<frame src='第1部分页面.jsp'/>
	<frame src='第2部分页面.jsp'/>
	<frame src='第3部分页面.jsp'/>
</frameset>

课堂练习1：表单的综合运用
课堂练习：表单综合
设置网页关键词与摘要
在这里插入图片描述 link style script
好好学习天天向上

20200330
3. <link>
在这里插入图片描述
css里面要记的：属性名，属性值（这些类似于字典）了解asp；html标签选择器；伪类选择器。

<style>
 名字1{属性: 属性值; }
 #id名字{属性: 属性值}
</style>

<body>
	使用类选择符将申明后的样式，放在标签里面
	<p class="名字1"></p>
	<p id="id名字">
</body>

H01-20200413

外部样式表（import、link）内部样式（head内部）内嵌样式

1. HTML标签选择器

p { }
h1 { }

2. 类选择器（标签选择器）

.classname { }
<标签内 class=’’.classname">

3. id选择器

#id { }

4. 伪类选择器

标签：不同状态下不同的情况 { }

5. 派生选择器

第一个参数和第二个参数之间的代数是可以无限的
css的样式会运用于HTML代码中<ul>下两处<em>元素

<head>
ul em{color:red;}
</head>
<body>
<ul> 
    <li>
        <ul>
            <li>
                <em>This will be styled.</em>   //会变色
             </li>
        </ul>
    </li>
    <li>
        <em>This will be styled too.</em>   //会变色
    </li>
</ul>
</body>

子类选择器

h2 strong {color:red;} 

<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled.</strong>   //会变色
    <strong>This will not be styled.</strong>
<h1>

紧密相连

<head>
li li {color:red;}
</head>
<body>
<div> 
    <ul>     
        <li>List item 1</li> 
        <li>List item 2</li>    //会变色
        <li>List item 3</li>     //会变色
    </ul> 
     <ol> 
         <li>List item 1</li> 
         <li>List item 2</li>    //会变色
         <li>List item 3</li>     //会变色
    </ol> 
</div>
</body>

6. 样式的继承

样式的继承：只有文本与字体样式属性才能够被继承，其余的样式属性不可以被继承可以参考这位博主的

7. JavaScript

style 放样式表单， script 放脚本语言

<script type="text/script">
	var i = 0;
	for (i=0; i<5; i++)
		document.write("<font color=red>内容! </font> <br>");  // 这样就实现了在网页里面嵌入脚本
</script>

直接把js文件拿过来用

<head>
<script src='某js文件.js''></script>  // 类似于css样式表
</head>

恶作剧：一个死循环

<head>
<script>
function hey(){
	while(ture){
		alert("恶作剧！！");
	}
}
</script>
</head>

<body>
	<button onClick="alert('弹出提示~')">点我~</button>  //可以内嵌js
	<button onClick=" hey()">点我~</button> 
</body>

I01-20200420

JavaScript

1. 数据类型

数据类型
（1）强类型：在编译时声明类型
（2）弱类型：在编译时不用声明变量类型，如 Javascript、 VFP

在这里插入图片描述

函数调用方式
语句调用
事件调用

var是局部变量


function showHello(){
	
}
// 用var声明函数内部的

在这里插入图片描述
finally：不管咋样都会处理
异常处理
事件与交互：

onsubmit实现前端验证/检查

事件函数
注： onsubmit实现前端验证/检查
写在html中
这时他会弹出对话框，并返回false
老师程序

Mouse事件 onmousemove() onmouseout() onCLick()

// W3C关于 onmousemove 和 onmouseout 的案例
<!DOCTYPE html>
<html>
<head>
<script>
function bigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}

function normalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
</head>
<body>

<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="/i/eg_smile.gif" alt="Smiley" >

<p>函数 bigImg() 在鼠标指针移动到图像上时触发。此函数放大图像。</p>
<p>函数 normalImg() 在鼠标指针移出图像时触发。此函数把图像的高度和宽度重置为正常尺寸。</p>

</body>
</html>

// onCLick() 方法
<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>

Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>

<button onclick="copyText()">复制文本</button>

<p>当按钮被单击时触发函数。此函数把文本从 Field1 复制到 Field2 中。</p>

</body>
</html>

Windows事件 onLoad()

// onLoad() 一旦运行完一段程序，就执行对应的代码
<!DOCTYPE html>
<html>
<head>
<script>
function load()
{
alert("页面已加载！");
}
</script>
</head>

<body onload="load()">
<h1>Hello World!</h1>
</body>

</html>

Form事件 onChange() onsubmit()

// onChange() 在字段外点击以触发 onchange
<!DOCTYPE html>
<html>
<head>
<script>
function checkField(val)
{
alert("输入值已更改。新值是：" + val);
}
</script>
</head>
<body>

<p>请修改输入字段中的文本，然后在字段外点击以触发 onchange。</p>

请输入文本：<input type="text" name="txt" value="Hello" onchange="checkField(this.value)">

</body>
</html>

// onsubmit()  
<!DOCTYPE html>
<html>
<head>
<script>
function checkForm()
{
alert("表单已提交！");
}
</script>
</head>
<body>

<form action="/demo/demo_form.asp" onsubmit="checkForm()">
姓：<input type="text" name="lname"><br>
名：<input type="text" name="fname"><br>
<input type="submit" value="提交">

<p>函数 checkForm() 在提交按钮被点击时触发。此函数向用户显示一段消息。</p>

</body>
</html>

String 对象 Date 对象老师案例
（0,7）的原因： java不会包括最后一个位置的内容

window的定位（注意层次结构的路径）
在这里插入图片描述 BOM DOM 也是树形结构
DOM

老师案例在这里插入图片描述

<script>
function closewin(){
	if(window.confirm("确认退出吗?");
	window.close();
}
</script>
<body>

</body>

使用window.open(“页面名称”) 打开一个窗口
在这里插入图片描述 location对象获取信息
history

参考文档

老师例子返回页面所有的对象 document.anchor[0];

// 因此name一个页面里面可能会有多个，存在重名，因此document.getElementsByName会返回数值  所以需要document.getElementsByName("tbxname")[0]
<script type="text/javascript">
    function test ( ) {
        var name = document.getElementsByName("tbxname")[0].value;
        var gd = document.form1.rbngd[0].checked ? "男" : "女";
        alert("你的输入是：" + name  + "\t" + gd);
    }
</script>
<body>
// ....
</bldy>

我自己改的吼吼！