zoukankan      html  css  js  c++  java

  • HTML基础

    HTML指的是超文本标记语言 (Hyper Text Markup Language)， HTML不是一种编程语言，而是一种标记语言 (markup language) ，HTML使用标记标签来描述网页。

    HTML 文档是由 HTML 元素定义的。HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
    注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。空元素在开始标签中进行关闭（以开始标签的结束而结束），大多数 HTML 元素可拥有属性。

    HTML 实例
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

    在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。HTML 标签对大小写不敏感：<P> 等同于 <p>。推荐使用小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

    <p> 元素定义了 HTML 文档中的一个段落。<body> 元素定义了 HTML 文档的主体。<html> 元素定义了整个 HTML 文档。

    HTML 属性
    属性为 HTML 元素提供附加信息，属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。 

    属性实例：
<a href="http://www.cnblogs.com">This is a link</a>链接的地址在 href 属性中指定
<h1 align="center"> 拥有关于对齐方式的附加信息。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<table border="1"> 拥有关于表格边框的附加信息

    属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，
    HTML 标准属性：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

    HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。HTML 链接是通过 <a> 标签进行定义的。HTML 图像是通过 <img> 标签进行定义的。HTML 水平线：<hr /> 标签在 HTML 页面中创建水平线。

    元素标签
    HTML 注释：可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。 

    <!-- This is a comment -->

    段落是通过 <p> 标签定义的。HTML 折行，如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签： 

    <p>This is<br />a para<br />graph with line breaks</p>

    当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
    显示预排<pre>标签，文字标签<font>，加粗<b>，斜体<i>，下划线<u>，下标<sup>，上标<sub>，<strong> 标签和<em> 标签一样，用于强调文本，但它强调的程度更强一些。<big> 标签和其相应的 </big> 标签之间的文字，其字体比周围的文字要大一号。<small>要小一号。
    “计算机输出”标签 ： 

    <code>Computer code</code>
<kbd>Keyboard input</kbd>
<tt>Teletype text</tt>
<samp>Sample text</samp>
<var>Computer variable</var>

    缩写和首字母缩写： 

    <abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>

    如果浏览器支持 bi-directional override (bdo)，会从右向左输出： 

    <bdo dir="rtl">
Here is some Hebrew text
</bdo>

    显示：Here is some Hebrew text
    块引用： 

    <blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
<q>
这是短的引用。
</q>

    使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
    删除字效果和插入字效果： 

    <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>

    HTML 样式
    使用添加到 <head> 部分的样式信息对 HTML 进行格式化： 

    <html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>

    没有下划线的链接： 

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<a href="/example/html/lastpage.html" style="text-decoration:none">
这是一个链接！
</a>
</body>
</html>

    链接到一个外部样式表： 

    <html>
<head>
<link rel="stylesheet" type="text/css" href="/csstest.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>

    有三种方式来插入样式表：外部样式表、内部样式表、内联样式。

    HTML 链接
    将图像作为链接： 

    <html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>

    有两种使用 <a> 标签的方式：
    通过使用 href 属性 - 创建指向另一个文档的链接；通过使用 name 属性 - 创建文档内的书签；使用 Target 属性，你可以定义被链接的文档在何处显示。
    提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
    邮件链接： 

    <a href="mailto:test@126.com">发送邮件</a>
另一个负载的 mailto 链接：
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>

    HTML 图像
    <img src = "路径" alt = "文字说明" width = "宽" height = "高" border = "边框" align = "对齐方式"/>
    背景图片：<body background="/i/eg_background.jpg">
    创建图像映射，每个区域都是一个超级链接： 

    <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<!-- map -->
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14"
href ="/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10"
href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260"
href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>

    把一幅普通的图像设置为图像映射： 

    <img src="/i/eg_planets.jpg" ismap />
请把鼠标移动到图像上，看一下状态栏的坐标如何变化。

    HTML 表格
    表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 

    <table border = "" height = "" width = "" align = "" cellpading = "" frame = "" >
<caption>我的标题</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>

    cellpading表示单元格内容与其边框之间的空白；cellspacing表示单元格之间的距离；使用 "frame" 属性来控制围绕表格的边框；表格的表头使用 <th> 标签进行定义。属性：colspan 跨列；rowspan 跨行。

    HTML 列表
    无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 

    <ul type = "">
<li>Coffee</li>
<li>Milk</li>
</ul>

    有序列表也是一列项目，列表项目使用数字进行标记。 

    <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

    自定义列表不仅仅是一列项目，而是项目及其注释的组合。 

    <dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

    HTML <div> 和 <span>
    可以通过 <div> 和 <span> 将 HTML 元素组合起来。大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：<h1>，<p>，<ul>，<table>；内联元素在显示时通常不会以新行开始。例子：<b>，<td>，<a>，<img>。
    HTML <div> 元素
    HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。
    HTML <span> 元素
    HTML <span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

    HTML 布局
    使用 <div> 元素的网页布局: 

    <html>
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312"/>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}
div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>

<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>

    HTML 表单和输入 

    <form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>

    表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。输入:多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
    文本域（Text Fields）当用户要在表单中键入字母、数字等内容时，就会用到文本域。<input type="text" name="name" />
    单选按钮（Radio Buttons）当用户从若干给定的的选择中选取其一时，就会用到单选框。<input type="radio" name="sex" value="male" />
    复选框（Checkboxes）当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。<input type="checkbox" name="bike" />
    表单的动作属性（Action）和确认按钮： 

    <!-- text.htm -->
<html> 
<body> 
<form action ="post.php" method ="post"> 
Name: <input type="text" name="username" /> 
<input type ="submit" value="ok" /> 
</form> 
</body> 
</html>
    <!-- post.php -->
<html> 
<body> 
You are <?php echo $_POST["username"]?>. 
</body> 
</html>

    简单的下拉列表: 

    <form>
<select name="cars">
<option value="volvo" selected="selected">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

    创建按钮: 

    <form>
<input type="button" value="Hello world!">
</form>

    在数据周围绘制一个带标题的框: 

    <form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

    HTML的特殊符号
    &nbsp 空格; &lt <; &amp & ; &gt > ; &quat ";

    HTML 框架
    通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
    使用框架的坏处：开发人员必须同时跟踪更多的HTML文档;很难打印整张页面。 

    <frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

    为不支持框架的浏览器添加 <noframes> 标签。重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。 

    <frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>

    HTML 内联框架： 

    <iframe src="/eg_landscape.jpg"  width="200" height="200" frameborder="0"></iframe>

    使用 iframe 作为链接的目标： 

    <iframe src="pic/blue02.jpg" name="iframe_a"></iframe>
<p><a href="http://www.cnblogs.com/houkai/" target="iframe_a">侯凯</a></p>
  • 相关阅读:
    【转】概率主题模型简介 Introduction to Probabilistic Topic Models
    codility: Fibonacci numbers (FibFrog, Ladder)
    codility: Euclidean algorithm ( ChocolatesByNumbers, CommonPrimeDivisors)
    effective c++ 11: Handle assignment to self in operator =
    effective c++ 10: Have assignment operators return a reference to *this
    effective c++ 9: Never call virtual functions during construction or destruction
    JDBC连接数据库基础
    day14
    集合方法
    day10
  • 原文地址：https://www.cnblogs.com/houkai/p/3351855.html
Copyright © 2011-2022 走看看