JAVA初学05

标签

网页基本标签

<h>标题标签</h>
    <p>段落标签</p>
    <hr/>分隔符
    <br>换行符
    <strong>文字加粗</strong>
    <em>文字倾斜</em>

图像标签

<img src="" alt="图片加载失败显示的文本">

超链接标签

<!--href:链接地址
    target:链接打开方式,
        _blank:新窗口打开
        _self:当前窗口打开
-->
<a href="1.我的第一个网页.html">跳转到这个网页</a>

如何设置一个返回顶部的标签

1.首先在顶部设置一个锚标记

<a name="top">顶部</a>

2.然后设置一个回到顶部的标签

<!--锚链接
1.需要一个锚标记
2.跳转到标记
3.用# + 顶部的文字来跳转
-->
<a href="#top">回到顶部</a>

列表标签

<!--有序列表：
应用范围：试卷，问答
-->
<ol>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
  <li>列表4</li>
</ol>
<hr/>
<!--无序列表
应用范围：导航、侧边栏
-->
<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd:列表内容
-->
<dl>
  <dt>自定义标题</dt>
  <dd>内容</dd>
</dl>

表格标签

<table border="2">
  <tr >
    <td colspan="1">姓名</td>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
  </tr>
  <tr>
    <td>L</td>
    <td>20</td>
    <td>15</td>
    <td>10</td>
  <tr>
    <td>Y</td>
    <td>20</td>
    <td>15</td>
    <td>10</td>
  </tr>
  <tr>
    <td>P</td>
    <td>20</td>
    <td>15</td>
    <td>10</td>
  </tr>


</table>

效果如下

媒体元素

创建一个resources包来存放资源

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

页面结构分析

<header>
  <h2>网页头部</h2>
</header>

<section>
  <h2>网页主体</h2>
</section>


<footer>
  <h2>网页底部</h2>
</footer>

内联框架

<!--iframe内联框架
src：地址
w-h：宽度高度-->
<iframe src="" name="hello" style="border: none"></iframe>
<!--通过下面这个来进行跳转
target:链接打开方式,
        _blank:新窗口打开
        _self:当前窗口打开
-->
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>

表单语法

<h1>注册</h1>
<!--form表单
    action：表单提交的位置，可以是网站，也可以是一个请求处理地址
    method：post，get提交方法
        get方式提交： 我们可以在url中看到我们的提交信息，不安全，高效
        post:比较安全，传输大型文件
-->
<form action="1.我的第一个网页.html" method="post">
    <!--文本输入框：input type="text"
    value：默认初始值
    maxlength：最长能写几个字符
    size：文本框的长度
    readonly：只读
    disabled：禁用
    hidden：隐藏域
    placeholder：提示信息
    required：必填
    pattern：正则表达式
    -->
    <p>名字：<input type="text" name="username" placeholder="请输入名字"></p>
    <p>密码：<input type="password" name="password" placeholder="请输入密码"></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"
    value:多选框的值
    name:表示组
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--按钮
    button:普通按钮
    image：图片按钮
    submit：提交按钮
    reset：重置按钮
    -->
    <p>
        <input type="button" name="btn1" value="点击">
        <input type="image" src="">
    </p>


    <!--下拉框，列表框
    selected:在后面直接加，默认值
    -->
    <p>下拉框：
        <select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai" selected>上海</option>
            <option value="shenzhen">深圳</option>
        </select>
    </p>

    <!--文本域-->
    <p>文本域
        <textarea name="content" cols="30" rows="10">文本内容</textarea>
    </p>

    <!--文件域-->
    <p>文件
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!--邮件验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>

    <!--URL验证-->
    <p>url：
        <input type="url" name="url">
    </p>

    <!--数字验证-->
    <p>数字：
        <input type="number" name="number" max="1000" min="10" step="10">
    </p>

    <!--滑块验证-->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>