java学习之--------HTML

其他 2019-06-23 16:21:13 阅读次数: 0

HTML

  1. 基本结构
<!DOCTYPE html><!--声明：浏览器使用声明规范 html-->

<html lang="en">
<!--  注释ctrl+/ -->
<!--标签成对出现-->
<!--头部标签-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
你好啊
</body>
</html>

< t i t l e >标签：网页的标题；

< meta >标签：关键字标签；

    <!--网页编码-->
    <meta charset = "UTF-8">
    //搜索关键字
    <meta name = "keywords"content="郝一凡，Java，辛卫东">
    //网页的描述
    <meta name = "description"content="郝一凡and辛卫东">

网页的基本标签

  1. 标题标签

    <!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

    在这里插入图片描述

  2. 段落标签

    <h1>    段落标签</h1>
<p>haha</p>
<p>enen</p>
<p>hihi</p>
<p>aaaa</p>
<p>bbbb</p>

    在这里插入图片描述

  3. 换行标签

    <!--换行标签-->
<h1>换行标签</h1>
你好<br/>
你好<br/>
你好<br/>
你好<br/>
你好<br/>

  4. 水平线标签

    <!--水平线标签-->
<h1>水平线标签</h1>
<hr/>你好<br/>
你好<br/>
你好<br/>
你好<br/>
你好<br/>

在这里插入图片描述
5. 字体样式标签

<h1>加粗标签</h1>
<strong>I love you</strong>

<h1>斜体标签</h1>
<em>斜体标签</em>

在这里插入图片描述
6. 特殊符号标签

<h1>特殊符号</h1>
大于:&gt  <br/>
小于:&lt   <br/>
空格:你&nbsp;&nbsp;&nbsp;好<br/>
引号：""&quot;&quot;<br/>
版权符号:&copysr;&copy;郝一凡版权<br/>

在这里插入图片描述

图像标签

  1. 常见的图像格式：

  • ipg

  • png

  • bmp拉图

  • gif

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--src 图片的路径
title 鼠标悬停提示
绝对路径不推荐使用
alt 图片的名字-->
<img src="../Images/捕获.PNG"title="鼠标悬停提示" alt="郝一凡" width="" height="">
</body>
</html>

在这里插入图片描述

超链接

<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
     <body>
     <!--href 链接的地址-->
     <a target="_blank" href="https://www.baidu.com">新打开窗口点击跳转</a>
     <a target="_self" href="https://www.baidu.com">本窗口点击跳转</a>
     <!--图像链接-->
     <a href="https://www.baidu.com"><img src = "../Images/捕获.PNG"></a>
     
     <!--锚链接从一个地方跳到指定地方-->
     <a mark="mark"> 锚链接标记</a>
     
     <a href="#mark">点击跳转</a>
     <a href="Demo.html#top">跳转到Demo页顶部</a>
     </body>
     </html>

锚链接

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  <a name="顶部">顶部</a>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <a name="top1">页面一</a>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <a name="top2">页面二</a>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <a name="top3">页面三</a>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <p>============================================================================================================================</p>
  <a href="#top">回到顶部</a>
  <a href="#down">回到底部</a>
  <a href="#top1">回到页面1</a>
  <a href="#top2">回到页面2</a>
  <a href="#top3">回到页面3</a>
  
  
  
  
  
  </body>
  </html>

列表标签

<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
     <body>
     <h1>无序列表</h1>
     <ul>
         <li>java</li>
         <li>linux</li>
         <li>c++</li>
         <li>Pathon</li>
     </ul>
     <h1>有序列表</h1>
     <ol>
         <li>java</li>
         <li>linux</li>
         <li>c++</li>
         <li>Pathon</li>
     </ol>
     <h1>自定义列表</h1>
     <!--dt列表标题
     dd列表选项-->
     <dl>
         <dt>java</dt>
         <dd>oop</dd>
         <dd>java</dd>
         <dt>Pathon</dt>
         <dd>数据挖掘</dd>
         <dd>人工智能</dd>
     </dl>
     </body>
     </html>

