html

The <span> tag is used to group inline-elements in a document.

The <span> tag provides no visual change by itself.

The <span> tag provides a way to add a hook to a part of a text or a part of a document.

When a text is hooked in a <span> element, you can style it with CSS, or manipulate it with JavaScript.

position:absolute;

Value Description Play it
static Default. Elements render in order, as they appear in the document flow Play it »
absolute The element is positioned relative to its first positioned (not static) ancestor element Play it »
fixed The element is positioned relative to the browser window Play it »
relative The element is positioned relative to its normal position, so “left:20” adds 20 pixels to the element’s LEFT position Play it »
inherit The value of the position property is inherited from the parent element

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive(in front of) or negative(behind) stack order:

display:block;

Value Description Play it
none The element will not be displayed at all Play it »
box (or flex-box) The element is displayed as a block-level flex container box
block The element is displayed as a block-level element (like paragraphs and headers) Play it »
flex The element is displayed as a block-level flex container box
inline This is default. The element is displayed as an inline-level element (like span) Play it »
inline-block The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
inline-flex The element is displayed as an inline-level flex container box
inline-table The element is displayed as an inline-level table
list-item The element is displayed as a list-item, which means that it has a bullet in front of it Play it »
table The element is displayed as a table
table-caption The element is displayed as a table caption
table-cell The element is displayed as a table cell
table-column The element is displayed as a table column
table-column-group The element is displayed as a table column group (like <colgroup>)
table-footer-group The element is displayed as a table footer row group
table-header-group The element is displayed as a table header row group
table-row The element is displayed as a table row
table-row-group The element is displayed as a table row group
inherit The value of the display property will be inherited from the parent element
Advertisements

href=”#top”, connect to mysql

  • An anchor URL – points to an anchor within a page (like href=”#top“)

Putting the “#” symbol as the href for something means that it points not to a different URL, but rather to another id or name tag on the same page. For example:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

However, if there is no id or name then it goes “no where.”

database credentials in connect.php:

/* Database config */
$db_host = '';
$db_user = '';
$db_pass = '';
$db_database = '';
/* End config */
$link = mysql_connect($db_host,$db_user,$db_pass) or die('Unable to establish a DB connection');
mysql_select_db($db_database,$link);
mysql_query("SET names UTF8");

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Metadata is always passed as name/value pairs. The content attribute MUST be defined if the name or the http-equiv attribute is defined. if none of these are defined, the content attribute CANNOT be defined.

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Add a description" />
<meta name="keywords" content="Add keywords" />
<meta name="author" content="Codrops" />

HTML5 has a new attribute, charset, which makes it easier to define charset:

  • HTML 4.01: <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
  • HTML5: <meta charset=”UTF-8″>

Differences Between HTML and XHTML

  • In HTML the <meta> tag has no end tag.
  • In XHTML the <meta> tag must be properly closed.

get the results with PHP/Mysql

$mysql_server = 'localhost';
$mysql_login = 'root';
$mysql_password = '';
$mysql_database = 'jQueryAutocomplete';

mysql_connect($mysql_server, $mysql_login, $mysql_password);
mysql_select_db($mysql_database);

$req = "SELECT name "
	."FROM mytable "
	."WHERE name LIKE '%".$_REQUEST['term']."%' "; 

$query = mysql_query($req);

while($row = mysql_fetch_array($query))
{
	$results[] = array('label' => $row['name']);
}

echo json_encode($results);

在使用 $_GET 变量时,所有的变量名和值都会显示在 URL 中。所以在发送密码或其他敏感信息时,不应该使用这个方法。不过,正因为变量显示在 URL 中,因此可以在收藏夹中收藏该页面。在某些情况下,这是很有用的。

注释:HTTP GET 方法不适合大型的变量值;值是不能超过 100 个字符的。

PHP 的 $_REQUEST 变量包含了 $_GET, $_POST 以及 $_COOKIE 的内容。

PHP 的 $_REQUEST 变量可用来取得通过 GET 和 POST 方法发送的表单数据的结果。

$_POST 变量用于收集来自 method=”post” 的表单中的值。

$_POST 变量

$_POST 变量是一个数组,内容是由 HTTP POST 方法发送的变量名称和值。表单域的名称会自动成为 $_POST 数组中的 ID 键

$_POST 变量用于收集来自 method=”post” 的表单中的值。从带有 POST 方法的表单发送的信息,对任何人都是不可见的(不会显示在浏览器的地址栏),并且对发送信息的量也没有限制。

为什么使用 $_POST?

  • 通过 HTTP POST 发送的变量不会显示在 URL 中。
  • 变量没有长度限制。

不过,由于变量不显示在 URL 中,所以无法把页面加入书签。

 

CSS + HTML

html 和css都是标记语言,现在用他们来分别进行网页结构设计,网页风格设计。
<head>
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>
</head>

用户自定义的样式的名称不属于任何html标记。 我们可以使用属性"class"设置标记的样式。
示例1:
<font class=mystyle1> 我的风格 </font>
结果1: 我的风格 

示例2:
<a href="index.php" class=mystyle1> 我的风格 </a>
结果2: 我的风格 

大致上有三种方法来设置html标记的样式:
a) 内置
b) 内部
c) 外部的CSS
内嵌样式
在html标记中这种样式的属性值为内置。
示例: <font style="color: red; background-color: orange;"> 测试字体 </font>
结果: 测试字体

