HTML 区块、布局
在html中可以通过<div>和<span>将各个元素组合起来；它们分别是区块元素和内联元素。
1. <div> 区块元素
<div>标签表示的是块级元素，它可以当做容器来组合其他html元素；区块元素在显示时，会在新行开始和结束。比如<p>、<h1>等就是区块元素；如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性；<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像
</title>
<style type="text/css">
h1 {color: red; font-size: 20px}
</style>
</head>
<body>
<p>hello world
</p>
<div style="color: blue;font-size: 20px">
<p>hello world
</p>
</div>
<p>hello world
</p>
</html>
2. <span> 内联元素
<span>表示的是内联元素，它不以新行开始和结束。当与 CSS 一同使用时，可用于为部分文本设置样式属性。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像
</title>
<style type="text/css">
h1 {color: red; font-size: 20px}
</style>
</head>
<body>
<p>hello
<span style="color: blue">world
</span></p>
</html>
HTML 表单
表单是一个包含表单元素的区域；表单元素是允许用户在表单中输入内容，比如，文本框，下拉列表、单选框、复选框等等；输入元素用标签<input>表单的输入元素标签用<input>来表示，name来区别不同的<input>id，type用来指定输入便签的类型（文本，密码，单选框等）；text属性，代表文本；password属性，代码密码输入框；radio属性，定义单选框；checkbox属性，定义复选框；select属性定义下拉列表，option属性定义下拉列表的每一项；submit属性，定义提交按钮；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像
</title>
<style type="text/css">
h1 {color: red; font-size: 20px}
</style>
</head>
<body>
<form>
请输入名称：
<input type="text" name="nameIp"><br>
请输入密码：
<input type="password" name="passwordIp"><br>
请选择性别：
<input type="radio" name="sexRadio" value="man">男
<input type="radio" name="sexRadio" value="woman">女
<br>
请选择爱好：
<input type="checkbox" name="yourLove" value="footbar">足球
<input type="checkbox" name="yourLove" value="music">音乐
<input type="checkbox" name="yourLove" value="running">跑步
<br>
请选择住址：
<select name="myCountry">
<option value="USA">美国
</option>
<option value="China" selected>中国
</option>
<option value="Germany">德国
</option>
</select><br>
<input type="submit" name="submitBtn" value="提交资料">
</form>
</body>
</html>
HTML 框架
我们可以在同一个浏览器窗口中显示不止一个页面，这时候就用到<iframe>标签。它定义一个内联框架；可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。使用 CSS 为 <iframe>（包括滚动条）定义样式。src属性，用来定义框架显示的目标地址;width、height属性来表现框架的大小，可以是具体的数值，也可是百分比。200,10%；frameborder属性是显示表框的大小，0表示不显示边框；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像
</title>
<style type="text/css">
h1 {color: red; font-size: 20px}
</style>
</head>
<body>
<iframe src="http://www.baidu.com" width="700" height="300" frameborder="20" name="myIframe">
这里的文本应对不支持该标签的浏览器
</iframe>
<a href="http://blog.csdn.net/weixin_36244867" target="myIframe">点击跳转myBlog
</a>
</body>
</html> <iframe src="http://www.baidu.com" width="700" height="300"> 这里的文本应对不支持该标签的浏览器 </iframe>
点击跳转myBlog
HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。<script> 标签用于定义客户端脚本，比如 JavaScript。<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。javaScript 最常用于图片操作、表单验证以及内容动态更新。<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素;只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
一个简单的例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像
</title>
<style type="text/css">
h1 {color: red; font-size: 20px}
</style>
</head>
<body>
<p id="page1">this is the first page;
</p>
<p id="page2">this is the second page;
</p>
<script >
function myFunction1() {
document.getElementById("page1").innerHTML="Hello JavaScript!";
}
function myFunction2() {
x=document.getElementById("page2")
x.style.color="#FF4A00"
}
</script>
<button type="button" onclick="myFunction1()">改变文本
</button>
<button type="button" onclick="myFunction2()">改变颜色
</button>
</body>
</html>
到目前，最基本的html标签学习完毕，下一步学习html5特性；
转载请注明原文地址: https://ju.6miu.com/read-450137.html
