JavaEE01_html

最新推荐文章于 2024-02-21 12:30:00 发布
最新推荐文章于 2024-02-21 12:30:00 发布
阅读量118 收藏
点赞数
分类专栏： JavaEE 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaosi852/article/details/111598458
版权

JavaEE01_html

1、基本标签

<!--DOCTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>

<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，他用来描述我们网站的一些信息，一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content ="小厮不想打代码">
    <meta name="description" conten ="来这个地方学代码">
<!--keywords:有哪些关键词。description:描述-->

<!-- title网页标题-->
<title>标题标签</title>

<!--块级标签：文字显式时占据一整行的位置，如h1，div，p-->

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

<!--段落标签-->
<p>aaa bbb</p>
<p>ccc ddd</p>
<p>eee fff</p>

<!--水平线标签-->
<hr/>

<!--换行标签:依旧是一段-->
aaa bbb<br/>
ccc ddd<br/>
eee fff<br/>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体:<strong>i love you</strong>
斜体:<em>i ;ove you</em>
<!--特殊符号-->
空      格:
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:

<!--&gt;>  &lt;<  版权符号&copy;-->
&gt;
&lt;
&copy;
<!--
特殊符号记忆方式：通过自动提示查看网页
&  ;
-->

2、其他标签

图片标签

!--img:
src:图片地址（必填）
    相对地址(推荐使用)，绝对地址
    ../   上一级目录
alt:图片名字（必填）
其他选填
-->
<img src="../resources/img/1.jpg" alt="xiaosi" title="悬停文字" width="658" height="1054">

列表

<!--有序列表
应用范围：试卷，问答...
-->
<ol>
    <li>java</li>
    <li>pyhton</li>
    <li>运维</li>
    <li>前端</li>
    <li>C++</li>
</ol>

<!--无序列表
运用范围：导航，侧边栏...
-->
<ul>
    <li>java</li>
    <li>pyhton</li>
    <li>运维</li>
    <li>前端</li>
    <li>C++</li>
</ul>

!--自定义列表
dl:标签
dt:列表名称
dd：列表内容

公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>C++</dd>
    
    <dt>学科</dt>
    <dd>aa</dd>
    <dd>bb</dd>
    <dd>cc</dd>
</dl>

表格

!--表格table
行  tr
列  td
border:加边框
-->
<table border="1px">
    <tr>
<!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
<!--rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

视频与音频标签

<!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resources/video/1.mp4" controls autoplay></video>

<audio src="../resources/audio/guimie.mp3" controls></audio>

页面结构

<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主题</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>

内联框架

<!--iframe内联框架
src：地址
name:框架标识名
-->
<iframe src="6.表格.html" name="Hello" frameborder="0" width="800px" height="500px"></iframe>
<a href="https://www.baidu.com" target="Hello">单击跳转</a>

表单

<!--表单form
action：表单提交位置，可以是网站，也可以是一个请求地址
method：post，get提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
    post方式提交：url看不到，比较安全
-->
<form action="1.我的第一个网页.html" method="get">
	<input type="text" name="username" value="admin" readonly>
    <input type="password" name="pwd" value="123456" hidden>
</form>

连接标签

a标签

<!--a标签
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
    _blank  在新标签中打开
    -self    在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>

图片标签（本质还是a标签）：

<a href="1.我的第一个网页.html">
        <img src="../resources/img/1.jpg" alt="xiaosi" title="悬停文字" width="658" height="1054">
</a>

锚链接：

<a name="top">顶部</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>

功能性链接:

<!--功能性链接
邮件链接：mailto
QQ链接：可以在qq推广官网生成，这里不演示
-->
<a href="mailto:1170035083@qq.com">点击联系我</a>

3、一个简单的提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<!--表单form
action：表单提交位置，可以是网站，也可以是一个请求地址
method：post，get提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
    post方式提交：url看不到，比较安全
-->
<form action="1.我的第一个网页.html" method="get">
<!--文本输入框：input type="text"
value：默认初始值
maxlength 最长能写几个字符
size：文本框的长度
readonly:只读标签，数据不能修改
hidden:隐藏，只是隐藏了，但熟系依旧存在
-->
    <p>名字：<input type="text" name="username" value="admin" readonly></p>
<!--密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd" value="123456" hidden></p>
    <!--单选框标签
    input type="radio"
    value：单选框的值
    name：表示组（不同组之间可以多选，同组之间只能单选）
    disabled:禁用
    -->
    <p>
        <input type="radio" value="boy" name="sex" disabled/>男
        <input type="radio" value="girl" name="sex">女
    </p>

<!--多选框
input type="checkbox"
checked:默认选中
-->
    <p>爱好：
        <input type="checkbox" value="sleep"  name="hobby">睡觉
        <input type="checkbox" value="code"  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="bt1" value="点击变长">
