01.HTML5学习笔记
HTML基本结构
<!-- DOCTYPE：告诉浏览器使用什么规范--> <!DOCTYPE html> <!--html 总的标签，所有的内容都要在html标签内写--> <html lang="en"> <!--网页的头部--> <head> <!--描述信息--> <meta charset="UTF-8"> <!--网页的标题--> <title>Title</title> <!--网页的主体--> </head> <body> 我的第一个html </body> </html>
网页的基本标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <!--idea中快捷方式--> <!--快速生成标签：英文输入法下打出标签名＋tab可快速生成--> <!--ctrl+/快速注释--> <!--标签名*数字＋tab快速生成多个同名标签--> <body> <!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <p>段落标签</p> <p>第一段</p> <p>第二段</p> <p>第三段</p> <p>第四段</p> <p>第五段</p> <!--换行标签 是一个单标签--> <!--换行标签会比p标签紧凑--> <hr> 第一行 第二行 <br> 第三行 <br> 第四行 <br> <!--水平线标签--> <hr> <br><br> <!--字体样式标签--> 不加样式：范宏达 <br> 粗体： <strong>范宏达</strong> <br> 斜体： <em>范宏达</em> <br> 另一种方式： <br><!-- 效果是一样的 --> 粗体： <b>范宏达</b> <br> 斜体： <i>范宏达</i> <!--特殊符号:需要转义字符--> <!--特殊符号--> 空 格 <br> <!--别忘了 加分号--> 空 格 <br> 大于号: > <br> 小于号: < <br> <!--版权符号--> ©版权所有范宏达 </body> </html>
图像标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片标签学习</title> </head> <body> <!--img学习 src：图片地址 相对地址 绝对地址 建议使用相对路径 项目迁移后不需要改路径 ../返回上一级目录 --> <!--如果没有找到图片就会找到alt--> <img src="../img/1.jpg" alt="图片1" title="悬停文字" width="295" height="413"> <img src="../img/2.jpg" alt="图片2"> </body> </html>
链接标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签</title> </head> <body> <!--使用name作为标记--> <!--这里不需要写href--> <a name="top">顶部</a> <br> 测试锚链接 <br> <!--herf必填 要跳转到哪个页面--> <!--ctrl+D复制代码到下一行--> <a href="http://www.baidu.com">跳转到百度</a> <!--别忘了加http://--> <br> <a href="HTML.html">跳转到我的页面</a> <br> <a href="HTML.html"> <img src="../img/1.jpg" alt="图片超链接" title="悬停文字"> </a><br> <!--target 表示窗口在哪里打开--> <a href="https://www.baidu.com" target="_blank">在新标签页中打开</a> <br> <a href="https://www.baidu.com" target="_self">在当前标签打开 （默认）</a> <br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <!--锚链接 1.需要一个锚标记 2.跳转到标记 --> <a href="#top">回到顶部</a> <br> 页面间跳转 <br> <a href="HTML.html#down"> 跳转到其他页面底部</a> <!--另一页面中的内容 <a name="down">底部</a> --> <!--功能性链接 邮件链接: mailto--> <a href="mailto:fanhongda@qq.com">发送邮件</a> <br> </body> </html>
行内元素和块元素
- 块元素:会自动换行 p h1 h6
- 行内元素:不会自动换行 a strong em
列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!--有序列表--> <ol> <li>Java</li> <li>python</li> <li>php</li> <li>c</li> <li>JavaScript</li> </ol> <!--无序列表 导航 侧边栏--> <ul> <li>Java</li> <li>python</li> <li>C</li> <li>JavaScript</li> <li>php</li> </ul> <!--自定义列表 dl:标签 dt:列表名称 dd:列表内容 一般用于公司底部 --> <dl> <dt>标题</dt> <dd>列表内容</dd> <dd>列表内容</dd> <dd>列表内容</dd> <dt>标题2</dt> <dd>列表内容</dd> <dd>列表内容</dd> <dd>列表内容</dd> </dl> </body> </html>
表格
<table border="1px"> <tr> <td colspan="4">1-1</td> </tr> <tr> <td rowspan="2">1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> </table>
媒体元素
<body> <!--音频和视频--> <!-- src:资源路径 controls控制条 autoplay自动播放--> <video src="../resources/video/延时摄影.mp4" controls autoplay></video> <!--音频属性--> <audio src="../resources/audio/HN%20-%20武林外传%20茉莉花%20（cover%202018.3.7%C2%A0凌晨）（翻自%20武林外传%20茉莉花）.mp3" controls autoplay></audio> </body>
页面结构分析
<body> <header> <h2>网页头部</h2> </header> <session> <h2>网页主体</h2> </session> <footer> <h2>网页脚部</h2> </footer> <!--nav导航--> </body>
iframe内联框架
<body> <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> <!-- <iframe src="path" name="mainFrame"></iframe> path引用页面地址 mainFrame框架标识名 --> <iframe src="https://www.sina.com.cn/" frameborder="0" width="1000px" height="800px"></iframe> <!--通过a标签向iframe中加东西--> <!--src空着 a标签通过name属性找到iframe框架--> <iframe src="https://www.163.com/" name="hello" frameborder="0" width="1000px" height="800px"></iframe> <!--iframe中src空着(也可以不空,这样就是从一个地址切换到另一个地址) a标签通过target属性找到iframe中name属性找到iframe框架--> <a href="https://www.sina.com.cn/" target="hello">跳转到新浪</a> </body>
表单post和get提交（重点）
<body> <!--重点--> <!-- method提交表单的方式get/post action表示向何处发送表单数据 真实开发会提交到请求里面 中间的东西都是表单的内容 --> <h1>注册</h1> <!--表单form--> <!--action:表单提交的位置可以是网站,也可以是一个请求处理地址--> <!--method:post,get提交方式 get方式 我们可以在url中看到我们提交的信息(不安全但高效) post方式 提交比较安全,可以传输大文件 get方式不能提交大文件 --> <form action="08表格.html" method="post"> <!--文本输入框--> <p>名字: <input type="text" name="username"></p> <!--密码框--> <p>密码: <input type="password" name="password"></p> <p> <input type="submit"> <input type="reset"> </p> </form> <form action=""></form> </body>
文本框和单选框
<body> <!-- 表单元素属性格式 type 说明input是什么类型 默认 text name 表示表单元素的名称 如果要提交表单必填 value 元素的初始值 type为radio时必须指定一个值 size 元素的宽度 maxlength type为text或password时,输入的最大字符数 checked type为radio或checkbox时 指定按钮是否被选中 --> <form action="08表格.html" method="post"> <!--文本输入框--> <!--加了value和maxlength和size--> <p>名字: <input type="text" name="username" value="范宏达" maxlength="8" size="30"></p> <!--密码框--> <p>密码: <input type="password" name="password" size="30"></p> <!-- 单选框标签 name属性表示组 name属性值一样就是一个组 --> <p>性别: <!--radio标签实现 需要用name属性进行分组 他俩必须是一个name属性 这样才能实现单选的功能--> <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p> <p> <input type="submit"> <input type="reset"> </p> </form> </body>
按钮和多选框
<body> <form action="08表格.html" method="get"> <!--文本输入框--> <!--加了value和maxlength和size--> <p>名字: <input type="text" name="username" value="范宏达" maxlength="8" size="30"></p> <!--密码框--> <p>密码: <input type="password" name="password" size="30"></p> <!-- 单选框标签 name属性表示组 name属性值一样就是一个组 --> <p>性别: <!--radio标签实现 需要用name属性进行分组 他俩必须是一个name属性 这样才能实现单选的功能--> <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p> <p>爱好 <!--多选框checkbox--> <!--input标签都需要name属性 也要分组 会提交成一个数组的形式 键值对 的键都是一样的--> <input type="checkbox" value="sleep" name="hobby">睡觉
<!--checked选中--> <input type="checkbox" value="code" name="hobby" checked>敲代码 <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="game" name="hobby">游戏 </p> <!-- 按钮--> <p>按钮: <input type="button" name="btn1" value="点击"> <!--图片按钮 点击有提交的功能--> <input type="image" src="../resources/image/头像.jpg"> </p> <p> <input type="submit"> <input type="reset" value="清空表单"> </p> </form> </body>
列表框文本域和文件域
<!--表单其他元素 非input标签--> <!--下拉框,列表框--> <p>国家选项: <select name="列表名称"> <option value="China">中国</option> <option value="US">美国</option> <!--默认选项加 selected--> <option value="eth" selected>瑞士</option> <option value="yindu">印度</option> </select> </p> <!--文本域--> <p>反馈: <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p> <!--文件域--> <p> <input type="file" name="files"> <br> <!--都要有name属性,因为都是以键值对的形式上传的--> <input type="button" value="上传" name="upload"> </p>
搜索滑块和简单验证
<!--邮件验证--> <p>邮箱: <input type="email" name="email"> </p> <!--url验证--> <p>URL: <input type="url" name="url"> </p> <p>数字: <!--step步长--> <input type="number" name="num" max="100" min="10" step="10"> </p> <!--滑块--> <p>音量: <input type="range" name="voice" min="0" max="100" step="2"> </p> <!--搜索框--> <p> <input type="search" name="search"> </p>
表单的应用
只读readonly:
<p>名字: <input type="text" name="username" value="范宏达" maxlength="8" size="30" readonly></p>
禁用disabled:
<input type="radio" value="boy" name="sex" disabled/>男
隐藏hidden:
<p>密码: <input type="password" name="password" size="30" hidden></p>
label标签:
<!--增强鼠标可用性--> <!--通过label标签的for属性和input标签的id属性绑定 点击label的文字即可选中输入框--> <!--label标签的作用 可以指向一个位置--> <label for="mark">你点我试试</label> <input type="text" id="mark">
表单初级验证
为什么要表单验证?
- 减轻服务器的压力
- 保证数据安全
常用方式
- placeholder 提示性消息
- required 非空判断 必选项
- pattern 正则表达式
<p>名字: <input type="text" name="username" placeholder="请输入用户名" required></p>
<!--正则表达式--> <p>自定义邮箱: <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"> </p>
HTML总结
- HTML的基本结构
- 网页的基本标签(标题,段落,换行,水平线,注释,特殊符号)
- 图像标签(img)
- 超链接(锚链接 ,功能性标签)
- 行内元素和块元素
- 列表(有序,无序,自定义)
- 表格(行,列,跨行,跨列)
- 媒体元素(音频,视频)
- 网页的简单布局(头部,脚部,主体)
- 内联框架
- 表单(from,文本框,密码框,单选框,多选框,按钮,下拉框,滑块...)
- 表单运用(隐藏域,只读,禁用)
- 表单的初级验证(placeholder,required,pattern)
本文来自博客园，作者：范宏达，转载请注明原文链接：https://www.cnblogs.com/pg-fanhongda/articles/HTML5.html
浙公网安备 33010602011771号