HTML笔记
HTML笔记
学习文档：http://www.runoob.com/html/html-layouts.html
<!DOCTYPE html> <!--声明HTML版本--> <html> <!--html文档--> <head> <meta name="whats" charset="GB2312"> <!--<meta> 元素来描述HTML文档的描述，关键词，作者，字符集等--> <title>my first page </title> <!--主题--> <base href="http://home.cnblogs.com" target="_blank"> <!--<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接--> <link rel="stylesheet" type="text/css" herf="mystyle.css"> <!--<link> 标签定义了文档与外部资源之间的关系--> <style type="text/css"> body{background-color:white} h1{color:red} <!--<style> 标签定义了HTML文档的样式文件引用地址--> p{color:blue} </style> </head> <body> <!--主体--> <h1 style="text-align:center;"> whats </h1> <!--标题--> <hr> <h2>这是标题</h2> <script>document.write("hello,MM")</script> <!--定义了客户端的脚本文件--> <p style="font-family:verdana;color:blue">this is a MM</p><br/> <!--段落--> <p style="font-family:arial;color:red">这是<br>一个<br>段落</p><br/> <b><i>格式化</i></b><br/> <big>大</big><br/> <a href="http://home.cnblogs.com" style="text-decoration:none;">博客园</a><br> <!--链接--> <a href="http://home.cnblogs.com" style="text-decoration:none;"><img src="F:\htmldemo\picture\smiley.gif" alt="blog" width="32" height="32"></a><br> <img src="D:\Documents\Pictures\3.jpg" width="130" height="150"><br/> <!--图片--> <img src="F:\htmldemo\picture\1.jpg" alt="Hshan1" width="700" height="500"> <p>Image is align middle.<img src="F:\htmldemo\picture\smiley.gif" alt="smiley face" align="middle" width="32" height="32">smile smile smile</p> </body> </html>
表格
<!--表格由 <table> 标签来定义。 每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。 字母 td 指表格数据（table data），即数据单元格的内容。 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。--> <table border="1" cellpadding="5"> <th>name</th> <!--表格的表头使用 <th> 标签进行定义.大多数浏览器会把表头显示为粗体居中的文本--> <th>age</th> <th>sex</th> <tr> <td>whats</td> <td>16</td> <td>1</td> </tr> <tr> <td>lucy</td> <td>18</td> <td>0</td> </tr> <tr> <td>lily</td> <td>19</td> <td>0</td> </tr> </table> <!--无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表使用 <li> 标签--> <ul> <li>coffee <ul> <li>black coffee</li> <li>green coffee</li> </ul> </li> <li>milk</li> </ul> <!--同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。 列表项项使用数字来标记。--> <ol type="A"> <li>coffee</li> <li>milk</li> </ol> <!--自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。 每个自定义列表项的定义以 <dd> 开始。--> <dl> <dt>coffee</dt> <dd>-black hot drink</dd> <dt>milk</dt> <dd>-white cold drink</dd> </dl> <!--<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。 <div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。--> <div style="color:blue"> <h3>this is a heading</h3> <p>this is a paragraph</p> </div> <!-- <span> 用于对文档中的行内元素进行组合。 <span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。 <span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式--> <p>whats has <span style="color:blue">an </span>apple</p>
布局
<!--大多数网站可以使用 <div> 或者 <table> 元素来创建多列。 CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 虽然我们可以使用HTML table标签来设计出漂亮的布局， 但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。--> <!--div--> <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1> </div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br> html<br> css<br> javascript </div> <div id="content" style="background-color:#EEEEE;height:200px;width:400x;float:left;"> conter goes here </div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> copyright@whats </div> </div> </body> </html> <!--table--> <!DOCTYPE html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>Main title of web page</hl> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px"> <b>menu</b><br> html<br> css<br> javascript </td> <td style="background-color:#EEEEE;height:200px;width:400px;"> content goes here </td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> copyright@whats </td> </tr> </table> </body> </html>
效果图：
表单
<!--表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form> 来设置--> <form> user:<input type="text" name="user"><br> firstName: <input type="text" name="firstname"><br> lastName: <input type="text" name="lastname"><br> password: <input type="password" name="pwd"><br> <input type="radio" name="sex" value="male">male<br> <input type="radio" name="sex" value="female">female<br> <input type="checkbox" name="vehicle" value="bike">I have a bike<br> <input type="checkbox" name="vehicle" value="car">I have a car<br> </form> <form name="input" action="1113_3.html" method="get"> username:<input type="text" name="firstname"> <input type="submit" value="submit"> </form>
下拉列表：
<!DOCTYPE html> <!--下拉列表--> <html> <head> <meta name="whats" charset="utf-8"> </head> <body> <form action=""> <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat" selected>fiat</option> <option value="audi">audi</option> </select> <textarea rows="10" cols="30"> 我是一个文本框 </textarea> <form action=""> <input type="button" value="hello world!"> </form> </body> </html>
邮箱：
<!DOCTYPE html> <!--邮箱--> <html> <body> <h3>send e-mail to someone@emample.com:</h3> <form action="mailto:someone@example.com" method="post" enctype="text/plain"> name:<br> <input type="text" name="name" value="your name"><br> e-mail:<br> <input type="text" name="mail" value="your mail"><br> comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="send"> <input type="reset" value="reset"> </form> </body> </html>
框架：
<!DOCTYPE html> <!--框架--> <html> <body> <iframe src="1116_1.html" width="500" height="500" frameborder="0" name="iframe_a"></iframe> <p><a href="http://www.runoob.com" target="iframe_a">runoob.com</a></p> </body> </html>
脚本：
<!DOCTYPE html> <!--<script> 标签用于定义客户端脚本，比如 JavaScript。 <script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。 JavaScript 最常用于图片操作、表单验证以及内容动态更新。--> <html> <body> <script> document.write("hello,world!") document.write("<p>this is a paragraph</p>") </script> <noscript>sorry,your browser does not support javascript</noscript> <!--<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。 <noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。--> <button type="button" onclick="myFunction()">click me</button> </body> </html>
字符实体：
