推荐一个非常好的网址:
http://www.runoob.com
本文非原创,是通过这个网址学习HTML的笔记,非常多的信息出自于此网址。
第一章、简介以及Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Triose's first html</title>
</head>
<body>
<h1>Hello world</h1>
<p>This is Triose's first HTML</p>
</body>
</html>
DOCTYPE 声明了文档类型 位于标签 与 描述了文档类型 位于标签 与 为可视化网页内容 位于标签
与
作为一个标题使用 位于标签与
作为一个段落显示 什么是HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的,比如 和 标签对中的第一个标签是开始标签,第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签<标签>内容</标签>
Web 浏览器 Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。 浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户. 声明 声明有助于浏览器中正确显示网页。 网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。 **doctype 声明是不区分大小写的,以下方式均可**:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
不过有一些更加通用的申明:
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
中文编码问题需要在头部加入如下声明:
<meta charset = "utf-8">
**第二章,HTML编辑器** HTML 编辑器推荐 可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器: Notepad++:https://notepad-plus-plus.org/ Sublime Text:http://www.sublimetext.com/ HBuilder:http://www.dcloud.io/ 以上是菜鸟教程的推荐,我自己用的是: WebStome(学生不要钱、并且提供Ubuntu版本)界面如下: ![这里写图片描述](https://img-blog.csdn.net/20161205133805444) **三、HTML基础—4个实例(标题、段落、链接、图像)** 1、HTML 标题 HTML 标题(Heading)是通过 “`
-
“`标签来定义的. 代码:
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
结果: *********************************
这是一个标题
这是一个标题
这是一个标题
********************************* 2、HTML 段落 HTML 段落是通过标签“`“` 来定义的. 代码:
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
结果: ************
这是一个段落。
这是一个段落。
这是一个段落。
************ 3、HTML 链接 HTML 链接是通过标签 “` “` 来定义的. 代码:<a href="http://www.runoob.com">这是一个链接</a>
结果: *******
这是一个链接 ******* 4、HTML图像 HTML 图像是通过标签 “`
“`来定义的. 代码:
<img src="w3cschool.png" width="104" height="142">
结果: ![这里写图片描述](https://img-blog.csdn.net/20161205135327454) ![这里写图片描述](https://img-blog.csdn.net/20161205135338887) **四、HTML元素** HTML元素是这么定义的:
<p> <!--开始标签-->
这是一个段落 <!--元素内容-->
</p> <!--结束标签-->
HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签中进行关闭(以开始标签的结束而结束) 大多数 HTML 元素可拥有属性 HTML 空元素 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。 “`
“`就是没有关闭标签的空元素(“`
“`标签定义换行)。 在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。 在开始标签中添加斜杠,比如 “`
“`,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。 即使 “`
“`在所有浏览器中都是有效的,但使用“`
“`其实是更长远的保障。 **五、HTML 属性** HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现,比如:name=”value”。 HTML 属性常用引用属性值 属性值应该始终被包括在引号内。 双引号是最常用的,不过使用单引号也没有问题。 Remark提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name=’John “ShotGun” Nelson’ HTML 属性参考手册: HTML标签参考手册 HTML标准属性参考手册 note:这个暂时还没有实践、以后补上 **六、HTML标题** HTML 标题 标题(Heading)是通过“`
-
“`标签进行定义的. “`
“` 定义最大的标题。“`
“`定义最小的标题。 例如:
<h1>这是1号标题</h1>
<h2>这是2号标题</h2>
<h3>这是3号标题</h3>
<h4>这是4号标题</h4>
<h5>这是5号标题</h5>
<h6>这是6号标题</h6>
结果:
这是1号标题
这是2号标题
这是3号标题
这是4号标题
这是5号标题
这是6号标题
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。 HTML 水平线 “`“`标签在 HTML 页面中创建水平线。(用于分隔) 例如:
这是一个段落。
这是一个段落。
这是一个段落。
HTML 注释 可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。 注释写法如下:“` “` 总结: ![这里写图片描述](https://img-blog.csdn.net/20161205143329892) 本图片截自菜鸟教程网页。传送门: 菜鸟教程 **七、HTML段落** 1、HTML 段落 段落是通过 “`“`标签定义的。 例如:
<p>这是一个段落 </p>
<p>这是另一个段落</p>
结果:
这是一个段落
这是另一个段落
2、HTML 折行 如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 “`“` 标签: 例如:
<p>这个<br>段落<br>演示了分行的效果</p>
结果:
这个
段落
演示了分行的效果
<p>
春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少。
</p>
结果:
春眠不觉晓, 处处闻啼鸟。 夜来风雨声, 花落知多少。
注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。
八、HTML文本格式化
1、文本格式化:
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
结果:
加粗文本
斜体文本
电脑自动输出
这是 下标 和 上标
还有一些东西请参照网页上写的,传送门:
传送门
九、HTML链接
1、HTML链接:
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
结果:
本文本 是一个指向本网站中的一个页面的链接。
本文本 是一个指向万维网上的页面的链接。
2、HTML超链接
HTML使用标签<a>
来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签<a>
中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。
例如:
<a href="http://www.runoob.com/">访问菜鸟教程</a>
结果:
访问菜鸟教程
3、HTML 链接 - target 属性
使用 target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:
例如:
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
结果1:
访问菜鸟教程!
如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。
结果2:
访问菜鸟教程!
如果你未设置target属性, 链接将在本窗口打开。
4、HTML 链接- id 属性
id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。
实例:
<a id = "trips">有用的提示部分</a>
<a href="#tips">访问有用的提示部分</a>
<a href="http://www.runoob.com/html/html-links.html#tips" target="_blank">访问有用的提示部分</a>
结果:
有用的提示部分
访问有用的提示部分
访问有用的提示部分
另外附上图片链接创建方法:
<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
结果:(这里没有图片,随便看看就行。。。)
十、HTML头部
传送门
十一、HTML CSS
传送门
例子1:
<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color: #40B3DF"></div>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
<div style="opacity:0.3;position:absolute;left:120px;width:100px;height: 200px;background-color:#8AC007"></div>
<h3>LOOK! Styles and colors</h3>
<div style="letter-spacing:12px;">Manipulate Text</div>
<div style="color: #40b3df;">Colors
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
</div>
</div>
<div style="color:#000000;">and more...</div>
例子2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Triose's first page</title>
<style type = "text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
例子3:
<a href = "http://www.runoob.com/" style="text-decoration: none;" target="_blank">访问网页</a>
1、如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
在本站的HTML教程中我们使用了内联CSS样式来介绍实例,这是为了简化的例子,也使得你能更容易在线编辑代码并在线运行实例。
2、内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
3、HTML样式实例 - 背景颜色
背景色属性(background-color)定义一个元素的背景颜色:
例如:
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
特别丑。。。
4、HTML 样式实例 - 字体, 字体颜色 ,字体大小
我们可以使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
5、HTML 样式实例 - 文本对齐方式
使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
6、内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 部分通过
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>