HTML

最新推荐文章于 2021-06-03 05:24:49 发布
最新推荐文章于 2021-06-03 05:24:49 发布
阅读量132 收藏
点赞数
分类专栏： HTML JAVA
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taraex/article/details/91897364
版权
JAVA 同时被 2 个专栏收录
23 篇文章 4 订阅
订阅专栏
HTML
4 篇文章 0 订阅
订阅专栏

HTML

什么是HTML？

超文本标记语言 ( Hyper Text Markup Language )
超文本 : 文字 , 图片 , 音频 , 视频 , 动画 ,…

优势

  • 所有的浏览器都支持
  • 市场的需求—从C/S—>b/s架构
  • 跨平台

W3C标准

  • 万维网联盟( World Wide Web Consortium )

  • 三个标准

  • 结构化标准—>HTML , xml等

  • 表现标准—>CSS

  • 行为标准 —> ( ECMA Script )

HTML基本结构

注释
< ！- -注释内容- ->
基本结构

<!--声明 : 告诉浏览器使用什么规范-->
<!DOCTYPE html>

<html lang="en">
<!--标签是成对出现-->
<!--头部标签-->
<head>
    <meta charset="UTF-8">
    <!--网页标题-->
    <title>HTML</title>
</head>

<!--网页主体-->
<body>

Hello,World!

</body>


</html>
标题 关键字标签 

<!--网页编码-->
<meta charset="UTF-8">
gb2312 ----> 包含全部的中文字符
utf-8 ---->包含了全世界所有地方的文字和符号

<!--搜索关键字-->
<meta name="keywords" content="HTML,Java,Python,linux,大数据">
<!--网页的描述-->
<meta name="description" content="666!">

HTML基本标签

<!DOCTYPE html>
<!--声明-->
<html lang="en">

<!--注释-->
<!--标签成对出现-->
<!--头部标签 Title-->
<!--body 网页主体-->

<head>
    <meta charset="UTF-8">
    <title>然哥的JAVA</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标签</h3>
<!--h1最大，h6最小-->

<!--段落标签-->
<!--p表示-->
<p>上的看撒大苏打撒旦撒旦我</p>
<p>我打算打算大苏打</p>

<!--换行标签-->
<!--br  单标签-->
我和我hi第三撒大苏打<br/>
实打实大苏打实打实

<!--水平线标签-->
<!--hr-->
<hr>
i love you <br>
i miss you hqy <br>



<!--加粗-->
<!--strong-->
<!--斜体-->
<!--em-->
<strong>i love you</strong> <br>//加粗
<em>i love you</em> <br>  //斜体

<!--特殊符号-->
<!--大于号 &gt-->
<!--小于号 &lt-->
<!--空格 &nbsp-->
<!--引号 &quot-->
<!--版权符号 &copy-->
<p>大于号 &gt;</p>
<p>小于号 &lt;</p>
<p>我&nbsp;&nbsp;&nbsp;爱&nbsp;&nbsp;你</p>
<p>&quot;共公共&quot;</p>
<p>&copy;然哥所有</p>
Hello,World!
</body>
</html>

链接标签

超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!-- a 表示超链接-->
<!--href 表示连接的地址-->
<a href="图像标签.html"> <img src="../resources/images/view.png"></a>




<!--锚链接-->

<!--可以从一个地方跳到锚指定的地方
需要的东西: 标记   ..跳转 -->
<a href=""></a>
<a name=""></a>


<!--功能性链接-->
<a href="mailto：342537376@qq.com">发送邮件</a>

</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--src  图片路径-->
<!--title 图片名字-->
<!--alt 鼠标悬停显示-->
<!--
相对路径    上一级路径表示  ../加上相对路径
绝对路径  不建议使用
-->
<img src="../resources/images/view.png" title="美景" alt="cool" width="300px" height="300px">
</body>
</html>

target 目标跳转的网页打开方式
_blank : 打开新的网页
_self : 在本网页打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    <a target="_blank" href="第一个网页.html">打开新的</a>
    <a target="_self" href="第一个网页.html">本网页</a>
</p>

</body>
</html>

行内元素和块元素

独占一行的标签 : 块标签

  • p
  • h1~h6

