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

来源：互联网发布：问道完整源码编辑：程序博客网时间：2024/06/08 00:13

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>

点击跳转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特性；

0 0