表格标签

  <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
     <body>
     <table border=1px>
         <tr>
             <td colspan="2">1-1</td>
             <td>1-2</td>
             <td>1-3</td>
             <td>1-4</td>
             <td>1-5</td>
         </tr>
         <tr>
             <td rowspan="3">1-1</td>
             <td>1-2</td>
             <td>1-3</td>
             <td>1-4</td>
             <td>1-5</td>
         </tr>
         <tr>
             <td>1-1</td>
             <td>1-2</td>
             <td>1-3</td>
             <td>1-4</td>
             <td>1-5</td>
         </tr>
     
     </table>
     </body>
     </html>

视频标签

<!--autoplay 自动播放视频-->
     <video src="../Images/多线程21：CopyOnWriteArrayList.mp4" controls width="1280px" height="720px" autoplay></video>

内联表单

 <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
     <body>
     <!--iframe内联框架 在一个网页中嵌入另外一个网页
     <iframe  name="market" src="" frameborder="0" width="960" height="540" ></iframe>
     <a href="https:\\www.baidu.com" target="market">test</a>
     <a href="https:\\www.baidu.com" target="market">test</a>
     <a href="https:\\www.baidu.com" target="market">test</a>-->
     
     
     <!--method 提交方式：post get-->
     <!--action 提交地址-->
     <h1>注册</h1>
     <!--
     input属性：
         type = test
         name：名字 可以重复
         id：表示全代码唯一
         disable:禁用文本框
     
     -->
     <!--
         get:不安全 效率高 一次请求的文件量特别小
         post：安全 效率低 能提交无限大 的文件
     -->
     <form action="列表标签.html" method="post"><!--/提交地址-->
         <!--
         文本框：type = test
         -->
         <p>用户名字：<input type="text" name="username"></p>
         <!--密码框：type = password-->
         <p>输入密码：<input type="password" name="password"></p>
         <p>确认密码：<input type="password" name="password"></p>
         <!--提交：type = submit
             默认名字是submit value可以改变
         -->
         <p>
             <input type="submit" name="Button" value="提交" >
             <!--type = reset 清空表单-->
             <input type="reset" name="Button" value="重置" >
         </p>
         <p>
             <input type="button" value="button">
             <input type="file" value="选择文件">
         </p>
         <p>
             <!--注意事项：
                 若是要提交，则必须有name和value属性
                 name就是key提交的值，value是提交的信息
             -->
             <!--绑定同一个组-->
             性别
             <input type="radio" value="男" name="group1" >男
             <input type="radio" value="女" name="group1">女
         </p>
         <p>
             爱好
             <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>
         <p>
             <input type="week" value="123" name="456"> 123
         </p>
         <p>
             <input type="color" value="红色" name="color">选择颜色
         </p>
         <!--下拉框-->
         <select name="列表名称" id="">
             <!--selected默认选中-->
             <option value="1">1</option>
             <option value="2" selected>2</option>
             <option value="3">3</option>
             <option value="4">4</option>
         </select>
         <!--文本域-->
         <textarea name="" cols="30" rows="10"></textarea>
     <p>
             <!--Email的验证-->
             邮箱：<input type="email" name="email"></br></br>
             <!--url的简单验证-->
             URL：<input type="url" name="url"></br></br>
             <!--数字的简单验证-->
             请输入数字：<input type="number"></br></br>
             <!--滑块 默认值为50%-->
             <input type="range"></br>
             <!--搜索框-->
             <input type="search">
         </p>
     </form>
     </body>
     </html>
     
     ```

     - hidden：隐藏域
     - readonly：仅读
     - disable：禁用
     - required：必填

猜你喜欢

转载自blog.csdn.net/qq_40791843/article/details/91385317
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022