前端HTML

最新推荐文章于 2024-10-03 20:14:40 发布

漂泊老猫

最新推荐文章于 2024-10-03 20:14:40 发布

阅读量121

点赞数

分类专栏： Java后端文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_44799103/article/details/128522115

版权

Java后端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

初识HTML

HTML（Hyper Text Markup Language）超文本标记语言
超文本包括：文字、图片、音频、视频、动画等

HTML5的优势

世界知名浏览器厂商对HTML5的支持
微软、苹果、谷歌、Opera、Mozilla
市场的需求
跨平台

W3C标准

World Wide Web Consortium（万维网联盟）
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
W3C标准包括结构化标准语言（HTML/XML）、表现标准语言（CSS）、行为标准（DOM、ECMAScript）

网页基本标签

、等成对的标签，分别叫做开放标签和闭合标签，单独呈现的标签（空元素），如

;意为用/来关闭空元素 - 标题标签 - 段落标签 - 换行标签 - 水平线标签 - 字体样式标签 - 注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>可惜在遇见我那天你并不快乐，可能是因为我们相遇的太晚了</p>
<p>可是我要走了 可温暖要走了，可否有另一个我在你身后给予快乐</p>
<p>可当我牵着你的手傻乎乎的乐，渴望的爱情终于在我生命出现了</p>
<p>可时间倒数了 ，可你的答案停住了</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
可想到你的脸我还是很快乐，可能你不快乐 ，可惜你不快乐<br/>
可能是我的爱情它来的太晚了，可它给了你些什么， 你是不是真快乐<br/>
可要听我的话别再为它犯傻了，可能你不快乐 ，可我要你快乐<br/>
可能是我的爱情它来的太晚了，可我只想对你说 ，我绝对不退出了<br/>
<!--粗体， 斜体-->
<h1>字体样式标签</h1>
粗体： <strong>i love you</strong>
斜体： <em>i love you</em>
<br/>
<!--特殊符号-->
空      格：
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
<br/>
&gt;
<br/>
&lt;
&copy;版权所有老猫
<!--
特殊符号记忆方式
&  ；
查百度
-->
</body>
</html>

图像，超链接，网页布局

图像标签

常见的图片格式：JPG GIF PNG BMP（位图）

<img src="path" alt="text" title="text" width="x" height="y" />
<!-- 图像地址 图像的替代文字  鼠标悬停提示文字 图像宽度  图像高度-->
<img src="../resources/image/1.jpg" alt="加菲猫" title="加菲猫" width="500" height="300" />

链接标签

<a href="path" target="目标窗口位置">链接文本或图像<a/>
<!--链接路径  链接在那个窗口打开【常用值：_self/_blank】-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>

<!--a标签
href : 必填， 表示要跳转到哪个页面
target :
-->
<a href="3.%20图像标签.html" target="_blank">点击我跳转页面</a>
<a href="https://www.baidu.com" target="_self">跳转到百度</a>

<br>
<p>
    <a href="3.%20图像标签.html">
        <img src="../resources/image/1.jpg" alt="加菲猫" title="加菲猫" width="500" height="300" />
    </a>
</p>

<p>
    <a href="3.%20图像标签.html">
        <img src="../resources/image/1.jpg" alt="加菲猫" title="加菲猫" width="500" height="300" />
    </a>
</p>

<p>
    <a href="3.%20图像标签.html">
        <img src="../resources/image/1.jpg" alt="加菲猫" title="加菲猫" width="500" height="300" />
    </a>
</p>

<p>
    <a href="3.%20图像标签.html">
        <img src="../resources/image/1.jpg" alt="加菲猫" title="加菲猫" width="500" height="300" />
    </a>
</p>

<p>
    <a href="3.%20图像标签.html">
        <img src="../resources/image/1.jpg" alt="加菲猫" title="加菲猫" width="500" height="300" />
    </a>
</p>

<p>
    <a href="3.%20图像标签.html">
        <img src="../resources/image/1.jpg" alt="加菲猫" title="加菲猫" width="500" height="300" />
    </a>
</p>

