HTML常用的一些标签
<!DOCTYPE html> <!-- <!DOCTYPE html> 声明为 HTML5 文档--> <html lang="en,zh"> <!--HTML 页面的根元素--> <head> <!-- head内容：万国码，标签，告诉搜索引擎爬虫，这个网站是关于什么内容的--> <meta charset="UTF-8"> <title>闫闫百货</title> <meta content="服装" name="keywords"> <meta content="这是一件神奇的衣服" name="description"> </head> <body> <!-- <body> 元素包含了可见的页面内容--> <p>我的第一个段落。</p> <br id="demo1">demo1<br> <!-- id:身份、唯一性，用于定位等功能--> <h1>我的第一个标题</h1> <h6>我的小标题</h6> <strong>加粗</strong> <em>斜体</em> <del style="color:#999">￥50（删除线，灰色字体）</del> <address>宝安区航城街道兴达华府</address> <p> <strong> <em> 宝安区航城街道兴达华府(跟address比多了加粗效果) </em> </strong> </p> <div>模块，成段</div> <span>模块，不成段</span> 红色背景模块 <!-- style部分为CSS内容，行内样式--> <div style="width:100px;height:100px;background-color:red;">123 456 7890 ytr uytfu yilo gvu空格回车都是文字分隔符</div> <!-- html 编码，分别为空格,左标签，右标签--> 我给大家介绍一个空格 一个左标签<一个右标签>如： <div> 单标签：<br>换行作用 <p id="demo2">demo2</p> 单标签：<hr>一条横线 <br>举个例子，你们有哪些服务： <!-- ol有序列表，类型为A序列，reversed为降序，从第6个开始--> <ol type="A" reversed="reversed" start="6">1/a/A/i/I <li>支付服务</li> <li>放款服务</li> <li>账户服务</li> <li>分流服务</li> </ol> <!-- ul无序列表，disc实心圆\square方块\circle圈--> <ul type="disc"> <li>苹果</li> <li>香蕉</li> <li>桃子</li> </ul> <!-- img：定义图片，src:网上图片url/本地绝对路径/本地相对路径,alt图片占位符,title 图片提示符--> <img src="http://n.sinaimg.cn/sinacn/w1080h613/20180207/488e-fyrhcqz6663848.jpg" alt="这是深圳地图" style="width:500px;" title="this is shenzhenditu"> <!-- a：定义超链接，href:规定链接指向的页面的 URL,#demo1:页面id定位--> <a href="http://www.baidu.com" style="width:100px;height:100px;background-color:red;display:block" target="_blank">www.baidu.com</a> <a href="#demo1">find demo1</a> <a href="#demo2">find demo2</a> <a href="tel:13766666666">客服电话</a> <a href="mailto:cheney@wolaid.com">发邮件</a> <!-- <a href="javascript:while(1){alert('让你手欠')}">点我试试</a>--> <!--1.超链接--> <!--2.锚点，按id值指向--> <!--3.打电话--> <!--4.协议限定符--> <form method="get" action="http://www.baidu.com">提交表单数据到baidu</form> <form method="get" action=""> <p> username<input type="text"> </p> <p> password<input type="password"> </p> <input type="submit"> </form> <form action="" method="get"> 你所喜欢的水果(单选)： 1.水果<input type="radio" name="fruit" value="fruit"> 2.香蕉<input type="radio" name="fruit" value="banana"> 3.西瓜<input type="radio" name="fruit" value="watermelon"> <input type="submit" value="login"> </form> <form action="" method="get"> 你所喜欢的水果（复选，默认西瓜勾选）： 1.水果<input type="checkbox" name="fruit" value="fruit"> 2.香蕉<input type="checkbox" name="fruit" value="banana"> 3.西瓜<input type="checkbox" name="fruit" value="watermelon" checked="checked"> <input type="submit"> </form> <!--下拉菜单--> <form action="" method="get"> <h1>Province</h1> <select name="province"> <option value="beijing">beijing</option> <option value="beijing">shanghai</option> <option value="beijing">tianjin</option> </select> <input type="submit"> </form> <form action="" method="get"> <h1>Province</h1> <select name="province"> <option>beijing</option> <option>shanghai</option> <option>tianjin</option> </select> <input type="submit"> </form> </body> </html>
另存为html文件，然后用浏览器打开，效果如下：
