HTML学习笔记
目录
8.代码
1.简介
HTML 指的是超文本标记语言: HyperText Markup Language。HTML 不是一种编程语言，而是一种标记语言（标记语言是一套标记标签 (markup tag)）
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
2.标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义。
HTML 链接是通过标签 <a> 来定义。
HTML 图像是通过标签 <img> 来定义。
<h1>这是一个标题1</h1>
<h2>这是一个标题2</h2>
<h3>这是一个标题3</h3>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<a href="https://www.runoob.com">这是一个链接</a>
<img src="/images/logo.png" width="258" height="39" />3.常见元素
| 开始标签 | 元素内容 | 结束标签 |
| <html> | 定义了整个 HTML 文档 | </html> |
| <body> | HTML 文档的主体 | </body> |
| <p> | 这是一个段落 | </p> |
| <a href="default.htm"> | 这是一个链接 | </a> |
| <br> | 换行 | （带有空格）或<br/> |
| <hr> | 水平线 | |
| <!--......--> | 定义注释 |
4.文本格式化
| 标签 | 描述 | 例子 |
| <title> | 定义title | <title>runoob.com</title> |
| <b> | 定义加重语气 | <b>加粗</b> |
| <strong> | 加粗 | <strong>这个文本是加粗的</strong> |
| <big> | 字体放大 | <big>这个文本字体放大</big> |
| <em> | 斜体 | <em>这个文本是斜体的</em> |
| <i> | 斜体 | <i>这个文本是斜体的</i> |
| <small> | 缩小 | <small>这个文本是缩小的</small> |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>runoob.com</title>
</head>
<body>
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
</body>
</html><code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。
5.链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度</title>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">访问百度runboo!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
</body>
</html>插入图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>
<a href="#C3">查看章节 4</a>
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C3">章节 4</a>/h2>
<p>这边显示该章节的内容……</p>
</body>
</html>6.头部head部分
使用 <title> 标签定义HTML文档的标题。
使用 <base> 定义页面中所有链接默认的链接目标地址。。
使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟</title>
<base href="https://www.baidu.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "https://www.runoob.com/images/logo.png"
<br><br>
<a href="https://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>7.插入图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
一个图像:
<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>
<p>
一个动图:
<img src="hackanm.gif" alt="Computer man" width="48" height="48"></p>
<p>
注意插入动图的语法和静态图的语法是一样的。
</p>
</body>
</html><img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域
8.代码
建议复制到编辑器中方便查看。
<!DOCTYPE html
<html>
<body>
<title>this is a title</title>
<h1>"一级标题"</h1>
<?php
//php 代码格式
echo "生物数据库查询网站";
//定义变量
echo "<br>"; //换行
$name = "n1";
$name1 = "n2";
echo $name;
//设置函数
echo "<br>";
function test(){
$y = 10; /局部变量
echo $y;
}
tets();
echo "<br>";
function test2(){
global $y = 100; /全局变量
echo $y;
}
test2();
echo y; //y=100
//echo output
echo "<br>";
echo "<h2>这是一个二级标题</h2>";
echo "some thing to say<br>";
echo "string1","abcdef","ghijklmn";
//prin out
print "<h2>PHP is fun!</h2>";
print "Hello world!<br>";
print "I'm about to learn PHP!";
//数据类型
ech "<br>";
$str = "isastring1"; //单双引号均可
echo $str;
ech "<br>";//int型
$n = 123;
$n1 = -123;
$n2 = 0x8c;
var_dump($n);
var_dump($n1);
var_dump($n2);
ech "<br>";//浮点数
$n = 123.123;
$n1 = -123.123;
$n2 = 0x8c.802;
var_dump($n);
var_dump($n1);
var_dump($n2);
echo "<br>"
$xx=true;//逻辑值
$yy=false;
echo "<br>";//数组
$ay = arry("a1","a2","a3","a4");
var_dump($ay);
echo "<br>"//对象class包含属性和方法的结构
class arry1{
var $color;
function arry1($color="green") {
$this->color = $color;
}
function what_color() {
return $this->color;
}
}
//特殊的 NULL 值表示变量无值。
?>
<?php
//strlen() 函数返回字符串的长度，以字符计。
echo strlen("abcdefghijkl");
// str_word_count() 函数对字符串中的单词进行计数：
echo str_word_count("Hello world!");
//strrev() 函数反转字符串
echo strrev("Hello world!");
//strpos() 函数用于检索字符串内指定的字符或文本。
echo strpos("Hello world!","world");
//str_replace() 函数用一些字符串替换字符串中的另一些字符。
echo str_replace("world", "Kitty", "Hello world!"); //输出 Hello Kitty!
//PHP 常量,常量贯穿整个脚本是自动全局的,对大小写不敏感.
echo "<br>";
define("GREETING", "Welcome!");
echo GREETING;
function myTest() {
echo GREETING;
}
myTest();
//运算符
echo "<br>";
$x=17;
$y=8;
echo ($x + $y);
echo ($x - $y);
echo ($x * $y);
echo ($x / $y); // 输出 2.125
echo ($x % $y);
//赋值运算符
echo "<br>";
echo $x;
$y += 8;
echo $y;
$y *= 8;
echo $y;
$y /= 8;
echo $y;
//字符串运算符
echo "<br>";
$txt1 = "Hello" ;
$txt2 = $txt1." world!";
$txt3 .= " world!"; //作用相同
echo $txt2;
echo $txt3;
//递增/递减运算符
echo "<br>";
$x4 = 4;
echo ++$x4; //outp $x+1
echo $x4++; //outp $x,then $x+1
echo --$x4; //outp $x-1
echo $x4--; //outp $x,then $x-1
//比较运算符
//===全等（完全相同）
//!= 和 <> 不等于
//== 等于
echo "<br>";
$x=1;
$y="1";
var_dump($x == $y);
var_dump($x === $y);
var_dump($x != $y);
var_dump($x !== $y);
var_dump($a > $b);
var_dump($a < $b);
//逻辑运算符
//$x and $y 与
//$x && $y 与
//$x or $y 或
//$x || $y 或
//$x xor $y 异或
//!$x 非
//数组运算符
//$x + $y 联合
?>
<?php//if条件语句
/*
if (条件) {
当条件为 true 时执行的代码;
}
*/
/*
if (条件) {
当条件为 true 时执行的代码;
}
else {
条件为 false 时执行的代码
}
*/
/*
if (条件) {
条件为 true 时执行的代码;
} elseif (condition) {
条件为 true 时执行的代码;
} else {
条件为 false 时执行的代码;
}
*/
/*
switch (expression)
{
case label1:
expression = label1 时执行的代码 ;
break;
case label2:
expression = label2 时执行的代码 ;
break;
default:
表达式的值不等于 label1 及 label2 时执行的代码;
}
*/
$t=date("H");
if ($t<"20") {
echo "Have a good day!";
} else {
echo "Have a good night!";
}
$favfruit="orange";
switch ($favfruit) {
case "apple":
echo "Your favorite fruit is apple!";
break;
case "banana":
echo "Your favorite fruit is banana!";
break;
case "orange":
echo "Your favorite fruit is orange!";
break;
default:
echo "Your favorite fruit is neither apple, banana, or orange!";
}
?>
<?php //while for 循环
/*
while (条件为真) {
要执行的代码;
}
*/
/*在执行循环内的语句之后才对条件进行测试
do {
要执行的代码;
}while (条件为真);
*/
$x=1;
while($x<=5) {
echo "这个数字是：$x <br>";
$x++;
}
$x=1;
do {
echo "这个数字是：$x <br>";
$x++;
} while ($x<=5);
// for 循环
/*
for (初始化循环计数器; test counter; 增加循环计数器) {
code to be executed;
}
*/
for ($x=0; $x<=10; $x++) {
echo "数字是：$x <br>";
}
/*foreach 循环只适用于数组，并用于遍历数组中的每个键/值对。
foreach ($array as $value) {
code to be executed;
}
*/
$colors = array("red","green","blue","yellow");
foreach ($colors as $value) {
echo "$value <br>";
}
?>
<?php //函数
//用户定义函数
echo "<br>";
/*
function functionName() {
被执行的代码;
}
*/
function sayHi() {
echo "Hello world!";
}
sayhi(); // 调用函数
//传参
echo "<br>";
function familyName($fname,$year) {
echo "$fname Zhang. Born in $year <br>";
}
familyName("Li","1975");
familyName("Hong","1978");
familyName("Tao","1983");
// 默认参数值
function setHeight($minheight=50) {
echo "The height is : $minheight <br>";
}
setHeight(350);
setHeight(); // 将使用默认值 50
//函数返回值
function sum($x,$y) {
$z=$x+$y;
return $z;
}
echo "5 + 10 = " . sum(5,10) . "<br>";
?>
<?php //数组,索引是自动分配的（索引从 0 开始）
echo "<br>";
$cars=array("abcdef1","abcdef2","abcdef3");
echo "3 string: " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
//count() 函数
echo count($cars);
//遍历
$len=count($cars);
for ($x=0;$x<$len;$x++){
echo $car[$x]."<br>";
}
//关联数组
$age=array("Bill"=>"63","Steve"=>"56","Elon"=>"47");
echo "Elon is " . $age['Elon'] . " years old.";
//遍历关联数组
forea ($age as $x=>$x_vlaue){
echo "key=".$x.",value = ".$x_vlaue;
}
//数组的排序函数
echo "<br>";
/*
sort() - 以升序对数组排序
rsort() - 以降序对数组排序
asort() - 根据值，以升序对关联数组进行排序
ksort() - 根据键，以升序对关联数组进行排序
arsort() - 根据值，以降序对关联数组进行排序
krsort() - 根据键，以降序对关联数组进行排序
*/
$numbers=array(3,5,1,22,11);
sort($numbers);
rsort($numbers);
$age=array("Bill"=>"63","Steve"=>"56","Elon"=>"47");
asort($age);
ksort($age);
arsort($age);
krsort($age);
?>
<?php//超全局变量
//$GLOBALS ,引用全局作用域中可用的全部变量
$x = 75;
$y = 25;
function addition() {
$GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y'];
}
addition();
echo $z;
//$_SERVER ,保存关于报头、路径和脚本位置的信息。
/*
$_SERVER['PHP_SELF'] 返回当前执行脚本的文件名。
$_SERVER['GATEWAY_INTERFACE'] 返回服务器使用的 CGI 规范的版本。
$_SERVER['SERVER_ADDR'] 返回当前运行脚本所在的服务器的 IP 地址。
$_SERVER['SERVER_NAME'] 返回当前运行脚本所在的服务器的主机名（比如 www.w3school.com.cn）。
$_SERVER['SERVER_SOFTWARE'] 返回服务器标识字符串（比如 Apache/2.2.24）。
$_SERVER['SERVER_PROTOCOL'] 返回请求页面时通信协议的名称和版本（例如，“HTTP/1.0”）。
$_SERVER['REQUEST_METHOD'] 返回访问页面使用的请求方法（例如 POST）。
$_SERVER['REQUEST_TIME'] 返回请求开始时的时间戳（例如 1577687494）。
$_SERVER['QUERY_STRING'] 返回查询字符串，如果是通过查询字符串访问此页面。
$_SERVER['HTTP_ACCEPT'] 返回来自当前请求的请求头。
$_SERVER['HTTP_ACCEPT_CHARSET'] 返回来自当前请求的 Accept_Charset 头（ 例如 utf-8,ISO-8859-1）
$_SERVER['HTTP_HOST'] 返回来自当前请求的 Host 头。
$_SERVER['HTTP_REFERER'] 返回当前页面的完整 URL（不可靠，因为不是所有用户代理都支持）。
$_SERVER['HTTPS'] 是否通过安全 HTTP 协议查询脚本。
$_SERVER['REMOTE_ADDR'] 返回浏览当前页面的用户的 IP 地址。
$_SERVER['REMOTE_HOST'] 返回浏览当前页面的用户的主机名。
$_SERVER['REMOTE_PORT'] 返回用户机器上连接到 Web 服务器所使用的端口号。
$_SERVER['SCRIPT_FILENAME'] 返回当前执行脚本的绝对路径。
$_SERVER['SERVER_ADMIN'] 该值指明了 Apache 服务器配置文件中的 SERVER_ADMIN 参数。
$_SERVER['SERVER_PORT'] Web 服务器使用的端口。默认值为 “80”。
$_SERVER['SERVER_SIGNATURE'] 返回服务器版本和虚拟主机名。
$_SERVER['PATH_TRANSLATED'] 当前脚本所在文件系统（非文档根目录）的基本路径。
$_SERVER['SCRIPT_NAME'] 返回当前脚本的路径。
$_SERVER['SCRIPT_URI'] 返回当前页面的 URI。
*/
echo $_SERVER['PHP_SELF'];
echo "<br>";
echo $_SERVER['SERVER_NAME'];
echo "<br>";
echo $_SERVER['HTTP_HOST'];
echo "<br>";
echo $_SERVER['HTTP_REFERER'];
echo "<br>";
echo $_SERVER['HTTP_USER_AGENT'];
echo "<br>";
echo $_SERVER['SCRIPT_NAME'];
?>
<!--$_REQUEST 用于收集 HTML 表单提交的数据。
$_POST 广泛用于收集提交 method="post" 的 HTML 表单后的表单数据。
-->
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
Name: <input type="text" name="fname">
<input type="submit">
</form>
<?php
$name = $_REQUEST['fname'];
echo $name;
$name = $_POST['fname'];
echo $name;
?>
<a href="test_get.php?subject=PHP&web=W3school.com.cn">测试 $GET</a>
<?php
//$_GET,用于收集提交 HTML 表单 (method="get") 之后的表单数据。
//$_GET 也可以收集 URL 中的发送的数据。
echo "在 " . $_GET['web'] . " 学习 " . $_GET['subject'];
?>
</html>
</body>
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
