HTML常用知识点代码演示
1 HTML部分常用知识点
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 版本声明 --> <!DOCTYPE html> <!-- 唯一根元素 --> <html> <!-- 对网页做基本的配置 --> <head> <!-- 声明网页编码,HTML5不严格准守XML 所以单标签可以不以/结束 --> <meta charset="UTF-8"> <title>实验网页</title> </head> <!-- 写网页的具体内容 --> <body> <!-- 1 标题 (块)--> <h1>第一标题</h1> <h2>第二标题</h2> <h3>第三标题</h3> <a href = "#conan"><h6>第六标题 </h6></a> <!-- 2段落 (块)--> <p>这是段落</p> <!-- 3.1 有序列表 --> <ol> <li>安徽省</li> <li>湖北省</li> <li>河北省</li> </ol> <!-- 3.2 无序列表 --> <ul> <li>北京</li> <li>上海</li> <li>南京</li> </ul> <!-- 3.3 嵌套列表 --> <ol> <li> 河北省 <ul> <li>石家庄</li> <li>唐山</li> </ul> </li> <li> 山东省 <ul> <li>济南</li> <li>青岛</li> </ul> </li> <li>安徽省</li> </ol> <!-- 4 行内元素 --> <P> <i>倾斜,安徽省马鞍山市安徽工业大学</i> <strong>加粗,安徽省马鞍山市安徽工业大学</strong> <del>删除线,安徽省马鞍山市安徽工业大学</del> <b>加粗,安徽省马鞍山市安徽工业大学</b> <span style = "color:red;">设置颜色,安徽省马鞍山市安徽工业大学</span> </P> <!-- 5 空格折叠 --> <p> 静夜思<br> 床前明月光,<br> 疑是地上霜。<br> 举头望明月,<br> 低头思故乡。<br> <<br> </p> <!-- 6 图片(行内元素,左右排列) --> <p> <!-- 绝对路径 ,长且改路径麻烦 ,不常用--> <img src="picture/code.jpg "/> <!-- 相对路径,只要网页和图片相对位置不变则一般不会出问题,比较方便,常用 .补充:上级文件夹用..--> <img src="picture/conan.jpg"/> </p> <!-- 7.1 超链接(行内) --> <p> <a href = "https://www.cnblogs.com/kwinwei/">KwinWei'blog</a> <br> <!-- 新窗口打开网页 --> <a href = "https://www.cnblogs.com/kwinwei/" target = "_blank;">KwinWei'blog</a><br> </p> <!-- 7.2 超链接特殊用法 ,超链接到本网页某个位置,这个位置叫锚点,锚点要提前声明 --> <p> <a name="conan"> 柯南-基德 </a><br> <!-- 顶部默认就是锚点,没有名字 --> <a href = "#">返回顶部</a> </p> <!-- 8 表格 (块),块元素不需要用段落 --> <!-- 8.1 表格基本格式 --> <!-- table声明 --> <table border = "1" cellspacing = "0" width = "30%"> <!-- 声明行 --> <tr> <!-- 声明行内元素 --> <td>人名</td> <td>年龄</td> </tr> <tr> <td>Kwin</td> <td>23</td> </tr> </table> <!-- 8.2 跨行 ,又叫单元格合并 --> <table border = "1" cellspacing = "0" width = "30%"> <!-- 声明行 --> <tr> <!-- 声明行内元素 --> <td rowspan = "2">人名</td> <td>年龄</td> </tr> <tr> <!-- <td>Kwin</td> --> <td>23</td> </tr> </table> <!-- 8.3 跨列 --> <table border = "1" cellspacing = "0" width = "30%"> <!-- 声明行 --> <tr> <td>人名</td> <td>年龄</td> </tr> <tr> <td colspan ="2">Kwin</td> <!-- <td>23</td> --> </tr> </table> <!-- 8.4 行分组 --> <table border = "1" cellspacing = "0"> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>薪资</td> </tr> </thead> <tbody style="color:blue;"> <tr> <td>1</td> <td>2</td> <td>3333</td> </tr> <tr> <td>2</td> <td>444</td> <td>5555</td> </tr> </tbody> <tfoot> <tr> <td colspan ="2">合计</td> <td>8888</td> </tr> </tfoot> </table> </body> </html>
2 HTML 表单用于收集不同类型的用户输入。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 表单 --> <form action="www.baidu,com"> <!-- 1 表单元素 账号 value 指定默认值 maxlength 最大长度 readonly 只读 --> <p> 账号:<input type = "text" value="Kwin" maxlength=15/> </p> <!-- 2 密码,修饰属性同上 --> <P> 密码:<input type="password"/> </P> <!-- 3 单选 name 组名,定义为同一组,才可以区分互斥 checked 默认选中 --> <P> 性别:<input type="radio" name="sex" checked/>男 <input type="radio" name="sex"/>女 </P> <!-- 4 多选 --> <p>兴趣: <input type="checkbox" />音乐 <input type="checkbox" />读书 <input type="checkbox" />跑步 <input type="checkbox" />篮球 <input type="checkbox" />足球 </p> <!-- 5 文件筐 --> <p>头像: <input type="file"/> </p> <!-- 6 隐藏框 --> <p> <input type="hidden"> </p> <!-- 7 提交按钮 8 重置 --> <p> <input type="submit" value="注册"/> <input type="reset" value="重置"/> </p> <!-- 9 普通按钮 ,功能由js代码自己写 --> <p><input type="button" value="普通按钮"/> </p> <!-- 10 标签 label:用来管理表单中的文本,将文本与控件绑定,增大可选择面积,方面老年等看不清小按钮人选择使用 id:用来区分标签名与for配合使用 --> <p> <input type="checkbox" id="c1"/> <label for="c1">我已阅读并自愿接受此协议!</label> </p> <!-- 11 文本域 --> <p>简介: <textarea cols="10" rows="3">请在此处输入简介! </textarea> </p> <!-- 12 下拉选 --> <p> 城市: <select> <option selected>北京</option> <option>上海</option> <option>合肥</option> <option>南京</option> </select> </p> </form> </body> </html>