只有自己那一部分 , 可以在行内定义多个的标签 : 行内标签

  • a
  • strong
  • img
  • em

开放标签—>闭合标签

<p>  </p> 
<p>  </p> 
<p>  </p> 
<p>  </p>

自闭合标签
<br/>

列表

<!--无序列表-->
<!--
<ul> -> 无序列表
<li> -> 选项
-->
<h1>无序列表</h1>
<ul>
    <li>java</li>
    <li>C/C++</li>
    <li>Linux</li>
    <li>Python</li>
</ul>

<!--有序列表-->
<!--
<ol> -> 有序列表
<li> -> 选项
-->
<h1>有序列表</h1>
<ol>
    <li>java</li>
    <li>C/C++</li>
    <li>Linux</li>
    <li>Python</li>
</ol>

<!--自定义列表-->
<!--
<dl> -> 自定义列表
<dt> -> 列表标题
<dd> -> 列表选项
-->
<h1>自定义列表</h1>

<dl>
    <dt>Java</dt>
    <dd>OOP</dd>
    <dd>Annotation</dd>
    <dd>Reflection</dd>

    <dt>Python</dt>
    <dd>数据分析</dd
    <dd>数据挖掘</dd>
    <dd>...</dd>
</dl>

样式：
在这里插入图片描述

表格

表格结构

  • 单元格
  • 行
  • 列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表格-->
<!--
table : 表格
tr : 行 table rows
td : 列
-->
<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
</table>
<video>

</video>

</body>
</html>

跨行

1-1

视频/音频

音频
audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<audio src="../resources/audio/许巍%20-%20蓝莲花.mp3"  controls></audio>
</body>
</html>

视频
video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频</title>
</head>
<body>
<video src="../resources/video/master-1080p-signaled.mp4" controls></video>

</body>
</html>

网页结构

<header> 头部 </header>
<footer> 尾部 </footer>
<nav> 导航 </nav>
<article> 放文章 </article>
<code> 代码 </code>
<section>独立区域</section>
.......

内联框架

就是在一个网页里嵌入另一个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="https://www.baidu.com" frameborder="0" width="500" height="300"></iframe>

</body>
</html>

在这里插入图片描述

表单元素

登录，注册
常见表单元素
文本框 密码框 按钮 单选框 多选框 文本域 下拉框 文件域
邮箱 网址 数字 滑块 搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<!--form 表单元素-->
<!--action  提交地址-->
<!--提交方式  post/get-->
<!--name 可以重复-->
<!--id  不能重复-->
<!--disabled  文本框不可用-->
<!--post 安全   能提交无限大的文件   -->
<!--get  不安全 但效率高   一次请求的文件量特别小-->
<form action="第一个网页.html" method="get">
    <p>用户名：<input type="text" name="username" placeholder="请输入" ></p>
    <p>密码 ：<input type="password" name="password" ></p>

<!--提交会产生事件，会将表单的内容提交到action请求的地址-->
<!--submit 默认文字是提交  想要手动 用value赋值-->



    <p>
        <input type="button" value="第一个按钮">


    </p>

    <p>
        <input type="file">
    </p>

    <p>
<!--radio 单选        -->
        <input type="radio"   value="男" name="group">男
        <input type="radio"   value="女" name="group">女
    </p>


    <p>
        <input type="checkbox" value="game" name="hobby">打游戏
        <input type="checkbox" value="run" name="hobby">跑步
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="homework" name="hobby">做作业

    </p>

    <p>
        <input type="submit">
        <input type="submit" name="Button" value="Go">
    </p>

    <hr/>

<!--下拉框  select -->
    <select name="列表名称" id="">
        <option value="10">10</option>
        <option value="100">100</option>
        <option value="1000">1000</option>
    </select>
</form>
</body>
</html>

样式：
在这里插入图片描述
hidden : 隐藏域
readonly : 只读
disabled : 禁用

