HTML基础

妩明宝宝

浏览: 16327 次
性别:
来自: 武汉

最近访客更多访客>>

guhaibin

用户5991881736

lc113611

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-10 ( 19)
更多存档...

博客分类：

JAVAEE少年

html 编程 web

HTML 是用来描述网页的一种语言。
• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
• HTML 标签是由尖括号包围的关键词，比如 <html>
• HTML 标签通常是成对出现的，比如 <b> 和 </b>
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签
单标签：<tag/>
双标签：<tag>              </tag>
HTML 文档(标签) = 网页（视图）
• HTML 文档描述网页
• HTML 文档包含 HTML 标签和纯文本
• HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
.htm 还是 .html 文件后缀？
当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。我们在实例中使用 .htm。这只是长久以来形成的习惯而已，因为过去的很多软件只允许三个字母的文件后缀。
不过对于新的软件，使用 .html 完全没有问题。
什么是 HTML 标签
• HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
• HTML 标签由开始标签和结束标签组成
• 开始标签是被括号包围的元素名
• 结束标签是被括号包围的斜杠和元素名
• 某些 HTML 元素没有结束标签，比如 <br />
注释：开始标签的英文翻译是 start tag 或 opening tag，结束标签的英文翻译是 end tag 或 closing tag。
HTML 元素
• HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素语法
• HTML 元素以开始标签起始
• HTML 元素以结束标签终止
• 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容（empty content）
• 空元素在开始标签中进行关闭（以开始标签的结束而结束）
• 大多数 HTML 元素可拥有属性
嵌套的 HTML 元素
• 大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
• HTML 文档由嵌套的 HTML 元素构成。
空的 HTML 元素
• 没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
• <br /> 就是没有关闭标签的空元素（<br /> 标签定义换行）。
• 在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。
• 在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
• 即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML 属性
• HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
• 属性总是以名称/值对的形式出现，比如：name="value"。
• 属性总是在 HTML 元素的开始标签中规定
HTML 提示：使用小写属性和标签
• 属性和属性值对大小写不敏感。
• 不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
• 而 XHTML 要求使用小写的属性/属性值。
• HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
• 万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
<table frame="box">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
</table>
<table frame="above">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
</table>
<table frame="below">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
</table>
<table frame="hsides">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
</table>
<table frame="vsides">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
表格标签
<thead><tbody><tfoot>只被主流浏览器部分支持，不建议使用
<caption>我的标题</caption><!—定义表格的标题-->
<colgroup span="2" align="left"></colgroup><!—修改两列的样式属性-->
<colgroup align="right" style="color:#0000FF;"></colgroup>
<dl>
<dt>咖啡</dt>
<dd>黑色的热饮料</dd>
<dt>Milk</dt>
<dd>白色的冷饮料</dd>
</dl>
<img
src="../i/eg_planets.jpg" tppabs="http://www.w3school.com.cn/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area shape="circle" coords="180,139,14" target ="_blank" alt="Venus"
href ="l" tppabs="" />

<area shape="circle" coords="129,161,10" target ="_blank" alt="Mercury"
href ="" tppabs=""/>

<area shape="rect" coords="0,0,110,260" target ="_blank" alt="Sun"
href ="" tppabs=""/>

</map>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

1. HTML文档规范：
① 后缀名：可以是‘htm’也可以是‘html’
② 一个html文档时由多个标签组成的，但是必须有一个根标签
<html></html>：根标签，当前html文档中的其他标签都位于这个标签的里面
③ 在标签<html></html>里面通常由两部分组成：<head></head>和<body></body>这两个标签是相互独立的
<head></head>:此标签中主要包含一些与页面属性相关的元信息，最常用的就是<title></title>标签
<title></title>:定义当前文档的标题，用于区分不同的页面
<body></body>:用于定义当前页面显示的所有内容，也就是说在body标签中写什么标签，在网页中就会消失什么视图
2. 常用的HTML标签（标签就是对应的视图表现）
标题标签：<h1></h1>
   <h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
水平线标签：<hr color="orange" width="100px"/>
注释：
段落标签+换行标签：<p></p><br/>
段落间间隔比较大，换行间隔相对来说小
文本的格式化标签：加粗，斜体，上标，下标，删除线
文本字体标签：font
<font color="red" face="黑体" size="+10">
链接锚标签：<a href=”链接地址” target=”blank”></a>
表格标签：
<html>
    <head>
<title>表格</title>
    </head>

    <body>

<table border="1" bordercolor="pink">
    <tr>
