我的HTML学习之路

其他 2020-03-08 10:22:48 阅读次数: 0

基本结构

<!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学习历程

晚风花间寺中人
发布了52 篇原创文章 · 获赞 10 · 访问量 3709
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_46047285/article/details/104725757
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022