<!DOCTYPE html> <html lange="en"> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <!--这是一个注释，注释在浏览器中不会显示--> <p>这是一个段落</p> <b>这是粗体字</b><br/> <i>这是斜体字</i><br/> <em>强调,强调显示文本内容，文字以斜体方式显示</em> <br> <strong>加强强调,强调的程度更强烈一些，加粗的字体</strong> <br> <p>下面的长线是水平标记，用'hr'表示</p> <hr> <br> <img src="https://blz.nosdn.127.net/sre/images/nav/tb38.png" alt="taobao" title="淘宝图标" width="200" height="200" border="1" align="left"/> <br> <br> <br> <br> <br> <br> <br> <br> <br> <p>无序列表，ul的英文全称是unordered lists</p> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <p>有序列表，ol的英文全称是ordered lists</p> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <p>自定义列表，dl是definition lists的英文缩写,</p> <dl> <dt>自定义项的名字</dt> <dd>描述项01</dd> <dd>描述项02</dd> <dd>描述项03</dd> </dl> <a href="http://www.baidu.com">百度链接</a><br/> <p>可以用图片做超链接</p> <a href="https://www.taobao.com"><img src="https://blz.nosdn.127.net/sre/images/nav/tb38.png"/> </a><br/> <p>空链接，用#号表示,点击后页面会刷新一下</p> <a href="#">空链接</a> <p>超链接的target属性可以设置新窗口打开，_blank属性值</p> <a href="https://www.cnblogs.com/faberbeta" target="_blank">本博客的超链接</a> <br> <br> <b>下面是表格table相关的事例</b> <hr> <table border="5" width="200" height="100" align="center" bgcolor="grey" cellspacing="50" cellpadding="10"> <tr> <td>姓名</td> <td>身高</td> <td>体重</td> </tr> <tr> <td>张三</td> <td>175CM</td> <td>70kg</td> </tr> </table> <br> <table border="1" width="150" height="100"> <tr align="left" bgcolor="grey" ><td>aaa:</td><td align="center" background="https://blz.nosdn.127.net/sre/images/nav/tb38.png">bbb</td></tr> <tr align="left" bgcolor="grey"><td background="https://blz.nosdn.127.net/sre/images/nav/tb38.png">ccc:</td><td align="center">ddd</td></tr> </table> <br> <table width="200" border="1"> <tr> <td rowspan="2"> 内容01</td> <td> 内容02</td> </tr> <tr> <td> 内容03</td> </tr> </table> <br> <table width="200" border="1"> <tr> <td colspan="2" align="center"> 内容01</td> </tr> <tr> <td> 内容02</td> <td> 内容03</td> </tr> </table> <br> <hr> <b>下面是form，表单相关的事例</b> <p>input 类型，text,password,radio,checkbox等</p> <p>placeholder设置浅色字，框框里没有内容的时候显示</p> <p>对于radio, 使用checked就是代表默认单选</p> <p>单选框选中互斥，是因为属性name相同</p> <p>input类型checkbox制造了复选,使用相同的name为了以后，提交信息的时候，直接通过类，选中所有的项 </p> <form name="form01" action="#" method="get" target="_blank"> <input type="text" value="你好" placeholder="hello"> <input type="password" /> <input type="radio" name="sex" checked>男 <input type="radio" name="sex">女 <input type="checkbox" name="hobby" checked>上网 <input type="checkbox" name="hobby">学习 <input type="checkbox" name="hobby">旅游 <input type="file"><input type="button" value="浏览"> <select> <option>北京</option> <option selected>武汉</option> <option>上海</option> </form> <br> <br> <br> <br> <br> <br> </body> </html>
常见标
<!DOCTYPE>[定义文档类型]
位于文档中的最前面的位置，告知浏览器文档使用哪种HTML或XHTML规范
<meta charset=”utf-8”/> 单标签 语言声明
HTML的基本标签
<html></html> 网页
<head></head> 头部
<body></body> 主体
<title></title> 标题
HTML的基本语法
标记 /标签(元素)
双标签
<标签>内容</标签>
<html></html>网页 页面根元素
<head>这里面是头</head>
<body>这里面是主体</body>
<p>这是一个段落</p>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<b>这里面是粗体字</b>。
<i>倾斜字</i>
<u>下划线</u>
强调<em></em>
强调显示文本内容，文字以斜体方式显示
加强强调<strong></strong>
强调的程度更强烈一些，加粗的字体
水平线标记<hr>
<!-- 内部是注释内容 -->
<table></table>表格。。。
单标签 <标签>
例如：<img> 图片 <br>换行 <hr>水平线..
空格
小于号 < <
大于号 > >
双引号” "
版权符© ©
注册符® ®
网页中常用的图像格式有gif、jpg和png等
Gif：最多256种颜色，支持透明、动画
Jpeg：支持1670万种颜色，文件较小
Png：无损压缩图像文件，文件较大，支持透明
Bmp位图 psd源文件 不能用于网页
<img src="02.gif" alt="log0" width="200" border="5" align="right"/>
<标签名 属性1=”属性值” 属性2 =”属性值2” > 内容 </标签名>
无序列表ul 语法： <ul > <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul>
有序列表ol 语法： <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol>
自定义列表dl <dl> <dt>定义项</dt> <dd>描述项</dd> <dd>描述项</dd> </dl>
给文字和图片添加链接 <a href=“index.html”>首页</a> <a href=“index.html”><img src=“01.jpg”></a>
链接网站 <a href=“http://www.baidu.com”>百度</a
空链接： <a href=“#”>首页</a> 单击后仍停留在当前页
超链接地址可以是
网页、 图片、文字、压缩包.rar zip 、应用程序.exe等任意文件
<a href="链接地址url" target="目标"></a> target属性值 _self 原窗口 本窗口 (默认) _blank 新窗口 _top 顶框架 _parent 父框架