前端学习之路html基础(03)——常用标签
2017-02-27 11:12
537 查看
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特性;
相关文章推荐
- HTML学习之网页制作基础和常用标签及标签属性
- 前端学习之路html基础(01)——常用标签
- 【基础】Html常用标签:表格<table></table>
- HTML新人基础学习1.2—HTML的常用的标签语法
- 【HTML基础】常用基础标签
- HTML&CSS基础学习笔记5-添加常用的标签
- web开发基础知识之html常用标签和dom结构
- HTML基础之HTML常用标签
- HTML基础-常用标签及图片
- WEB基础__HTML 概述及常用标签
- HTML基础之简单常用标签
- 前端基础之html常用标签
- HTML基础--列表标签 03
- HTML基础--常用标签
- html基础+常用标签
- 前端基础----html初识、常用标签
- 前端学习之路html基础(02)——常用标签
- HTML新人基础学习1.4—添加常用的标签
- HTML基础_03_表单标签
- HTML基础----常用标签(笔记01)