<!--        图片点击提交-->
        <input type="image" src="../resources/img/2.jpg">
    </p>
<!--下拉框，列表框
selected:默认选中
-->
    <p>下拉框：
        <select name="列表标签">
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值" selected>梵蒂冈</option>
            <option value="选项的值">雅典</option>
        </select>

    </p>
<!--文本域
cols="50" rows="10"
-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">

        </textarea>
    </p>
<!--文件域
都需要name属性
-->
    <p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
    </p>



<!--    邮件验证-->
    <p>邮箱
        <input type="email" name="email" placeholder="请输入邮箱">
    </p>
<!--    URL-->
    <p>URL
        <input type="url" name="url">
    </p>

<!--    数字
step:步长，每次加多少
placeholder:文本框中给提示信息
required：不能为空
pattern：正则表达式(现用现查)
-->
    <p>自定义邮箱
        <input type="text" name="diyemail" 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="number" name="num" max="100" min="0" step="10" required>
    </p>
<!--滑块-->
    <p>滑块
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
<!--    搜索框-->
    <p>搜索
        <input type="search" name="search">
    </p>

<!--    增强鼠标可用性-->
   <p><label for="mark">你点我试试</label>
       <input type="text" id="mark">
   </p>


    <input type="submit" value="提交">
    <input type="reset">
