首页 前端知识 java-HTML

java-HTML

2024-04-23 21:04:23 前端知识 前端哥 969 423 我要收藏

1 简介

Hyper Text Markup Language(HTML)
超文本标记语言

2 使用IDEA编写HTML

新建html项目,新建文件夹,新建html文件。
在这里插入图片描述

3 HTML基本语法

3.1 注释

以<!- - 开始
以- ->结尾

<!--    zhushi        -->

3.2 DOCTYPE

告诉浏览器该使用什么规范

3.3 META

meta标签描述了网页的相关信息

3.4 标签开始与结束

原标签加/ 表示闭合

<h1>   </h1>

3.5 HTML代码补全

敲好标签,然后按tab键,补全开始标签与结束标签

4 标签大全

  1. <h1>
  2. <p> 段落标签
  3. <br/> 换行标签(单标签、自闭合标签,仍是一段话)
  4. <hr/> 水平线标签
  5. <strong> 粗体标签
  6. <em> 斜体标签
  7. &nbsp; 空格
  8. &gt 大于号
  9. &lt 小于号
  10. &copy 版权符号
  11. <img src="’ alt=“替代文字” title=“悬停文字”>
  12. <a href=“” target=“”> 文字</a> target表示在哪里打开,新标签页或当前标签页 <a>标签还有功能性链接,比如打开邮箱等(自行百度搜索)
  13. <ol> <li>1</li><li>2</li></ol> 有序列表-order-list
  14. <ul> <li>1</li><li>2</li></ul> 无序列表-unorder-list
  15. <video> 视频标签,设置controls属性可以播放
  16. <audio> 音频标签,也可以设置autoplay设置自动播放

4.1 自定义标签

<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C</dd>
    <dd>php</dd>
    <dt>位置</dt>
    <dd>111</dd>
    <dd>222</dd>
    <dd>333</dd>
</dl>

在这里插入图片描述

4.2 表格标签

<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

单元格跨列使用单元格标签的colspan属性指定跨的列数

<table border="1px">
    <tr>
        <td colspan="3">1-1</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

跨行使用单元格标签的rowspan属性指定要跨的行数

<table border="1px">
    <tr>
        <td colspan="3">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>

4.3 iframe内联标签

<iframe src="https://www.bilibili.com/" width="1000px" height="800px"></iframe>

4.3.1 通过a标签改变iframe

本来iframe无连接,点击a标签后,a标签将连接送到iframe中,此时iframe显示连接网页

<iframe name="txt" src="" width="1000px" height="800px"></iframe>
<a href="https://www.bilibili.com" target="txt">点击跳转</a>

4.4 form表单

在页面上点击提交按钮的画,页面会跳转的Second.html上,即action属性知名响应对象

<form action="Second.html" method="get">
    <p>名字:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="pwd"></p>
    <p>
       <input type="submit">
        <input type="reset">
    </p>
</form>

4.4.1 Get与post的区别

GET
提交后,网址中会看到提交的信息
在这里插入图片描述
POST
看不到提交的信息,这种方式较为安全,适用于传输大文件
在这里插入图片描述
但浏览器同样可以获取到POST传输的信息(自行百度)

4.5 form表单中的属性

<input>标签可设置maxlength设置最长长度
<input type=“radio” value=" " name=" “/>使用name指定组名,实现单选
<input type=“checkbox” value=” " name=" “/>使用name指定组名
<input type=“image” src=” ">图片就是按钮
下拉框

<select name="列表名称">
    <option value="cn">中国</option>
    <option value="us">美国</option>
    <option value="jp">日本</option>
</select>

<textarea>文本域标签
<input type=“file” name=“files”>文件域标签
<input type=“email” name=“email”> 邮箱验证
<input type=“url” name=“url”>
<input type=“number” name=“num” max=“100” min=“0” step=“1”>
<input type=“range” name=“voice” min=“0” max=“100” step=“2”>滑块

4.6 表单应用

隐藏域 hidden
只读 readonly
禁用 disable

5 表单验证

作用:在前端将不合法的数据过滤一次

5.1 placeholder

placeholder:输入框中提示信息

<p>名字:<input type="text" name="username" placeholder="请输入名字"></p>

在这里插入图片描述

5.2 required

要求必须输入

<p>密码:<input type="password" name="pwd" required></p>

5.3 pattern

正则表达式判断

<input type="text" name="diymail" pattern="^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$">
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5840.html
标签
评论
发布的文章

【Java】JSONArray详解

2024-04-30 12:04:14

Unity——LitJSON的安装

2024-04-30 12:04:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!