--html网页简单使用
1.html网页的基本标签 <!doctype html><!-- 声明网页版本 --> <html><!-- 唯一的跟元素 --> <head><!-- 此处写网页的基本声明 --> <meta charset="utf-8"/><!-- 声明网页编码 --> <title>这里就是第一个网页</title><!-- 声明网页标题 --> </head> <body><!-- 此处写网页的所有内容 --> 此处写网页的所有内容 </body> </html> 2.标签整理： <!-- 1.标题（一般不会使用到6级标签，实际开发中不会有那么复杂的逻辑），超连接标签"#"代表是一个锚点 --> <h1><a href="#cang">愿你单枪匹马，亦能所向披靡！</a></h1> <h2><a href="#q">愿</a>你单枪匹马，亦能所向披靡！</h2> <h3>愿你单枪匹马，亦能所向披靡！</h3> <!-- 2.段落 --> <p>愿你单枪匹马，亦能所向披靡！</p> <p>愿你单枪匹马，亦能所向披靡！</p> <!-- 3.列表 --> <!-- 有序列表 --> <ol> <li>愿你单枪匹马，亦能所向披靡！</li> <li>愿你单枪匹马，亦能所向披靡！</li> <li>愿你单枪匹马，亦能所向披靡！</li> </ol> <!-- 无序列表 --> <ul> <li>愿你单枪匹马，亦能所向披靡！</li> <li>愿你单枪匹马，亦能所向披靡！</li> <li>愿你单枪匹马，亦能所向披靡！</li> </ul> <!-- 嵌套列表 --> <ol> <li>愿你单枪匹马，亦能所向披靡！ <ul> <li>一点寒芒先到</li> <li>一点寒芒先到</li> <li>随后枪出如龙</li> </ul> </li> <li>愿你单枪匹马，亦能所向披靡！ <ul> <li>一点寒芒先到</li> <li>一点寒芒先到</li> <li>随后枪出如龙</li> </ul> </li> <li>愿你单枪匹马，亦能所向披靡！ <ul> <li>一点寒芒先到</li> <li>一点寒芒先到</li> <li>随后枪出如龙</li> </ul> </li> </ol> <!-- 5.行内元素 --> <p>北京市海淀区北三环西路甲18号<span style="color: red;">钟鼎大厦</span>B座8层</p> <!-- 6.空格折叠，默认换行和空格都合并为一个空格要想使用多个空格使用“ ” --> <p> Windows 操作系统的目录结构，是以<br/> 盘符为单位，C盘、D盘、E盘等等，数据<br/> 存储在 各个盘符之下，而Linux操作<br/> </p> <!-- 图片 --> <!-- 1.绝对路径：从盘符开始写出图片存放的完整路径 这种方式将路径写死,一旦软件上线时,用户要求改路径甚至操作系统就都错了. --> <!-- 2.相对路径：写出图片和网页的相对位置.软件上线时,是将整个项目拷贝给用户,他们的相对位置是不会变的--> <p> <!-- 图片网页平级 --> <img src="01.jpg"> <!-- 图片在网页的下级 --> <img src="old/02.jpg"> <!-- 图片在网页的上级 --> <img src="../03.jpg"> <!-- 通常是使用相对路径并却资源的文件夹是同级 --> <img src="../images/04.jpg"> </p> <!-- 8超链接 --> <!-- 1.基本用法 --> <p> <a href="http://www.tmooc.cn" >tmooc</a> <a href="http://doc.tedu.cn" target="_blank">文档</a> <a href="http://maven.tedu.cn" target="_blank">mavem</a> <a href="http://code.tarena.com.cn" target="_blank">mavem</a> <a href="demo2.html" target="_blank">demo2</a> </p> <!-- 链接到锚点 --> <p> 愿你单枪匹马，亦能所向<a name="cang">披靡</a>！ </p> <!-- 3.特例:网页的顶部,摩恩就是锚点,无名 --> <p> <a href="#">回到顶部</a> </p> <!-- 9 表格 --> <!-- 基本的用法 --> <table border="3dp" cellspacing="0" width="200px"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> <!-- 跨行 --> <table border="3dp" cellspacing="0" width="200px"> <tr> <td colspan="2">1</td> <!-- <td>2</td> --> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> <!-- 跨列 --> <table border="3dp" cellspacing="0" width="200px"> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr> <!-- <td>3</td> --> <td>4</td> </tr> </table> <br/><br/><br/> <!-- 行分组 --> <table border="3" cellspacing="0" width="300"> <thead> <tr> <td>编号</td> <td>名称</td> <td>金额</td> </tr> </thead> <tbody style="color: blue;"> <tr> <td>0001</td> <td>鼠标</td> <td>120</td> </tr> <tr> <td>0002</td> <td>键盘</td> <td>1400</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">合计</td> <td>1520</td> </tr> </tfoot> </table>day02：表单 <!-- 1.表单元素：用来声明表单的范围，只有在此范围内的数据，才能提交给服务器。 --> <!--action:声明表单提交的目标 --> <form action="http://www.baidu.com"> <!-- 2.表单控件:用来输入数据 --> <!-- 1)input元素:他们type属性不同 --> <p> <!-- 文本框 --> 账号:<input type="text" value="qwerdf" maxlength="10" readonly="readonly"/> </p> <p> <!-- 密码框 --> 密码:<input type="password" value="123456" readonly="readonly"/> </p> <!-- 单选 --> <p> 单选: <!-- name:组名,同名的radio就是一组,会互斥 --> <!-- checked:默认选中 --> <label><input type="radio" name="sex" checked="checked"/>男</label> <label><input type="radio" name="sex" />女</label> </p> <p> 兴趣: <!-- 多选框 --> <!-- checked:设置默认选中 --> <label><input type="checkbox"/>学习</label> <label><input type="checkbox"/>社交</label> <label><input type="checkbox" checked="checked"/>养生</label> <label><input type="checkbox" checked="checked"/>竞技</label> <label><input type="checkbox" checked="checked"/>美食</label> </p> <!-- 隐藏框 --> <p> <input type="hidden" value="hi"/> </p> <!-- 文件框 --> <p> 头像<input type="file"/> </p> <p> <input type="submit" value="update"/> <input type="reset" value="reset"/> <input type="button" value="as null"/> </p> <!-- 2)其他元素:标签名就不同 --> <!-- label:用来管理表单中的文字,可以将文字与控件绑定为一个整体,从而增加空间的范围 id:是元素的唯一的标识.任何元素都有ID--> <p> <input id="cb1" type="checkbox"> <label for="cb1">我已经阅读并自愿遵守这个规则!</label> </p> <!-- 下拉选项 select 设置默认选中--> <p>城市: <select> <option selected="selected">请选择</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>天津</option> <option>北京</option> </select> </p> <!-- 文本域 --> <p> 简介: <textarea rows="2" cols="100">愿你单枪匹马,亦能所向披靡!</textarea> </p> </form>
我是初学者，如有更新不好的，欢迎这位大神指出，谢谢大家！
更多精彩以后更新，转载注明！