</form>
</body>
</html>
xiaosi852
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSCronUI:jQuery扩展，用于通过友好的UI生成cron表达式
05-09
JSCronUI 一个用于生成 cron表达式的jQuery扩展。 关于 JSCronUI为用户提供了一个全面的界面来安排任务，同时允许开发人员利用cron的功能。 此外，JSCronUI提供了一个cron-english转换器，使用户无需打开完整的UI即可查看时间表的简要摘要。 开发人员可以提供定制模板以在其上运行JSCronUI，也可以使用随附的模板。 如何使用 您可以在内存中创建new jsCronUI(settings, element)并直接调用方法。 JSCronUI还扩展了jQuery，可以通过在任何jQuery对象上调用.jsCronUI()来创建一个新实例。 创建完成后，通过在同一个jQuery对象上调用.jsCronUI('methodName', arguments)来调用任何方法。 在这两种情况下，JSCronUI都会自动将必需的DOM注入给定元素。 设定值 创
html&css的简单了解
m0_50496669的博客
09-07 1198
html&css html： 常用的标签： div、p、ul li、ol li、h1-h6、a、span、b、u、i、input（属性text、number、password、radio、checkbox、submit、reset）、form、select>option、textarea h5(新标签）：header、nav、footer、main、section、video、audio、input（color、range、week、date） 标签的分类： 单双标签：单标签没有与之对
html怎么换行？换行代码是什么？九种html文字换行方法总结
热门推荐
lin123_00的博客
05-26 5万+
在用html写网页时，为了让网页中内容看起来整洁流畅，我们需要将其中的文字内容进行换行，那么，html怎么来换行呢？本篇文章就来给大家介绍一下html中给文字换行的方法。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） html中换行的方法有很多，其中最为简单的就是利用<br>标签，但是有时我们为了网页的设计，就需要灵活的运用各种不同的方法来实现文字的换行。具体有哪些方法可以实现换行，我们就来看一看。 1、HTML换行的代码是<br>
git-03 其他使用
yuyingsuixing123的博客
09-18 220
学习自廖雪峰的官方网站 Git的标签就是指向某个commit的指针，但是指针不能移动。标签可以快速定位一个 commit,在发布版本时会创建。 1、创建标签： git tag tag_name 2、在指定commit id上打标签： git tag tag_name commit_id 3、查看标签： git tag 4、查看标签信息： git show tag_name 5、创建带有提示信息的标签： git tag -a tag_name -m "messag
prometheus label标签的使用
最新发布
郑俊强的博客
02-21 604
标签提供了时间序列的纬度，它们可以定义目标，并为时间序列提供上下文，但最重要的是结合指标名称，它们构成了时间序列的表示，如果它们改变了，那么时间序列的表示也会改变删除不必要的指标从指标中删除敏感或不需要的标签添加、编辑或修改指标的标签值或标签格式记住有两个阶段我们可以重新命名。第一阶段是重新标记来自服务发现的目标。这对于将来自服务发现的元数据标签的信息应用到您的度量上的标签非常有用。这是在作业内部的relabel_configs块中完成的。
javaee_marven:javaee_marven
03-28
javaee_marven javaee_marven
JavaEE、HTML、CSS、JavaScript开发文档集合.zip
03-18
JavaEE、HTML、CSS、JavaScript开发文档集合 JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发...
javaEE_API
07-04
javaEE_API，html格式，感兴趣的朋友可以参考参考，
JavaEE帮助手册_分卷压缩01
03-28
包括123个javaEE学习的chm文档，共311M大小，分成5个压缩包（分卷压缩的）供大家下载。。。css样式表滤镜,DHTML默认行为手册,Ext2.2,Hibernate 2.1 中文参考手册,hibernate_3.2.0_符合java习惯的关系数据库持久化_zh...
Git中tag的用法及作用简介
君子慎独，不欺暗室；卑以自牧，不欺于心
08-20 1万+
一、什么是tag tag是git版本库的一个标记，指向某个commit的指针。 tag主要用于发布版本的管理，一个版本发布之后，我们可以为git打上 v.1.0.1 v.1.0.2 …这样的标签。 tag感觉跟branch有点相似，但是本质上和分工上是不同的： tag 对应某次commit, 是一个点，是不可移动的。 branch 对应一系列commit，是很多点连成的一根线，有一个HEAD 指针，是可以依靠 HEAD 指针移动的。 所以，两者的区别决定了使用方式，改动代码用 branch ,不改动只查看用
Git 标签tag命令介绍
weixin_45797022的博客
11-06 1万+
返回根目录。在cmd.exe弹出框中输入’ cd \ ’ 后按回车，即可返回到X盘的根目录。 返回上一级。在cmd.exe弹出框中输入’ cd … ’ 后按回车，即可返回到当前目录的上一个目录。
prometheus之relabel详解
weixin_46837396的博客
04-03 3164
一、relabel简介 为了更好的识别监控指标，便于后期调用数据绘图、告警等需求，prometheus支持对发现的目标进行label修改，可以在目标被抓取之前动态重写目标的标签集。每个抓取配置可以配置多个重新标记步骤。它们按照它们在配置文件中出现的顺序应用于每个目标的标签集。 除了配置的每个目标标签之外，prometheus还会自动添加几个标签： job标签：设置为job_name相应的抓取配置的值。 instance标签：__address__设置为目标的地址:。重新标记后，如果在重新标记期间未设置标签
Git 开发日常
howeres的博客
07-25 973
Tips：重心放在本地。除了 git push，其他常用命令不会对远程仓库造成破坏性影响。
prometheus使用 (十九) 标签重写
默子昂
04-21 5516
在prometheus的target实例中都包含一些Metadata标签信息，如下 #当prometheus加载target实例后，会有一些默认的标签 #以下标签都会声明prometheus该如何从target实例中获取指标 __address__ #当前Target实例的访问地址<host>:<port> __scheme__ #采集目标服务访问地址的HTTP Scheme，HTTP或者HTTPS __metrics_path__ .
Flex 最全的换行 制表符 回车 空格 特殊符号
帆软爱好者的专栏
04-02 2565
<br />出自：http://www.myflexhero.com/share/flex-hero-flex4/flex-hero-coding-techniques/<br />字符 十进制字符编号 实体名字 说明<br />— — 未使用Unused<br />— &#01; — 未使用Unused<br />—  — 未使用Unused<br />—  — 未使用Unused<br />—  — 未使用Unused<br />—  — 未使用Unu
Prometheus源码学习(6) labels
qq_35753140的博客
04-22 1171
github.com/prometheus/prometheus/pkg/labels 时间序列由一组 Label 唯一标识。labels包中是对 Label 和 Labels 对象的定义和方法。还有一个构建 Labels 的 Builder 对象。 一个标签(Label)就是一个字符串键值对 // Label is a key/value pair of strings. type Label struct { Name, Value string Labels 是 Label 的有序列表，实现了 s
prometheus告警规则设置（二）
天码行空的码的博客
11-17 2468
告警规则的设置是通过yml文件来设置，因此需要遵从yml的语法 groups: -name:example#报警规则组的名字 rules: -alert:InstanceDown#检测job的状态，持续1分钟metrices不能访问会发给altermanager进行报警 expr:up==0 for:1m#持续时间，表示持续一分钟获取不到信息，则触发报警 labels: serverity:page#自定义...
html---br换行符
niu1024的博客
03-28 2522
html—br换行符 < br > <p>this<br>type</p> 输出： this type < br >的作用是换行，这样可以少一行p方法。 < br/ > <p>this<br/>type</p> 输出： this type < br/ >的作用是换行，...
prometheus的label丢失问题
u012967160的博客
12-14 917
排查prometheus使用过程中，不同的容器镜像，metric的label缺失的问题
eclipse javaee怎么运行html
03-16
在Eclipse JavaEE中运行HTML文件，可以按照以下步骤操作： 1. 在Eclipse中创建一个Web项目。 2. 在项目中创建一个HTML文件。 3. 右键单击HTML文件，选择“Run As” -> “Run on Server”。 4. 选择一个服务器，如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值