基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>晚风花间寺中人</title>
</head>
<body>
<p>晨钟暮鼓林中径<br>晚风花间寺中人</p>
<p>请关注我的博客</p>
<p>
<a href="https://blog.csdn.net/weixin_46047285/" target="_blank" >访问我的CSDN博客!</a>
</p>
<a href="https://blog.csdn.net/weixin_46047285/article/details/104100768" target="_blank">这是我的第一篇原创博客</a>
<p>C语言程序设计<br/>数据结构</p>
<img src="../html/resources/image/博客.png" alt="标题截图"title="数据结构"width="300"height="240">
<p>感谢您的关注!</p>
</body>
</html>
链接学习
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
body {background-color:darkturquoise}
p {color: #b9f553
}
h1 {color:lightcoral}
<p>{color: beige}
</style>
<!--<base href="../html/resources/image/菜鸟教程.png" target="_blank">-->
<meta charset="UTF-8">
<title>linkStudy</title>
<!--1.链接语法:<a href="url">链接文本</a>
2.链接 - target 属性:使用 target 属性,你可以定义被链接的文档在何处显示。
3.在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips")":
<a href="#tips">访问有用的提示部分</a>
或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":
<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>-->
</head>
<body>
<p>晨钟暮鼓林中径<br>晚风花间寺中人</p>
<h1>请关注我的博客</h1>
<a href="#photo">跳转到图片链接</a>
<p>
<a href="https://blog.csdn.net/weixin_46047285/" target="_blank"style="text-decoration:none" >访问我的CSDN博客!</a>
</p>
<a href="https://blog.csdn.net/weixin_46047285/article/details/104100768" target="_blank">这是我的第一篇原创博客</a>
<p>C语言程序设计<br/>数据结构</p>
<img src="../html/resources/image/博客.png" alt="标题截图"title="数据结构"width="300"height="240">
<p>感谢您的关注!</p>
<p>创建图片链接</p><br>
<h2><a id="photo">图片链接</a></h2>
<p>有边框的图片链接:
<a href="https://blog.csdn.net/weixin_46047285">
<img border="10" src="../html/resources/image/我的博客主页.png" alt="wanwan_的博客" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="//https://blog.csdn.net/weixin_46047285">
<img border="0" src="../html/resources/image/我的博客主页.png" alt="wanwan_的博客" width="32" height="32"></a></p>
<p>跳出框架?</p>
<a href="https://blog.csdn.net/weixin_46047285/article/details/104100768" target="_top">点击这里!</a>
<p>
点击向我发送电子邮件:
<a href="mailto:[email protected]" target="_top">
发送邮件</a>
</p>
<p>
<b>注意:</b> 单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本。<br>
</p>
<img src="../html/resources/image/菜鸟教程.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,<br>该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "https://blog.csdn.net/weixin_46047285/article/details/104100768"
<br><br>
<a href="//https://blog.csdn.net/weixin_46047285/article/details/104100768">我的博客主页</a> - 注意这个链接会在新窗口打开,<br>即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="../html/resources/image/大冰 (57).jpg" alt="Pulpit rock" width="304" height="228">
<p>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><br>
<p>你好,我是 晚风花间寺中人 博客主,这是我的QQ</p>
<img border="0" src="../html/resources/image/QQ.png" alt="你好,我是 晚风花间寺中人 博客主,这是我的QQ:" title="你好,我是 晚风花间寺中人 博客主,这是我的QQ:"/></a>
<!--http://wpa.qq.com/pa?p=2::53-->
</body>
</html>
列表学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<h>HTML列表学习</h>
<p>有序列表</p>
<ol>
<!--有序列表 -->
<li>JAVA</li>
<li>C++面向对象程序设计</li>
<li>C语言</li>
<li>前端</li>
<li>后端</li>
</ol>
<br>
<p>无序列表</p>
<ul>
<!--无序列表 -->
<li>JAVA</li>
<li>C++面向对象程序设计</li>
<li>C语言</li>
<li>前端</li>
<li>后端</li>
</ul>
<br>
<!--自定义列表
<dl>:标签
<dt>:列表名称
<dd>:列表内容
-->
<dl>
<dt>自定义列表</dt>
<dd>JAVA</dd>
<dd>C++面向对象程序设计</dd>
<dd>C语言</dd>
<dd>前端</dd>
<dd>后端</dd>
<dt>社团</dt>
<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>
<!--表格学习
<tr>:行
<td>:列-->
<table border="2px">
<tr>
<td colspan="5">跨列实现</td>
<tr>
<tr>
<td rowspan="3">跨行实现</td>
<td>序号</td>
<td>学号</td>
<td>姓名</td>
<td>班级</td>
</tr>
<tr>
<td>1</td>
<td>2019001</td>
<td>张三</td>
<td>1901班</td>
</tr>
<tr>
<td>2</td>
<td>2019002</td>
<td>李四</td>
<td>1901班</td>
</tr>
</table>
</body>
</html>
视频和音频
视频元素:video
音频元素:audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频音频学习</title>
</head>
<body>
<!-- 视频和音频
src: 资源路径
controls: 控制开关
autoplay:自动播放-->
<p>播放视频</p>
<video src="resources/视频:新青年/“新青年”宣传片%20高清(480P).qlv"controls autoplay>视频播放</video>
<p>播放 袁娅维《我爱》 MV</p>
<video src="resources/视频:新青年/袁娅维%20-%20我爱.mp4"controls autoplay>视频播放</video>
<p>播放音频</p>
<audio src="resources/音频练习/王思涵%20-%20《时光慢递》.mp3"controls autoplay>音频播放</audio>
</body>
</html>
网页结构学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构学习</title>
</head>
<body>
<p>网页结构学习</p>
<br>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
iframe 内联框架
<iframe src="path" name="mainframe"></iframe>
src=“path”:引用页面地址
name=“mainframe”:框架标识名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架学习</title>
</head>
<body>
<!--
-->
<iframe src="https://blog.csdn.net/weixin_46047285" frameborder="2"width="1000px"height="800px">
</iframe>
<iframe src="" name="MyBlog"frameborder="0"width="1000px"height="800px">
</iframe>
<a href="https://www.cnblogs.com/wanwanyuan/"target="MyBlog">点击跳转到博客园</a>
<!--
<iframe src="//player.bilibili.com/player.html?aid=55631961&cid=97257967&page=11"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
-->
</body>
</html>
表单语法
get提交方式:
https://www.cnblogs.com/wanwanyuan/?username=wannan&password=1316561
post提交方式:
https://www.cnblogs.com/wanwanyuan/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<p>表单学习</p>
<!-- 表单学习
action:表单提交的位置,可以是网站,也可以是一个请求地址
method:提交方式
get:可以在url中看到我们提交的参数,高效,但不安全
post:比较安全,可以传输大文件
value="万万博客" maxlength="8"
-->
<form action="https://www.cnblogs.com/wanwanyuan/" method="post">
<!--文本输入框:input type="text" -->
<p>名字:<input type="text"name="username" > </p>
<!--密码输入框:input type="password" -->
<p>密码:<input type="password"name="password"> </p>
<!--单选框标签
input type="radio":单选框标签
value:单选框的值
name:表示组
-->
<p>性别:
<input type="radio"value="boy"name="sex"/>男
<input type="radio"value="girl"name="sex"/>女
</p>
<!--多选框标签
input type="checkbox":多选框标签
-->
<p>爱好:
<input type="checkbox"value="sleep" name="hobby">睡觉
<input type="checkbox"value="eat" name="hobby">吃饭
<input type="checkbox"value="study" name="hobby">学习
<input type="checkbox"value="game" name="hobby">打游戏
<input type="checkbox"value="music" name="hobby">听音乐
</p>
<!--
按钮
input type="button":
input type="image"
input type="submit"
input type="reset"
-->
<p>
普通按钮: <input type="button"value="跳转按钮"name="button01">
<br>
图片按钮:<input type="image"src="resources/image/我的博客主页.png"value="图片跳转按钮"name="button02"
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
表单学习以后内容均体现在以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<p>表单学习</p>
<!-- 表单学习
action:表单提交的位置,可以是网站,也可以是一个请求地址
method:提交方式
get:可以在url中看到我们提交的参数,高效,但不安全
post:比较安全,可以传输大文件
value="万万博客" maxlength="8"
-->
<form action="https://www.cnblogs.com/wanwanyuan/" method="post">
<!--文本输入框:input type="text" -->
<p>名字:<input type="text"name="username"placeholder="请输入用户名"required> </p>
<p>名字:<input type="text"name="username"value="admin"readonly > </p>
<!--密码输入框:input type="password" -->
<p>密码:<input type="password"name="password" value="123456" hidden> </p>
<!--单选框标签
input type="radio":单选框标签
value:单选框的值
name:表示组
-->
<p>性别:
<input type="radio"value="boy"name="sex" checked disabled/>男
<input type="radio"value="girl"name="sex"/>女
</p>
<!--多选框标签
input type="checkbox":多选框标签
-->
<p>爱好:
<input type="checkbox"value="sleep" name="hobby">睡觉
<input type="checkbox"value="eat" name="hobby">吃饭
<input type="checkbox"value="study" name="hobby" checked>学习
<input type="checkbox"value="game" name="hobby">打游戏
<input type="checkbox"value="music" name="hobby">听音乐
</p>
<!--
按钮
input type="button":
input type="image"
input type="submit"
input type="reset"
-->
<p>
普通按钮: <input type="button"value="跳转按钮"name="button01">
<br>
<!-- 图片按钮:<input type="image"src="resources/image/我的博客主页.png"value="图片跳转按钮"name="button02"
-->
</p>
<!--
下拉框,列表框-->
<p>课程选择
<select name="列表名称">
<option value="选项">java</option>
<option value="选项"selected>C++</option>
<option value="选项">C语言</option>
<option value="选项">Python</option>
</select>
</p>
<!--文本域
-->
<p>反馈
<textarea name="text"cols="10"rows="20">文本内容</textarea>
</p>
<p>
<input type="file"name="上传文件">
<input type="reset"name="清空表单">
</p>
<!--邮箱验证-->
<p>邮箱:
<input type="email"name="邮箱"required>
</p>
<!--URL-->
<p>URL:
<input type="url"name="端口"required>
</p>
<!--数字-->
<p>数字:
<input type="number"name="数字"max="100"min="0"step="1">
</p>
<!--滑块-->
<p>音量:
<input type="range"name="音量"max="100"min="0" step="2">
</p>
<!--搜索框-->
<P>搜索:
<input type="search"name="搜索">
</P>
<!--增强鼠标可用性-->
<p>
<label for="mark">你点我试试?</label>
<input type="text"id="mark">
</p>
<!--自定义邮箱
脚本之家:https://www.jb51.net/tools/regexsc.htm
-->
<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>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
分享我的HTML学习历程