浏览 1821 次
|
锁定老帖子 主题：HTML基础
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2012-10-14
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容器中； 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
