软件设计之HTML5
【狂神说Java】HTML5完整教学通俗易懂
学习内容：
软件开发技能点参照：软件开发，小白变大佬，这套学习路线让你少走弯路是认真的，欢迎讨论
软件开发技能点参照：Java学习完整路线，强烈建议收藏转发
- HTML简介
- 常用标签
- 行内元素与块元素
- 页面结构框架
- iframe内联框架
- 框
- 文本域与文件域
1、HTML简介
HTML：Hyper Text Markup Language 超文本标记语言
DOCTYPE
DOCTYPE： 告诉浏览器使用规范
<!-- 注释内容--> <!DOCTYPE html><!-- 告诉浏览器使用规范-->
title标签
用来命名网页标题
2、常用标签
<!-- 你好--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- title标签：网页名字--> <title>网页名字</title> </head> <body> <!--标题标签--> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!--段落标签--> <!--一根水平线--> <p>A</p> <p>B</p> <!--水平线标签--> <hr> <!--换行标签--> C <br> D <br> <!--粗体、斜体--> 粗体：<strong>你好</strong> 斜体：<em>你好</em> <!--特殊符号--> 空格： <br> 大于号：><br> 小于号：< <br> </body> </html>
图像标签
超链接标签
<!--a标签 href:必填，表示要跳转的页面 target:表示窗口在哪里打开 _blank 在新标签中打开 _self 在自己的网页中打开--> <a href="https://www.baidu.com"target="_blank"></a>
锚连接
<a id="top">顶部</a> <!--锚链接 1、锚标记 2、跳转到标记--> <a href="#top">回到顶部</a>
列表
<!--有序列表--> <ol> <li>Java</li> <li>Python</li> <li>C/C++</li> </ol> <!--无序列表--> <ul> <li>Java</li> <li>Python</li> <li>C/C++</li> </ul> <!--自定义列表--> <!--dt:列表名称 dd：列表内容--> <dl> <dt>学科</dt> <dd>Java</dd> <dd>Python</dd> <dd>C/C++</dd> </dl>
表格
HTML5 中不推荐使用 border 属性来设置表格边框。相反，建议使用 CSS 来实现同样的效果，这里先不阐述。
<!-- 行：tr 列：td--> <table> <tr> <!--colspan 跨列--> <td colspan="4">1-1</td> </tr> <tr> <!--rowspan 跨行--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table>
按钮
)
3、行内元素与块元素
4、页面结构框架
5、 iframe内联框架
iframe 标签用于在一个网页内嵌入另一个 HTML 页面
src: 要嵌入的页面的 URL。
width 和 height: 指定 iframe 的宽度和高度。
此处代码功能是点击跳转，随后网页在所设置的内联框架中显示！
<body> <iframe src="" name="show" width="1000px" height="800px"></iframe> <a href="https://www.bilibili.com" target="show">点击跳转</a> </body>
表单
Chrome的表单数据在Payload里：(每个浏览器的不一样)
<h1>注册</h1> <!--表单form action:表单提交的位置，可以是网站，也可以是一个请求处理地址 method:post,get提交方式 post：比较安全，传输大文件 get：可以在url中看到提到的信息，不安全，高效--> <form action="index.html" method="post"> <!-- 文本输入框：input type="text"--> <p>名字：<input type="text" name="username"></p> <!-- 密码框：input type="password"--> <p>名字：<input type="password" name="pwd"></p> <p> <input type="submit"> <input type="reset"> </p> </form>
6、框
单选框
<p>性别 <input type="radio" value="boy" name="sex">男 <input type="radio" value="girl" name="sex">女 </p>
多选框
<p>爱好 <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby">写代码 </p>
下拉框
<p>下拉框 <select name="列表名称"> <option value="选择项">中国</option> <option value="选择项">美国</option> <option value="选择项">英国</option> </select> </p>
7、文本域与文件域
文本域
<p>反馈 <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p>
文件域
上传文件
<p> <input type="file" name="files"> </p>
