HTML学习

HTML

 

一、创建自己的第一个网页

用IDEA创建一个HTML File，会自动生成基本格式

 <!--DOCTYPE告诉浏览器我们要使用什么规范-->
 <!DOCTYPE html>
 ​
 <html lang="en">
 <!--head标签代表网页头部-->
 ​
 <head>
     <!--meta描述性标签，用来描述我们网站的一些信息-->
     <meta charset="UTF-8">
     <meta name="keywords" content="hly学java">
     <meta name="description" content="好好学习，天天向上">
 ​
     <!--    title网页标题-->
     <title>我的第一个网页</title>
 </head>
 ​
 <!--body标签代表网页主体-->
 <body>
 Hello，World！
 </body>
 ​
 </html>

 

二、基本标签

 <!-- 标题标签 -->
 <h1>一级标签</h1>
 <h2>二级标签</h2>
 <h3>三级标签</h3>
 <h4>四级标签</h4>
 <h5>五级标签</h5>
 <h6>六级标签</h6>
 ​
 <!-- 段落标签 -->
 <p>两只老虎，两只老虎，</p>
 <p>跑得快，跑得快，</p>
 <p>一只没有眼睛，</p>
 <p>一只没有尾巴，</p>
 <p>真奇怪！真奇怪！</p>
 ​
 <!-- 水平线标签 -->
 <hr/>
 ​
 <!-- 换行标签 -->
 两只老虎，两只老虎，<br/>
 跑得快，跑得快，<br/>
 一只没有眼睛，<br/>
 一只没有尾巴，<br/>
 真奇怪！真奇怪！<br/>
 ​
 <!-- 粗体、斜体标签 -->
 <h1>字体样式标签</h1>
 粗体：<strong>i love you</strong>
 <br/>
 斜体：<em>i love you</em>
 ​
 <br>
 <!--特殊符号-->
 空格 &nbsp ：Java&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML
 <br>
 &gt;大于符号
 <br>
 &lt;小于符号
 <br>
 &copy;版权符号
 ​
 <!--
 特殊符号记忆方式
 &+字母；
 -->

 

三、图像标签

 <!--img学习
 src:图片地址（必填）
     相对地址(推荐使用) 绝对地址
     ../  上一级目录
 alt:图片名字 当地址错误时显示的代替文字（必填）
 title：当鼠标悬停在图片处会显示的文字
 width heigth：图片的宽 高
 -->
 ​
 <img src="../resources/image/1.png" alt="原始数组与稀疏数组的对照"title="原始数组与稀疏数组的对照"width="800"height="600">
 ​
 <br>
 <a href="4.链接标签.html#down">跳转
 </a>

 

四、链接标签

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>链接标签学习</title>
 </head>
 <body>
 ​
 <!--使用name作为标记-->
 <a name="top">顶部</a>
 ​
 <!--a标签
 href:必填，表示要跳到哪个页面
 target:表示窗口在哪里打开
         _blank:在新标签中打开
         _self:在现有标签中打开
 -->
 ​
 <a href="1.我的第一个网页.html" target="_blank">点击此跳转到我的第一个页面</a>
 <a href="http://www.baidu.com"target="_self">点击此跳转到百度</a>
 <br>
 <a href="1.我的第一个网页.html">
     <img src="../resources/image/1.png" alt="原始数组与稀疏数组的对照"title="原始数组与稀疏数组的对照"width="800"height="600">
 </a>
 ​
 ​
 ​
 <!--锚链接
 1.需要一个锚标记
 2.跳转到标记
   利用#
 -->
 ​
 <a href="#top">回到顶部</a>
 ​
 <a name="down">底部</a>
 ​
 <!--功能性链接
 邮件链接：mailto：
 -->
 <a href="mailto:458752662@qq.com">点击联系我</a>
 ​
 </body>
 </html>

五、列表

有序列表：以ol为标签

无序列表：以ul为标签

自定义列表：以dl为标签，dt为标题，dd为内容

 <!--有序列表-->
 <ol> <!--order list 有序列表-->
   <li>java</li>
   <li>python</li>
   <li>运维</li>
   <li>前端</li>
 </ol>
 ​
 <!--无序列表-->
 <ul>
     <li>java</li>
     <li>python</li>
     <li>运维</li>
     <li>前端</li>
 </ul>
 ​
 <!--自定义列表
 dl:标签
 dt：标题
 dd：列表内容
 -->
 <dl>
     <dt>学科</dt>
 ​
     <dd>java</dd>
     <dd>python</dd>
     <dd>linux</dd>
     <dd>c</dd>
 ​
     <dt>位置</dt>
     
     <dd>重庆</dd>
     <dd>合肥</dd>
     <dd>杭州</dd>
 </dl>

 

六、表格

表格table，行tr，列td，给表格加边框<table border="数字px">

跨列colspan，<td colspan="数字">

跨行rowspam，<tr rowspan="数字">

 <!--以下表示四行四列的表格-->
 <table border="1px">
 <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
 </tr>
 <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
 </tr>
 <tr>
       <td></td>
     <td></td>
     <td></td>
     <td></td>
 </tr>
 <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
 </tr>
 </table>
 ​
 ​
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>表格标签学习</title>
 </head>
 <body>
 <!--表格table
 行 tr
 列 td
 -->
 <table border="2px">
   <tr>
     <!--colspan 跨列-->
     <td colspan="3">成绩统计</td>
   </tr>
   <tr>
     <!--rowspan 跨行-->
     <td rowspan="2">mikasa</td>
     <td>语文</td>
     <td>150</td>
   </tr>
   <tr>
     <td>数学</td>
     <td>150</td>
 ​
   </tr>
 </table>
 </body>
 </html>

