java-HTML-CSDN博客

本文链接：https://blog.csdn.net/qq_41335332/article/details/136674163

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 标签大全

<h1>
<p> 段落标签
<br/> 换行标签（单标签、自闭合标签，仍是一段话）
<hr/> 水平线标签
<strong> 粗体标签
<em> 斜体标签
  空格
&gt 大于号
&lt 小于号
&copy 版权符号
<img src="’ alt=“替代文字” title=“悬停文字”>
<a href=“” target=“”> 文字</a> target表示在哪里打开，新标签页或当前标签页 <a>标签还有功能性链接，比如打开邮箱等（自行百度搜索）
<ol> <li>1</li><li>2</li></ol> 有序列表-order-list
<ul> <li>1</li><li>2</li></ul> 无序列表-unorder-list
<video> 视频标签，设置controls属性可以播放
<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+)*$">