提示信息 在文本框里显示 非空判断：若想要某一项必填，可使用 正则表达式验证
taraex
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html实现简单非空验证和登录验证
weixin_66489187的博客
10-27 2458
实现简单非空验证和登录验证
JS前台遍历所有文本框，验证是否为空
u013324517的专栏
05-06 2812
“辅助检查”是
html如何判断文本框是否为空,javascript怎么判断文本框是否为空？
weixin_33844346的博客
06-03 4728
javascript判断文本框是否为空的方法：1、使用length方法判断文本框长度是否为0来判断文本框是否为空。2、使用.value==""的方法判断文本框是否为空。方法1：使用length方法使用length方法判断文本框长度是否为0来判断文本框是否为空。示例：//用户名非空验证function checkUserName() {var name = document.myform.txtUs...
html之input 的非空验证
milijiangjun的博客
09-25 2万+
if (Username == "" || Username.value == null ) { alert("请输入内容"); } 在这里可以通过input的id var Username = document.getElementById("UserName").value; 获取，然后判断是否为空 整体实现代码的方法如...
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
网上订餐系统模板html源码
06-11
网上订餐系统模板HTML源码是一个用于构建在线订餐平台的前端资源，它包含了实现基本功能所需的HTML文件。由于描述中提到该源码是静态的，这意味着它不包含任何服务器端代码或与数据库的交互，因此它主要用于展示界面...
纯HTML网页源码
11-02
HTML，全称HyperText Markup Language，即超文本标记语言，是构建互联网页面的基础。它是一种标记语言，通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码，不依赖其他如JavaScript、CSS...
爱心代码 李峋同款爱心等免费下载 exe、py、html格式
最新发布
11-12
【标题】"爱心代码 李峋同款爱心等免费下载 exe、py、html格式" 提供了一组与编程相关的资源，这些资源包含了不同格式的爱心图案实现，包括可执行文件（exe）、Python脚本（py）以及HTML页面（html）。这暗示我们...
HTML表单校验非空的两种方式
liwei131421的博客
04-11 3393
HTML表单校验非空的两种方式第一种方式第二种方式实例：校验表单中姓名为非空 第一种方式 let reg = /\S/; 第二种方式 let reg_name = /^\w+$/; 实例：校验表单中姓名为非空 该代码用于验证表单中姓名是否为空，当用户名为空时，边框显示为红色！ //验证姓名 function checkName(){ //获取姓名 let name = $...
HTML中的文本框的null和“”的区别
荷塘月色
10-15 2786
HTML表单验证是你是如何判空的？null还是“”（空字符串）？让我们一起来看看到底要用啥来判空。
JS前台页面验证文本框非空
weixin_30312659的博客
11-12 425
效果图： 代码： 源代码： <script type="text/javascript"> function check(){ var xm = document.getElementById("xm").value; if(xm == null || xm == ''){ alert("用户名不能为空"); ret...
html5实现 input必须为手机号且非空的验证方法
陌子曦的专栏
05-03 3万+
IE function checkMobile(str) { if(str==""){ alert("手机号不能为空！"); } else{ var re = /^1\d{10}$/ 以1开始后面加10位数字 if (re.test(str)) {
html input输入验证不为空
weixin_34250709的博客
11-15 1万+
html5的话使用required即可，比较简单。但是ie10以下的浏览器没有required特性。所以就要靠其他方式来对用户输入做验证。下面是利用js的方法： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <scripttype="text/Jav...
input输入框非空验证
yijiupingfan0914的博客
04-18 1万+
&lt;script type="text/javascript"&gt; //用户名非空验证 function checkUserName(){ var name = document.myform.txtUser; //在这里我认为： name 代表的name 为 txtUser 的文本框 if(name.value.length==0){ ...
Java中的Map及其使用
热门推荐
taraex的博客
05-15 17万+
Map Map集合概述和特点 概述： 将键映射到值的对象 一个映射不能包含重复的键 每个键最多只能映射到一个值 Map接口和Collection接口的不同 Map是双列的,Collection是单列的 Map的键唯一,Collection的子体系Set是唯一的 Map集合的数据结构针对键有效，跟值无关;Collection集合的数据结构是针对元素有效 Map集合的功能概述 a:添加功能 V put...
HTML基础知识详解
"HTML知识点汇总" HTML（HyperText Markup Language）是一种标记语言，用于构建和组织网页的结构。它是Web开发的基础，允许开发者通过各种标签来指定网页内容的样式和布局。以下是对HTML部分核心知识点的详细说明：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值