在线web工具
html教程-w3
html教程-runoob
范仁义
《零基础入门学习Web开发》(HTML5&CSS3)-视频-小甲鱼 配套资料
html5速查宝典-小甲鱼
- 输入!+Tab键就会直接出现html模板,或者输入html:5回车也能达到相同的效果
- 输入ul+Tab键就会直接写好"<ul> </ul>"
- html注释 <!-- 记得在此处添加信息 -->
标题的背景和居中、字体颜色尺寸修改
<!--这里是使用推荐的style属性来实现html样式-->
<body style="background-color:PowderBlue;text-align:center">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30px">This text is 30 pixels high</p>
</body>
<!--段落字体、颜色、尺寸、位置的控制-->
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;text-align:center">A paragraph.</p>
</body>
<!--XXXXXXXXXXXXXXXXXXXXXXXXXX下面的方法是不推荐的老用法XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<body bgcolor="yellow";
align="center"
color="orange">
<h2>请看: 改变了颜色的背景。</h2>
</body>
附录:[不赞成使用的标签和属性]
<!--无序列表-->
<ul>
<li>coffee</li>
<li>tea</li>
<li>coakcola</li>
</ul>
<!--有序列表-->
<ol>
<li>coffee</li>
<li>tea</li>
<li>coakcola</li>
</ol>
<!--定义列表-->
<dl>
<dt>Web前端简介</dt>
<dd>HTML(超文本标记语言)</dd>
<dd>CSS(层叠样式表)</dd>
<dd>JavaScript(脚本语言)</dd>
</dl>
<dl>
<dt>C语言中文网</dt>
<dd>HTML教程</dd>
<dd>CSS教程</dd>
<dd>JavaScript教程</dd>
</dl>
<!--一(多)个术语对应一(多)条解释或定义, <dl> 是 definition list;<dt> 是 definition term;<dd> 是 definition description-->
(src表示图片来源,可以是本地电脑,也可以是网络服务器;高度和宽度的单位默认是px,可以省略;title是鼠标放在图片上显示的文字;alt是图片无法显示的时候作为替代显示的文字)
(图片作为超链接的用法见“插入超链接”;另外还有<map>标签定义图像地图;<area>定义图像地图中的可点击区域,参考这里 )
<img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994"
width ="200"
height ="200"
title="这是C语言中文网的logo"
alt="这是C语言中文网的logo"
/>
<
<!--target="_blank"表示在点击之后在新的标签页打开/target="_top"当前页面跳转-->
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<!--用图片作为超链接-->
<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>
</p>
<!--锚tips保证了二者的联系-->
<a href="#tips">有用的提示</a>
<a name="tips">基本的注意事项 - 有用的提示</a><!--似乎这里用id替换name也行-->
另外还有创建电子邮件链接,这里不介绍了。
简单例子
<!--border展示的是边框,数值为零,就没有框;cellpadding是设置内容距离边框的远近,caption设定了表格的标题。tr中row,th中header,td中data,-->
<!--横排-->
<table border="1"
cellpadding="10">
<caption>Rich people information</caption>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Country</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>USA</td>
</tr>
</table>
<!--竖排-->
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
附加例子(利用菜鸟工具展示行/列的合并)
HTML 文本格式化标签
作用 | 说明 | |
---|---|---|
<b> | 定义粗体的文本 | 根据 HTML 5 的规范,<b> 标签应该做为最后的选择,<br />只有在没有其他标记比较合适时才使用它。 |
<em> | 用来呈现为被强调的文本 | 建议使用CSS替代 |
<i> | 斜体 | 在 HTML5 中没有必要这么做,可以使用样式表来格式化 <i> 元素中的文本 |
<small> | 定义小型文本(和旁注) | |
<strong> | 定义计算机程序的样本重要的文本 | 建议使用CSS替代 |
<sub> | 定义下标文本 | |
<sup> | 定义上标文本 | |
<ins> | 定义插入字 | 下划线(文本修订) |
<del> | 定义删除字 |
<
- title> 元素: (用法<title>文档标题<
<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>
-
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时,显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
-
base> 元素:标签作为HTML文档中所有的链接标签的默认链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <base href="//www.runoob.com/images/" target="_blank"> </head> <body> <img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "http://www.runoob.com/images/logo.png" <br><br> <a href="//www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。 </body> </html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<style type="text/css">
body {background-color:yellow}
h1 {color: red}
p {color: blue}
a {color: yellow;
background: black;
}
</style>
<!--注意h1后面有个空格;a对应的是body中的超链接-->
<!--SEO搜索引擎优化,帮助网站被百度、谷歌等搜索到-->
<head>
<meta name = "keywords" content = "小甲鱼web开发,html5,CSS3编程教学">
<meta name = "description" content = "《零基础入门Web学习》,案例实践,内容精彩,百度索引赶紧收了我吧">
<meta name = "author" content = "小甲鱼">
</head>
<!--固定编码格式,保证在网络服务器上也能正常解码-->
<head>
<meta charset="UTF-8">
</head>
<!--等待30秒之后,自动跳转到百度的官网-->
<head>
<meta http-equiv = "refresh" content = "30; http://baidu.com">
</head>
<!--XXXXXXXXXXXXX以上三个功能可以整合到一个head里面XXXXXXXXXXXXXXXX-->
- 内部样式表:当单个文件需要特别样式时,就可以使用内部样式表。
内联样式表:当特殊的样式需要应用到个别元素时。
<!--外部样式表-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<!--内部样式表-->
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
<!--效果一样,去掉第一个style里面的type-->
</head>
<!--内联样式(优先级最高)-->
<body>
<h1 style="text-align:center;font-family:verdana;">居中对齐的标题</h1>
<p style="color: red; margin-left: 20px;">
This is a paragraph
</p>
</body>
- 实例: <h1>, <p>, <ul>, <
- 内联元素:在显示时通常不会以新行开始,所以也叫行内元素。
实例: <b>, <td>, <a>,<img> - div> 和内联元素<
<!--文档中的一个区域将显示为蓝色--> <body> <p>这是一些文本。</p> <div style="color:#0000FF"> <h3>这是一个在 div 元素中的标题。</h3> <p>这是一个在 div 元素中的文本。</p> </div> <p>这是一些文本。</p> </body> <!--使用 <span> 元素对文本中的一部分进行着色--> <body> <p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛,我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p> </body>
<
首先需要明白,创建高级布局是非常耗时,推荐使用网上免费的网站模板,然后根据自己的需求优化。另外推荐在布局中使用CSS,如果将其放在外部样式表,那么站点更易维护。 可以使用块级元素<div>或者<table>来实现多列布局,但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。下面只展示如何使用<
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>
iframe>标签,而<frameset>和<frame>用得少,一般用<
<
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
另外再给一个例子(点击RUNOOB.COM超链接会在当前页面的一个独立框中显示内容,参见 )
#
script> 标签:标签用于定义客户端脚本,比如 JavaScript。该标签元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。关于<
<!--普通内容输出--> <!--<script type="text/javascript">,也就是说指定JS,不加也能运行?-->
<script>
document.write("Hello World!");
</script>
<!--鼠标点击触发事件-->
<p id="demo">
JavaScript 可以触发事件,就像按钮点击。</p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点我</button>
<!--处理 HTML 样式-->
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
字符实体
这是为了解决两个问题:一是打出键盘上不存在的字符;二是避免将文本内容和代码之间混淆。具体例子如下:
- lt;和 & &
格式如下:scheme://
host.domain:
port/
path/
filename
http://www.runoob.com/html/html-tutorial.html
- scheme - 定义因特网服务的类型。最常见的类型是 http,还有其他如https,ftp(文件传输协议);
- host - 定义域主机(http 的默认主机是 www);
- domain - 定义因特网域名,比如 runoob.com;
- :port - 定义主机上的端口号(http 的默认端口号是 80);
- path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中);
- filename - 定义文档/资源的名称。
速查列表
HTML 基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> (换行)
<hr> (水平线)
<!-- 这是注释 -->
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> (缩写)
<address> (联系信息)
<bdo> (文字方向)
<blockquote> (从另一个源引用的部分)
<cite> (工作的名称)
<del> (删除的文本)
<ins> (插入的文本)
<sub> (下标文本)
<sup> (上标文本)
普通的链接:<a href="http://www.example.com/">链接文本</a>
图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a>
书签:
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
图片(Images)
<img src="URL" alt="替换文本" height="42" width="42">
样式/区块(Styles/Sections)
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
<ul>
<li>项目</li>
<li>项目</li>
</ul>
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
框架
<iframe src="demo_iframe.htm"></iframe>
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
< 等同于 <
> 等同于 >
© 等同于 ©
- 本文编辑的时候,文本中可能需要\符号来转义某些小内容,以避免转成html后出现错误。
- <hr />表示的是画横线(分割线)。
- <br />表示换行
- 浏览器忽略了源代码中的排版(省略了多余的空格和换行)
- html5中用id,不用name属性?
- <br>有啥用?