<p>
    <a href="3.%20图像标签.html">
        <img src="../resources/image/1.jpg" alt="加菲猫" title="加菲猫" width="500" height="300" />
    </a>
</p>

<p>
    <a href="3.%20图像标签.html">
        <img src="../resources/image/1.jpg" alt="加菲猫" title="加菲猫" width="500" height="300" />
    </a>
</p>



<!--锚链接【页面间跳转】
1. 需要一个锚标记
2. 跳转到标记

-->

<a href="#top">回到顶部</a>
<a name="down">down</a>

<!--功能性链接
邮件链接 ： mailto:
-->

<a href="mailto:XXX@qq.com">点击联系我</a>
</body>
</html>

行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- （p、h1~h6…）
行内元素
- 内容撑开宽度，左右都是行内元素的可以在排在一行
- （a、strong、em…）

列表，表格，媒体元素

列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

列表分类

无序列表
有序列表
定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答 。。。
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>

<hr/>
<!--无序列表
应用范围：导航栏，侧边栏。。。
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<!--自定义列表
dl: 标签
dt：列表名称
dd: 列表内容
应用范围：公司网站底部
-->
<dl>
    <dt>语言</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C/C++</dd>
    <dt>城市</dt>
    <dd>太原</dd>
    <dd>天津</dd>
    <dd>武汉</dd>
    <dd>南京</dd>
</dl>
</body>
</html>

表格

为什么使用表格【简单通用，结构稳定】
基本结构【单元格、行、列、跨行、跨列】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格 table
行 tr  rows
列 td
-->
<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>
</body>
</html>

视频和音频

视频元素
音频元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src 资源路径
controls 控制条
autoplay 自动播放-->
<video src="../resources/video/bee.mp4" controls autoplay></video>
<audio src="../resources/audio/程响%20-%20世界这么大还是遇见你.mp3" controls autoplay></audio>
</body>
</html>

页面结构分析

在这里插入图片描述

<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页底部</h2></footer>

iframe 内联框架

嵌入代码

<iframe src="path" name="mainFrame"></iframe>
引用页面地址  框架标识名
<iframe src="3.%20图像标签.html" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

表单及表单应用

表单

表单语法

<form method="post" action="result.html">
	<p> 名字：<input name="name" type="text"> </p>
	<p> 密码：<input name="pass" type="password"> </p>
	<p>
		<input type="submit" name="Button" value="提交"/>
		<input type="reset" name="Reset" value="重填">
	</p>
</form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<!--表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post , get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
    post方式提交： 比较安全，传输大文件。
-->

<form action="3.%20图像标签.html" method="post">
    <!--  文本输入框：input type="text"  -->
    <p>名字： <input type="text" name="username"> </p>
    <p>密码： <input type="password" name="pwd"> </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>
</body>
</html>

在这里插入图片描述

单选框

<!--单选框标签
input type = "radio"
value : 单选框的值
name : 表示组  一个组中勾选一个
-->
<p>
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
</p>

多选框

<!--多选框
input type="checkbox"
-->
<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>

按钮

<!--按钮
    input type="button" 普通按钮
    input type="image"  图像按钮
    input type="submit" 提交按钮
    input type="reset"  重置按钮
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击">
        <input type="image" src="../resources/image/1.jpg">
    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

下拉框，列表框

<p>下拉框
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="England">英国</option>
            <option value="France" selected>法国</option>
        </select>
    </p>

文本域

<p>反馈：
	<textarea name="textarea" 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="num" max="100" min="0" step="10">
    </p>
    <!--滑块-->
    <p>滑块
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>
    <!--  搜索框  -->
    <p>
        <input type="search" name="search">
    </p>

表单应用

参数设置 readonly只读标签
disabled 禁用标签
hidden 隐藏

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

表单初级验证

常用方式：

placeholder 提示信息【请输入用户名】
required 不能为空必填项
pattern 正则表达式

<p>自定义邮箱：
	<input type="text" name="diyemail" patten="	\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>

搜索常用正则表达式
https://www.jb51.net/tools/regex.htm