<!--DOCTYPE: 告诉浏览器，我们使用什么规范 -->
<!DOCTYPE html><html lang="en"><!--head标签代表网页头部 -->
<head><!--meta描述性标签，它用来描述网站的一些信息--><!--meta一般用来做SEO--><meta charset="UTF-8"><meta name="keywords" content="狂神说Java"><meta name="description" content="来这个地方学习Java"><!--title: 网页标题--><title>李木子</title>
</head><!--body标签代表网页主题 -->
<body>
放假了！
</body></html>
格式
1.标题标签 <h1>一级标签</h1>...<h6>六级标签</h6>
2.段落标签<p>久未放晴的天空</p><p>依旧留着你的笑容</p>
3.水平线标签<hr/>
4.换行标签久未放晴的天空<br/>依旧留着你的笑容<br/>
5.字体样式标签粗体：<strong>I love you</strong>斜体：<em>I love you</em>
6.空格标签
7.注释标签<!--注释标签-->
举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body>
<!--1.标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6><!--2.段落标签-->
<p>久未放晴的天空</p>
<p>依旧留着你的笑容</p>
<p>哭过却无法掩埋歉疚</p>
<p>风筝在阴天搁浅</p>
<p>想念还在等待救援</p>
<p>我拉着线复习你给的温柔</p><!--3.水平线标签-->
<hr/><!--4.换行标签-->
久未放晴的天空<br/>
依旧留着你的笑容<br/>
哭过却无法掩埋歉疚<br/>
风筝在阴天搁浅<br/>
想念还在等待救援<br/>
我拉着线复习你给的温柔<br/><!--5.字体样式标签-->
粗体：<strong>I love you</strong>
斜体：<em>I love you</em>
<br/><!--6.特殊符号-->
空 格：
<br/>
空 格：
<br/>
大于号>
<br/>
小于号<
<br/>
版权所有©</body>
</html>
格式
src: 图片地址(必填)
相对地址(../ 表示上级目录)
绝对地址alt: 图片名字(必填)
图片显示不出来时,就会显示图片名字.title: 悬停文字
width: 宽
height:高<img src="../resources/image/金智秀.gif" alt="金智秀图片" title="悬停文字" width="300" height="300">
举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body><img src="../resources/image/金智秀.gif" alt="金智秀图片" title="悬停文字" width="300" height="300"><img src="E:HTMLresourcesimage李知恩.jpg" alt="李知恩图片" title="悬停文字" width="300" height="300"></body>
</html>
格式
href:(必填)，表示要跳转到哪个页面
target:表示窗口在哪打开_blank: 在新标签中打开—self: 在自己的网页中打开<a href="1.我的第一个html.html" target="_blank">点击我跳转到页面一</a>
锚链接
1.需要一个锚标记
2.跳转到标记
3.#<a name="顶部">top</a><a href="#top">回到顶部</a>
功能性链接
邮件链接： mailto
QQ链接：<a href="mailto:2485931432@qq">点击联系我</a><a href="=3&uin=2694934416&site=qq&menu=yes" target="_blank">
<img border="0" src="=2:2694934416:53" alt="你好！" title="你好！"/></a>
<!--找2694934416聊天-->
例题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body><!--a标签
href:(必填)，表示要跳转到哪个页面
target:表示窗口在哪打开_blank: 在新标签中打开—self: 在自己的网页中打开
-->
<a name="顶部">top</a>
<br/>
<a href="1.我的第一个html.html" target="_blank">点击我跳转到页面一</a>
<br/>
<a href="1.我的第一个html.html" target="_self"><img src="../resources/image/金智秀.gif" alt="金智秀图片" title="悬停文字" width="300" height="300">
</a>
<br/><!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6><!--段落标签-->
<p>久未放晴的天空</p>
<p>依旧留着你的笑容</p>
<p>哭过却无法掩埋歉疚</p>
<p>风筝在阴天搁浅</p>
<p>想念还在等待救援</p>
<p>我拉着线复习你给的温柔</p><!--水平线标签-->
<hr/><!--换行标签-->
久未放晴的天空<br/>
依旧留着你的笑容<br/>
哭过却无法掩埋歉疚<br/>
风筝在阴天搁浅<br/>
想念还在等待救援<br/>
我拉着线复习你给的温柔<br/><!--锚链接
1.需要一个锚标记
2.跳转到标记
3.#
-->
<a href="#top">回到顶部</a><!--功能性链接
邮件链接： mailto
QQ链接：
-->
<a href="mailto:2485931432@qq">点击联系我</a><a href="=3&uin=2694934416&site=qq&menu=yes" target="_blank">
<img border="0" src="=2:2694934416:53" alt="你好！" title="你好！"/></a>
<!--找2694934416聊天-->
</body>
</html>
格式
有序列表
<ol><li>林允儿</li><li>iu</li>
</ol>无序列表
应用范围：导航，侧边栏~~
<ul><li>遇见</li><li>不能说的秘密</li><li>搁浅</li><li>numb</li>
</ul>自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围：网站底部
<dl><dt>编程语言</dt><dd>Java</dd><dd>C++</dd><dt>女神</dt><dd>林允儿</dd><dd>iu</dd></dl>
例题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol><li>林允儿</li><li>iu</li><li>金智秀</li><li>rose</li>
</ol><hr/>
<!--无序列表
应用范围：导航，侧边栏~~-->
<ul><li>遇见</li><li>不能说的秘密</li><li>搁浅</li><li>numb</li>
</ul><hr/>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围：网站底部-->
<dl><dt>编程语言</dt><dd>Java</dd><dd>C++</dd><dd>Python</dd><dt>女神</dt><dd>林允儿</dd><dd>金智秀</dd><dd>iu</dd></dl></body>
</html>
应用
格式
table
行 tr
列 td
跨行 rowspan
跨列 colspan
border="1px" 显示表格线<table border="1px"><tr><td colspan="3">学生成绩</td></tr><tr><td rowspan="2">王祖贤</td><td>语文</td><td>100</td></tr>
</table>
举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格学习</title>
</head><body>
<!--table
行 tr
列 td
跨行 rowspan
跨列 colspan
border="1px" 显示表格线
-->
<table border="1px"><tr><td colspan="3"> 学生成绩</td></tr><tr><td rowspan="2">王祖贤</td><td>语文</td><td>100</td></tr><tr><td>数学</td><td>10</td></tr><tr><td rowspan="2">刘胜</td><td>语文</td><td>39</td></tr><tr><td>数学</td><td>98</td></tr></table>
</body>
</html>
格式
音频与视频
video:视频
audio:音频
src: 资源路径
controls: 控制条
muted autoplay: 静音自动播放<video src="../resources/video/安静.mp4" controls muted autoplay></video>
<audio src="../resources/audio/java.aac" controls muted autoplay></audio>
举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体元素学习</title>
</head>
<body>
<!--音频与视频
src: 资源路径
controls: 控制条
muted autoplay: 静音自动播放
-->
<video src="../resources/video/安静.mp4" controls muted autoplay></video>
<audio src="../resources/audio/java.aac" controls muted autoplay></audio>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面结构学习</title>
</head>
<body>
<!--便于读源码-->
<header>标题头部
</header><article>独立文章
</article><footer>脚部区域
</footer></body>
</html>
格式
iframe
src: 地址
width: 宽度
height: 高度<iframe src="/" frameborder="0" width="700px" height="400px"></iframe>
举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联框架学习</title>
</head>
<body>
<!--iframe
src: 地址
width: 宽度
height: 高度
--><iframe src="/" frameborder="0" width="700px" height="400px"></iframe><iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="/" target="hello" >点击跳转哔哩哔哩</a>
</body>
</html>
文本框,单选框,按钮,多选框,文本域,文件域,下拉,搜索框滑块,简单验证
格式
1.表单from
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址。
method: post,getget: 我们可以在url中看到我们提交的信息，不安全，但是高效post:安全，可以传输大文件<form action="1.我的第一个html.html" method="get"></form>2.文本输入框：input type="text"
value="李木子" : 默认初始化值
maxlength="3" ：最长能写几个字符
size="10" ： 文本框的长度<!--readonly : 只读-->
<p>名字：<input type="text" name="名字" value="李木子" maxlength="3" size="10" readonly></p><!--hidden : 隐藏域-->
<p>密码：<input type="password" name="密码" size="10" hidden value="123456"></p>3.单选框标签input type="radio"
value: 单选框的值
name: 表示组名
checked: 默认选中
disabled:不能选择的但是可以默认<p>性别：<input type="radio" value="boy" name="sex" checked disabled>男<input type="radio" value="girl" name="sex">女
</p>4.多选框input type="checkbox"
checked: 默认选中<p>爱好女神：<input type="checkbox" value="裴秀智" name="hobby" checked>裴秀智<input type="checkbox" value="林允儿" name="hobby">林允儿<input type="checkbox" value="刘亦菲" name="hobby">刘亦菲<input type="checkbox" value="李知恩" name="hobby">李知恩
</p>5.按钮
input type="button" : 普通按钮
input type="image" : 图像按钮
input type="submit" ：提交按钮
input type="reset" ：重置按钮<p>按钮：<input type="button" name="btn1" value="裴秀智"><input type="button" name="btn1" value="rose"><input type="button" name="btn1" value="林允儿"><input type="image" src="../resources/image/金.jpg" height="40px" width="40px">
</p>
<p><!--提交--><input type="submit" name=提交 value="提交1"><!--重置--><!--disabled : 禁用--><input type="reset" name="重置" value="重置1" disabled>
</p>6.下拉框，列表框
<p>老婆：<select name="例表名称"><option value="裴秀智">裴秀智1</option><option value="林允儿" selected>林允儿1</option><option value="金智秀">金智秀1</option></select>
</p>7.文本域
cols="30" : 列
rows="10" : 行<p>反馈：<textarea name="textarea" cols="30" rows="10">内容</textarea>
</p>8.文件域
input type="file" name="files"<p><input type="file" name="files"><input type="button" value="上传" name="btn2">
</p>9.邮件验证<p>邮箱：<input type="email" name="email" placeholder="请输入邮箱" >
</p>10.数字
max="100" ：最大值
min="0" ：最小值
step="10" ： 每次增加的数据<p>商品数量：<input type="number" name="number" max="100" min="0" step="10">
</p>11.滑块input type="range"<p>音量：<input type="range" name="voice" min="0" max="100" step="10">
</p>12.搜索框<p>搜索：<input type="search" name="search" size="1">
</p&adonly : 只读
hidden : 隐藏域
disabled : 禁用
required: 非空
举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单学习</title>
</head>
<body><h1>注册</h1>
<!--表单from
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址。
method: post,getget: 我们可以在url中看到我们提交的信息，不安全，但是高效post:安全，可以传输大文件-->
<form action="1.我的第一个html.html" method="get"><!--文本输入框：input type="text"value="" : 默认初始化值maxlength="3" ：最长能写几个字符size="10" ： 文本框的长度--><!--readonly : 只读--><p>名字：<input type="text" name="名字" value="李木子" maxlength="3" size="10" readonly></p><!--密码框：input type="password" --><!--hidden : 隐藏域--><p>密码：<input type="password" name="密码" size="10" hidden value="123456"></p><!--单选框标签input type="radio"value: 单选框的值name: 表示组名checked: 默认选中--><p>性别：<input type="radio" value="boy" name="sex" checked disabled>男<input type="radio" value="girl" name="sex">女</p><!--多选框input type="checkbox"checked: 默认选中--><p>爱好女神：<input type="checkbox" value="裴秀智" name="hobby" checked>裴秀智<input type="checkbox" value="金智秀" name="hobby">金智秀<input type="checkbox" value="林允儿" name="hobby">林允儿<input type="checkbox" value="刘亦菲" name="hobby">刘亦菲<input type="checkbox" value="李知恩" name="hobby">李知恩</p><!--按钮input type="button" : 普通按钮input type="image" : 图像按钮input type="submit" ：提交按钮input type="reset" ：重置按钮--><p>按钮：<input type="button" name="btn1" value="裴秀智"><input type="button" name="btn1" value="rose"><input type="button" name="btn1" value="林允儿"><!--<input type="image" src="../resources/image/金.jpg">--></p><!--下拉框，列表框--><p>老婆：<select name="例表名称"><option value="裴秀智">裴秀智</option><option value="林允儿" selected>林允儿</option><option value="金智秀">金智秀</option></select></p><!--文本域cols="30" : 列rows="10" : 行--><p>反馈：<textarea name="textarea" cols="30" rows="10">内容</textarea></p><!--文件域input type="file" name="files"--><p><input type="file" name="files"><input type="button" value="上传" name="btn2"></p><!--邮件验证--><p>邮箱：<input type="email" name="email" placeholder="请输入邮箱" required></p><!--URL--><p>URL：<input type="url" name="url"></p><!--数字max="100" ：最大值min="0" ：最小值step="10" ： 每次增加的数据--><p>商品数量：<input type="number" name="number" max="100" min="0" step="10"></p><!--滑块input type="range"--><p>音量：<input type="range" name="voice" min="0" max="100" step="10"></p><!--搜索框--><p>搜索：<input type="search" name="search" size="1"></p><p>自定义邮箱：<input type="text" name="邮箱" pattern="^[A-Za-z0-9u4e00-u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$"></p><p><!--提交--><input type="submit" name=提交 value="提交1"><!--重置--><!--disabled : 禁用--><input type="reset" name="重置" value="重置1" disabled></p>
</form>
</body>
</html>
格式
div 默认独占一行
span 它的长度就是封装数据的长度
举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--div 默认独占一行
span 它的长度就是封装数据的长度
p 换行
-->
<div>lll</div>
<div>lll</div>
<span>wwwwwwwwww</span>
<span>wwwwwwwwww</span>
</body>
</html>
本文发布于:2024-02-01 05:33:58，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170673683834261.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