<td width="100px">1-1</td>
<td>1-2</td>
<td>1-3</td>
    </tr>
    <tr>
<td colspan="2">2-2</td>
<td>2-3</td>
    </tr>
</table>
<hr/>
<table border="1" bordercolor="blue">
    <col align="right"/>
    <colgroup span="2" style="color:pink"
align="center"/>
    <caption>用户列表</caption>
    <tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
    </tr>
    <tr>
<td>1</td>
<td>小皮</td>
<td>男</td>
    </tr>
    <tr>
<td>2</td>
<td>小花</td>
<td>女</td>
    </tr>
</table>

</body>

列表标签：<ol></ol>有序列表 ----<ul></ul>无序列表 <li></li>列表
<dl></dl> <dt></dt><dd></dd>
3. 元素：指的是当前标签，以及当前标签中属性和所包含的所有内容的整体
4. 属性：每一个标签都有默认的样式，我们可以通过在标签中添加不同的属性来修改当前标签外在表现【我们可以在双标签的‘前标签’或者单标签中添加一个键对值，来修改当前标签的外在显示或者标识当前标签，我们就把这些键值对称之为当前标签的属性】

5. 常用的表单输入标签：
form标签：主要用于提交页面用户输入的数据，当我们点击当前from中的submit按钮的时候，form就会将其中的所有的用户输入的数据，提交到url指定的地方---------
① Input标签：提供一个输入视图，可供用户输入数据
其中有一个属性type属性，此值有10种，每一种type都对应着一种不同的视图效果，提供的输入方式也不一样
②<input type="button" value="普通按钮"/>：本身不具备value属性改变按钮上的文字，可通过脚本语言赋予功能；
③<input type="checkbox" name="hobby" value="basketball"/><br/>
复选框：注意—如果多个选项属于同一题目，那么这多个选项的name属性值要保持一致，并且要给出对应的value属性值；
④<input type="file" name="myFile" id="myFile"/>：文件上传控件，提供一输入框和一个‘浏览’按钮，当用户需要上传文件的时候，点击按钮，选择相应的文件；
⑤<input type="image" src="image/loginan.gif" />：图片按钮，将图片作为一个按钮，能实现一个按钮功能；
⑥<input type="text" id="usename" /><br/>：文本输入框；
⑦<input type="password" id="pass" />：密码输入框；
⑧ <input type="radio" name="sex" value="aaa" />：单选框（同一个选项下name属性值要一致—同复选框一样）；
⑨<textarea name="content" rows="10" cols="5"></textarea>：文本域—可以完成文本的多行输入—name属性用于向代码中传值，通过rows和cols来改变文本域的高度与宽度；
实例：
<form name="form1" action="http://www.baidu.com/">
    <input type="text" name="name1" id="name1" />
        <input type="password" name="pass1" id="pass1" />
        <input type="reset" value="取消" />//重置标签按钮
        <input type="submit"   value="登陆"/>//提交按钮
    </form>
    <form name="form2" action="http://www.hao123.com/">
   <input type="text" name="name2" id="name2" />
        <input type="password" name="pass2" id="pass2" />
        <input type="reset" value="取消" />
        <input type="submit" value="登陆" />
</form>
⑩Img标签：<img src="image/jingxuan096.jpg" id="myImg" usemap="#mymap" width="100%" alt="你点我"/>；
（11）Map标签：<map name="mymap" id="mymap">
    <area shape="rect" coords="0,0,960,1080" href="http://www.baidu.com" target="_blank" alt="map"></map>；
（12）下拉菜单标签：<select name="province">
            <option>--请选择--</option>
            <option value="hb">湖北</option>
                        <option value="hn">南北</option>
                        <option value="sh">上海</option>
            </select><hr />；
（13）文本域标签：<textarea name="content" rows="10" cols="50"></textarea><br />；
Frameset标签：<frameset rows="100,*" border="0">
    <frame   name="head" src="head.html" noresize="noresize" scrolling="no"/>
        <frameset cols="150,*" >
        <frame name="left" src="menu.html" noresize="noresize"/>
        <frame name="right" src="other.html"/>
        </frameset>
    </frameset><noframes></noframes>
把一个页面分成几部分页面
Div标签：固定面板在div容器中；

分享到：

java中的Properties类疑惑 | java三大特性基础简述（实例）

2012-10-14 20:58
浏览 801
评论(0)
论坛回复 / 浏览 (0 / 1809)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML基础

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML基础

评论

发表评论

相关推荐

java实现网站登录验证码功能

JDBC分页实现

最近访客更多访客>>