内部样式
我们可以使用它来定义head标记的样式。
在head标记中我们定义的样式就像示例中给出的一样。
内部样式样式有三种方法可以使用:
普遍, 
标识符, 
用户定义. 
1。我想让所有相似的html标记有相同的样式。例如: 我想让每个<font>标记中的文本内容加粗?
<head>
<style>
a
{
color: green;
}
</style>
</head>
如果像这样使用内部样式,则样式将在整个页面的该标签中生效。即页面中的所有的"a"标记将应该该样式。
2,全局样式时,它将为所有的标记类型设置同样的样式。但是在大多数情况下我们想要相同的标记类型在不同的位置有不同的样式。
<head>
<style>
a#test1
{
color: red;
background-color: orange;
}
a#test2
{
color: green;
background-color: yellow;
}
</style>
</head>

如果我们在标识符中使用内部样式时,我们需要为样式设置ID,这样才会有效。

示例1:
<a href=”index.php” id=test1> 指数 </a>
结果1: 指数 

示例2:
<a href=”index.php” id=test2> 指数 </a>
结果2: 指数

我该如何创建外部样式表文件?

我们把以下的样式放在文本文件中,例如:mystyle.css
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>

在html中如何设置背景图片重复?

a)repeat:这个值说明背景图片在两个方向上重复
b)repeat-x:这个值说明背景图片仅仅在垂直方向上重复
c)repeat-y:这个值说明背景图片仅仅在水平方向上重复
d)no-repeat:这个值说明背景图片没有重复
如何产生onMouseover效果?
当鼠标在链接或者背景上时,如何让它们的颜色发生改变?

步骤1:
在head段落中添加文本要改变的样式,具体如下,
<head>
<style>
/*这是怎样的文字会在鼠标滑过*/
.colc{
font-family: san-serif;
color: #9EFF36;
}

/*这是如何看待文本将鼠标。注意:”悬停”是最最重要的变化这里*/
.colc:hover
{
font-family: san-serif;
color: #456745;
}
</style>
</head>

步骤2:
当鼠标在文本上方时,设置文本要出现的样式
例如:
<a href=””  class=”colc”> 这是将鼠标移动到文字</a>

注意:在这里我们使用标记”class”来设置样式。样式名称”将创建在header段落中。
—————————–

要让背景颜色发生改变,就像上面解释的一样,在样式标记中添加”background-color”属性。
例如:形成的样式就是
.colc2{
font-family: san-serif;
color: #9EFF36;
}

/*这是如何看待文本将鼠标。注意:”悬停”是最最重要的变化这里*/
.colc2:hover
{
background-color: #245250;
}

把这种样式设置到html标记中
<a href=””  class=”colc”> 这是OnMouseOver效应 </a>

水平线: <hr>
这是用于画出新的水平线的特殊标记。
这不需要结束标记。


This tag has the attribute 这个标记通过使用属性”width”来说明线的宽度。
<hr width=60%> 是用于定义以下的线


在一定的时间间隔后,我想让网页自动重定向?

为了进行页面重新定向,我们应当使用在html中使用head标记内的Meta标记。 推荐刷新的时间大于5秒,这是因为我们要考虑页面加载的时间。

例如:

<meta http-equiv=”refresh” content=”5; url=http://www.hscripts.com”>

这个代码将用于5秒之后重新定向你的网页到http://www.hscripts.com。

  • 属性 http-equiv=”refresh”是用于请求刷新页面。
  • 属性content=”5; URL=http://www.hscripts.com”是用于以秒来设置事件间隔,在这之后,页面重新定向到目标页面。
  • 在’url=’之后你不能使用分号。
  • 使用这个meta标记在一定的时间间隔后会自动重新定向到目标页面。为了确保重新定向到预置页面,可以编辑属性 “content“,来设置合适的时间值和目标网址。这将在所有扩展和服务器端语言(如php, jsp, asp等)中起作用。

我想让在页面上的一小部分在每隔一定的时间间隔后会加载,该怎么做?

页面的内容或者小部分需要每隔一定时间就动态更新。加载全部页面是不明智的。我们就通过嵌入框架来完成。

<html>
<head>
<meta http-equiv=”Refresh” content=”5″>
</head>
<body bgcolor=#faa9aa>
2061816660</body>
</html>

通过使用内联框架,把动态页面设置成我们的主页。在这里我们要使用表格和嵌入页面设置成网站上表格的一列。

<html>
<body>
这是内联框架的测试页面。在以下的框架中你只能看到内容,在每隔5秒,内联框架就会加载。 <br><br>

</body>
</html>

我想让网页在每几秒就重新载入?
我该如何让html页面自动刷新?

生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web