HTML常用知识点代码演示
1 HTML部分常用知识点
<!-- 版本声明 --> <!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 表单用于收集不同类型的用户输入。
<!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>
