前端学习之路html基础(03)——常用标签

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>

前端学习之路html基础(03)——常用标签

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基础(03)——常用标签

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基础(03)——常用标签

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>

点击跳转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基础(03)——常用标签

到目前，最基本的html标签学习完毕，下一步学习html5特性；

秒客网

前端学习之路html基础(03)——常用标签

HTML 区块、布局

HTML 表单

HTML 框架

HTML 脚本

相关文章