Html
1.html简介
HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。
1.1 Html练习
1.1.1 html超链接
<a href="http://www.baidu.com" target="_blank">百度链接</a><hr /><br />
<div id="aaa">
<img src="啊啊啊.jpg" width="500" height="330"/>
</div>
target 属性规定提交表单后在何处显示响应。
target 属性可设置以下值之一：
| 值 | 描述 |
|---|---|
| _blank | 响应显示在新窗口或选项卡中。 |
| _self | 响应显示在当前窗口中。 |
| _parent | 响应显示在父框架中。 |
| _top | 响应显示在窗口的整个 body 中。 |
| framename | 响应显示在命名的 iframe 中。 |
1.1.2 表单练习
<!-- 表单练习 -->
<form method="post" autocomplete="on" >
<label for="fname">账户名：</label><br>
<input type="text" id="fname" name="username" value=""><br>
<label for="lname">密码：</label><br>
<input type="password" id="lname" name="passwprd" value=""><br><br>
<input type="submit" value="登录" formtarget="_blank" formaction="https://www.baidu.com/">
<input type="submit" value="注册" formtarget="_parent">
</form>
-
Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
-
input元素是最重要的表单元素。
text定义常规文本输入。
radio定义单选按钮输入（选择多个选择之一）
submit定义提交按钮（提交表单）
-
action 属性定义在提交表单时执行的动作
-
Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
-
accept-charset规定在被提交表单中使用的字符集（默认：页面字符集）。
-
target 属性规定提交表单后在何处显示响应。
_blank 响应显示在新窗口或选项卡中。
**_self** 响应显示在当前窗口中。 _parent 响应显示在父框架中。
_top 响应显示在窗口的整个 body 中。
-
autocomplete 启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。
1.1.3 表单练习2
下拉框：
<!-- 下拉选择框 -->
<select name="age">
<option value="shisi">14</option>
<option value="shiwu">15</option>
<option value="shiliu">16</option>
<option value="shiqi">17</option>
</select>
文本域：
<!-- 文本域 -->
<form action="test.html">
<textarea name="message" rows="10" cols="30">请输入内容.</textarea>
<br><br>
<button type="button" onclick="alert('Hello World!')">点我会弹出</button>
</form>
热选框：
<!-- 输入选择框 -->
<form >
<input list="browsers">
<datalist id="browsers">
<option value="aaaaa">
<option value="代码">
<option value="笔记本">
<option value="电脑">
<option value="手机">
</datalist>
</form>
input type=“checkbox” 多选框
<!-- 多选框 -->
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br />
<input type="submit" value="确定"/>
</form>
输入限制：
<form >
输入年龄:
<input type="number" name="age" min="1" max="100">
<br />
输入生日:
<input type="date" name="birthday" />
<br />
选择滑动：
<input type="range" name="points" min="0" max="10">
<br />
选择周年：
<input type="week" name="week_year">
<br />
输入时间：
<input type="time" name="usr_time">
<br />
输入邮箱：
<input type="email" name="email">
<br />
搜索：
<input type="search" name="googlesearch">
<br />
<input type="submit" value="提交" formaction=""/>
</form>
1.1.4 框架/内联框架
混合框架：
<frameset rows="50%,50%">
<frame src="啊啊啊.jpg">
<frameset cols="25%,75%">
<frame src="啊啊啊.jpg">
<frame src="啊啊啊.jpg">
</frameset>
</frameset>
内联框架：
<body>
<iframe src="啊啊啊.jpg" width="500" height="500"></iframe>
</body>
1.1.5 Html引入css/js的三种方式
外部样式表、内部样式表、内联样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML引入JS/CSS的三种方式</title>
<!--引入外部的css文件-->
<link rel="stylesheet" href="css/index.css" />
<!--引入外部的js文件-->
<script type="text/javascript" src="./index.js"></script>
<!--在head中添加js控制-->
<script type="text/javascript">
function onClickB1() {
document.getElementById("b1").innerHTML = "HEAD";
}
</script>
<!--在head中添加css修饰-->
<style type="text/css">
#j2 {
background-color: #808080;
}
</style>
</head>
<body bgcolor="#F5F5F5">
<div id="j1" class="divs">
<button id="b1" onclick="onClickB1()">在head中</button>
<p>方式一：将js代码写在head中，如本例所示，点击按钮改变按钮的内容！</p>
<p>
同理，也可以将css样式写在head中，如上面的代码所示，设置j2的背景色，这里需要注意的是，其实我在外部的css文件中也设置了j2的背景色，
所以这两处设置是冲突的，但实验证明，网页中显示的是在head中修饰的属性值，这也许就是近水楼台先得月吧！
</p>
</div>
<div id="j2" class="divs"">
<button id=" b2" onclick="onClickJ2()">在body中</button>
<p>方式二：将js代码写在body中，如本例所示，点击按钮改变div的背景色！</p>
<p>同理，在html的body中也可以设置css样式，代码如下面所示，设置b3的文字颜色为红色。</p>
</div>
<div id="j3" class="divs">
<button id="b3" onclick="gaiBian()">在外部js中</button>
<p>方式三：将js代码写在外部js文件中，并在html文件的head中引入该js，在本例中，点击按钮改变按钮的内容，并改变div的颜色！【推荐】</p>
<p>当然，将css通过外部文件的方式引入html是最好的，也是推荐的方式。【推荐】</p>
<p style="background: red;"><strong>这里需要注意的是，和js不同的是，css可以直接写在组件的内部，例如在此，我将文字直接加粗,背景变红！</strong></p>
</div>
<!--在body中添加js控制-->
<script type="text/javascript">
function onClickJ2() {
document.getElementById("j2").style.background = "red";
}
</script>
<style type="text/css">
#b3 {
color: red;
}
</style>
</body>
</html>
index.css
.divs {
width: 100%;
height: 250px;
background-color: grey;
/*margin的属性顺序是上右下左*/
margin: 10px 10px 5px 1px;
}
#j1 {
/*这里把上面divs中设置的背景颜色覆盖了*/
background-color: white;
}
#j2 {
/*这里把上面divs中设置的背景颜色覆盖了*/
background-color: whitesmoke;
}
#j3 {
/* 这里把上面divs中设置的背景颜色覆盖了*/
background-color: antiquewhite;
}
index.js
function gaiBian () {
document.getElementById("b3").innerHTML = "外部成功";
document.getElementById("j3").style.background = "lemonchiffon";
}
执行前：
执行后：
1.1.6 本地存储
本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。";
} else {
document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">请点击这里！</button></p>
<div id="result"></div>
<p>请点击按钮使计数器递增。</p>
<p>请关闭浏览器或标签页，然后再试一次，计数器将继续计数（不会重置）。</p>
</body>
</html>
``
2161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
