html初步学习
2016-12-08 20:26
232 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test(test.com)</title> <!-- 1<head> 元素包含了所有的头部标签元素。 在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. --> </head> <body> <!-- 2h1、h6分别对应不同的级别 --> <h1>第一个标题</h1> <!-- 3段落分行 --> <p>这个<br>段落<br>演示了分行的效果</p> <p><a href="#C4">查看章节 4</a></p> <!-- 4页面内跳转 后面的5也是各种a 链接 --> <h2><a id="C4">章节 4</a></h2> <a href="http://www.runoob.com">这是一个链接</a> <!-- 5.1链接用a 并且可以通过<a 链接></a>将需要包含链接的东西连接一起 --> <a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a> <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p> <!-- 5.2链接和文字结合 --> <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 src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> <!-- 5.3图片链接 --> <p>1</p> <p>这是一个电子邮件链接:<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">发送邮件</a></p> <!-- 5.4电子邮件链接 --> <p>这边显示该章节的内容……</p> <p><b>注意:</b> 单词直接空格使用 %20 代替,以确保浏览器可以正常显示文本。</p> <h1 style="font-family:verdana;background-color:yellow;">一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;background-color:blue">一个段落。</p> <h1 style="text-align:center;">居中对齐的标题</h1> <!-- 6CSS的内联样式,实际中尽量避免使用--> <img src="boat.gif" alt="Big Boat"> <!-- 7当图片加载失败时,将会显示alt对应的内容 --> <h4>大写字母列表:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <iframe src="http://www.runoob.com/html/html-iframes.html/" width="200" height="200" frameborder="0"> <p>您的浏览器不支持 iframe 标签。</p> </iframe> <!--8标签用于将页面分栏--> <!--9JavaScript 使 HTML 页面具有更强的动态和交互性。JavaScript 最常用于图片操作、表单验证以及内容动态更新。--> <h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改变 HTML 元素的样式。 </p> <script> function myFunction() { document.getElementById("demo").innerHTML="Hello JavaScript!"; x=document.getElementById("demo") // 找到元素 x.style.color="#ff0000"; // 改变样式 } </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>