七、媒体元素

 <!--音频和视频元素
 src：资源路径
 controls：可以控制视频的开始停止、拖动进度条
 autoplay：打开网页视频自动播放
 -->
 <video src="../resources/video/例题讲解.mp4" controls autoplay></video>
 ​
 <audio src=""></audio>  <!--音频，和上面的视频是大同小异的-->

八、iframe内联框架

 <!--iframe内联框架
 src：地址
 w-h：宽度和高度
 -->
 <iframe src="http://www.baidu.com" name="1" frameborder="0"width="1300px"height="700px"></iframe>
 <a href="http://www.bilibili.com" target="1">点击跳转</a>
 ​
 <!--下面的代码是直接跳转到b站的紫雨视频-->
 <iframe src="//player.bilibili.com/player.html?aid=47466066&bvid=BV1Db411s7Ri&cid=83129526&page=1"
         scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
 </iframe>

九、表单

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>登陆注册</title>
 </head>
 <body>
 ​
 <h1>注册</h1>
 ​
 ​
 ​
 <!--表单form
 action：表单提交的位置，可以是网站，也可以是一个请求处理地址
 method:post,get  提交方式
         get方式提交，我们能在url里面看见我们提交的信息，高效但不安全
         post方式提交，看不见提交的信息，比较安全，还可以传输大文件
 -->
 <!--
 value="haha" 默认初始值
  maxlength="8" 最大输入字符数
  size="30" 文本框长度
 -->
 <form action="1.我的第一个网页.html" method="post">
         <!--文本输入框 input type="text"-->
         <!--placeholder：提示信息标签-->
         <!--required：非空判断，起到必须填写不然无法提交的作用-->
     <p>名字：
         <input type="text"name="username" maxlength="8" size="30" placeholder="请输入用户名" required>
     </p>
         <!--密码框：input type = "password"-->
     <p>密码：
         <input type="password" name="password" maxlength="8" size="30" placeholder="请输入密码" required>
     </p>
 ​
 ​
 ​
     <!--单选框标签
        input type="radio"
        vaule：单选框的值
        name：组，如果不是同组，则两个都可选，出错
        -->
     <p>性别：
         <input type="radio" value="boy" name="sex" required>男
         <input type="radio" value="girl" name="sex" required>女
     </p>
 ​
 ​
 ​
 <!--多选框
 input type="checkbox"
 -->
     <p>
         <input type="checkbox" value="sleep" name="hobby">睡觉
         <input type="checkbox" value="coding" name="hobby" checked>敲代码
         <input type="checkbox" value="chat" name="hobby">聊天
         <input type="checkbox" value="game" name="hobby">玩游戏
     </p>
 ​
 ​
 ​
 <!--按钮、
 input type="button"  普通按钮
 input type="image"   图片按钮
 input type="submit"  提交
 input type="reset"   重置
 -->
     <p>按钮：
         <input type="button" name="btn1" value="点击变长">
         <!--图片按钮-->
         <input type="image" src="../resources/image/1.png" width="100" height="100；">
     </p>
 ​
 ​
 ​
 <!--下拉框，列表框
 -->
     <p>下拉框
         <select name="列表名称" >
             <option value="china" >中国</option>
             <option value="pty"selected>葡萄牙</option>
             <option value="germany">德国</option>
             <option value="france">法国</option>
             <option value="england">英国</option>
             <option value="american">美国</option>
         </select>
     </p>
 ​
 ​
 ​
 <!--文本域
 textarea name="textarea" cols="50" rows="10"
 -->
     <p>反馈
         <textarea name="textarea" cols="50" rows="10">
             文本内容
         </textarea>
     </p>
 ​
 ​
 ​
 <!--文件域
 input type="file" name="files"
 -->
     <p>
         <input type="file" name="files">
         <input type="button" value="上传" name="upload">
     </p>
 ​
 ​
 ​
 <!-- 邮件验证-->
     <p>邮箱：
         <input type="email" name="email" placeholder="请输入邮箱" required>
     </p>
 ​
 <!--URL-->
     <p>URL：
         <input type="url" name="url">
     </p>
 ​
 <!--数字-->
     <p>商品数量
         <input type="number" name="number" max="100" min="0" step="1"> 
    </p> 
​ 
<!--滑块--> 
    <p>音量 
        <input type="range" name="range" max="100" min="0" step="2"> 
    </p> 
​ 
<!--搜索框--> 
    <p>搜索： 
        <input type="search" name="serach" id="mark" placeholder="请输入想搜索的内容"> 
    </p> 
​ 
<!--只读 禁用 隐藏域 
    readonly disable hidden 
--> 
​ 
<!--增强鼠标可用性 
label for="mark" 再利用id=mark来指引 
--> 
    <p> 
        <label for="mark">点击这里跳转到搜索框</label> 
    </p> 
​ 
    <p> 
        <input type="submit" > 
        <input type="reset" value="清空表单"> 
    </p> 
​ 
    <!--正则表达式 
    http://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> 
​ 
</form> 
​ 
</body> 
</html>

 

 
posted @ 2021-07-22 17:02  Hly459  阅读(55)  评论(0)    收藏  举报