初识HTML
什么是HTML？
Hyper Text Markup Language：超文本标记语言
基本结构、注释(Ctrl+/)
<!-- DOCTYPE：告诉浏览器，本页面要使用什么规范，不写也没关系，现在浏览器都是默认位html规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页的头部 -->
<head>
<!-- meta描述性标签，用来描述网站的一些信息 -->
<meta charset="UTF-8">
<!-- title标签代表网页的标题 -->
<title>Title</title>
</head>
<!-- body标签代表网页的主体 -->
<body>
</body>
</html>
网页基本标签
-
标题标签 <h>
-
段落标签 <p>
-
换行标签
-
水平线标签 <hr>
-
字体样式标签 粗体<strong>斜体<em>
-
注释和特殊符号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <body> <!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> <!--水平线标签--> <hr/> <!--段落标签--> <p>落霞与孤鹜齐飞，</p> <p>秋水共长天一色。</p> <!--换行标签，单标签且自闭合--> 落霞与孤鹜齐飞，<br/> 秋水共长天一色。<br/> <!--粗体，斜体--> <h1>字体样式标签</h1> 粗体：<strong>落霞与孤鹜齐飞，秋水共长天一色。</strong><br/> 斜体：<em>落霞与孤鹜齐飞，秋水共长天一色。</em> <br/> <!--特色符合--> 空格： 这是空格<br/> 大于号：><br/> 小于号：<<br/> 版权符号：©版权所有 </body> </html>
图像、超链接、网页布局
图像标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签学习</title> </head> <body> <!--img标签学习 src : 图片地址 相对地址：../ 上一级目录； 绝对地址：即电脑盘地址 alt : 图片名称，当path中无对应图片时候会显示名称 title : 鼠标悬停在图片时显示文字 width : 宽 height : 高 --> <img src="../resources/image/background.jpg" alt="美女背景" title="悬停时显示美女背景" width="1080" height="2338"> </body> </html>
超链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签学习</title> </head> <body> <!--使用name作一个标记--> <a name = "top">顶部</a> <!--超链接a标签 快速复制一行到下一行Ctrl+D href : 必填，表示要跳转到的页面 target : 表示窗口会在哪里打开 _blank : 在新标签中打开 _self : 在自己的网页中打开 --> <a href="1.我的第一个html网页.html" target="_blank">点击我会跳转到我的第一个html网页哦</a> <br/> <a href="https://www.baidu.com" target="_self">点击我会跳转到百度哦</a> <br/> <a href="https://www.baidu.com"> <img src="../resources/image/background.jpg" alt="美女背景" title="悬停时显示美女背景" width="1080" height="2338"> </a> <br/> <!--锚链接 1.需要一个锚标记 2.跳转到标记 3.定义一个标记 4.在href中用#+标记名称 也可以在本页面定义一个down标记，然后另一页面使用a标签，href中链接后跟#down直接跳转回本页面的down位置 --> <a href="#top">回到顶部</a> <br/> <!--功能性链接 邮件链接 : mailto: QQ链接 : 进QQ推广官网shang.qq.com,然后生成代码copy过来就ok！ --> <a href="mailto:723450551@qq.com">点击联系我</a> </body> </html>
网页布局
块元素
-
无论内容多少，该元素独占一行
-
(p、h1-h6...)
行内元素
-
内容撑开宽度,左右都是行内元素的可以在排在一-行
-
(a，strong，em...)
列表、表格、媒体元素
列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表学习</title> </head> <body> <!--有序列表 ： Ordered List ol标签用li标签 --> <ol> <li>Java</li> <li>HTML5+CSS3+JS</li> <li>JavaWeb+MVC</li> <li>J2EE+Spring+SpringMVC+MyBatis</li> <li>SpringBoot</li> </ol> <hr/> <!--无序列表 ： unordered list ul标签用li标签 --> <ul> <li>Java</li> <li>HTML5+CSS3+JS</li> <li>JavaWeb+MVC</li> <li>J2EE+Spring+SpringMVC+MyBatis</li> <li>SpringBoot</li> </ul> <!--自定义列表 ： definition list dt ： 列表名称 dd ： 列表内容 --> <dl> <dt>Java初级工程师学习路线</dt> <dd>Java</dd> <dd>HTML5+CSS3+JS</dd> <dd>JavaWeb+MVC</dd> <dd>J2EE+Spring+SpringMVC+MyBatis</dd> <dd>SpringBoot</dd> <dt>目标工作城市</dt> <dd>南京</dd> <dd>北京</dd> <dd>西安</dd> <dd>杭州</dd> <dd>上海</dd> </dl> </body> </html>
表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格学习</title> </head> <body> <!--表格table 行 ： tr 列 ： td --> <table border="1px"> <tr> <!--colspan : 跨列--> <td colspan="4">Java</td> </tr> <tr> <!--rowspan : 跨行--> <td rowspan="2">H</td> <td>T</td> <td>M</td> <td>L</td> </tr> <tr> <td>C</td> <td>S</td> <td>S</td> </tr> </table> </body> </html>
媒体元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素学习</title> </head> <body> <!--音频、视频 src : 路径 controls : 控制条 可以点击播放、快进、暂停、下载等等 autoplay : 进入网站自动播放 --> <video src="../resources/video/dfj.mp4" controls autoplay></video> <audio src="../resources/audio/FatalLove.mp3" controls autoplay></audio> </body> </html>
页面结构分析
-
header : 标题头部区域的内容(用于页面或页面中的一块区域)
-
footer ： 标记脚部区域的内容(用于整个页面或页面的一块区域)
-
section ： Web页面中的一块独立区域
-
article ： 独立的文章内容
-
aside ： 相关内容或应用(常用于侧边栏)
-
nav ： 导航类辅助内容
内联框架iframe
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架学习</title> </head> <body> <!--内联框架iframe--> <iframe src="" frameborder="0" name="hello" width="100px" height="80px"></iframe> <a href="1.我的第一个html网页.html" target="hello">点我呀</a> </body> </html>
表单及表单应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单学习</title> </head> <body> <!--form表单 action : 表单提交的位置,可以是一张网页也可以是一个请求处理地址 method : 有两种提交方式分别是post和get post :安全 可以传输大文件 get : 我们可以在url中看到我们提交的信息 不安全 高效 --> <form action="1.我的第一个html网页.html" method="post"> <p> <!-- 文本输入框 : input type="text" value : 默认初始值 maxlength="8" : 最长字符 size : 文本框长度 readonly : 只读 disable : 禁用 hidden : 隐藏 --> 用户名:<input type="text" name="username" value="whb" readonly/> </p> <p> <!-- 密码输入框 : input type="password"--> 密码: <input type="password" name="password" hidden/> </p> <p> <!-- 单选框 : input type="radio" value : 单选框的值 name : 表示组 disable : 禁用 --> <input type="radio" value="1" name="sex" checked disabled/>男 <input type="radio" value="0" name="sex"/>女 </p> <p>Java学习路线 : <!-- 多选框 : input type="checkbox" value : 单选框的值 name : 表示组 checked : 默认选中该项 --> <input type="checkbox" value="JavaSE" name="study">JavaSE <input type="checkbox" value="HTML5+CSS3+JS" name="study">HTML5+CSS3+JS <input type="checkbox" value="MySQL" name="study">MySQL <input type="checkbox" value="avaWeb-MVC" name="study">JavaWeb-MVC <input type="checkbox" value="JavaEE-SSM" name="study">JavaEE-SSM <input type="checkbox" value="SpringBoot+Vue" name="study" checked>SpringBoot+Vue </p> <p>按钮: <!-- 按钮 : input type="button" : 普通按钮 input type="image" : 图像按钮,等价于提交按钮 input type="submit" : 提交按钮 input type="reset" : 重置按钮 --> <input type="button" name="btn1" value="这是一个按钮"/> <!-- <input type="image" src="../resources/image/background.jpg" />--> </p> <!-- 下拉框,列表框 selected : 默认选中该项 --> <p>下拉框: <select name="列表名称" id=""> <option value="选项值">王者荣耀</option> <option value="选项值" selected>金铲铲</option> <option value="选项值">英雄联盟</option> <option value="选项值">穿越火线</option> </select> </p> <!-- 文本域 cols : 列 rows : 行 --> <p>意见: <textarea name="textarea" id="" cols="100" rows="10">文本内容</textarea> </p> <!-- 文件域 : input type="file" name="files" --> <p>您要上传的文件: <input type="file" name="files" /> <input type="button" name="upload" value="上传" /> </p> <!--邮件验证--> <p>邮箱 : <input type="email" name="email"> </p> <!-- URL验证--> <p>URL: <input type="url" name="url"> </p> <!-- 数字验证 max : 最大数字 min : 最小数字 step : 增减阈值 --> <p>数字验证: <input type="number" name="number" max="100" min="0" step="1" /> </p> <!-- 滑块--> <p>音量 <input type="range" name="voice" min="0" max="100" step="5" /> </p> <!-- 搜索框 :--> <p>搜索: <input type="search" name="search"> </p> <!-- 增强鼠标可用性--> <p> <label for="id">点我也可以到文本框</label> <input type="text" id="id"> </p> <p> <!-- submit : 提交 rest: 重置 --> <input type="submit"/> <input type="reset"/> </p> </form> </body> </html>
表单初级验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单初级验证学习</title> </head> <body> <form action="1.我的第一个html网页.html"> <!-- placeholder : 提示信息 required : 非空判断 pattern : 正则表达式 --> <p>用户名: <input type="text" name="username" value="" placeholder="请输入用户名" required> </p> <p>自定义邮箱: <input type="text" name="email" pattern="^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$"> </p> <input type="submit"> </form> </body> </html>
852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
