526互联

HTML

发布时间 2023-09-20 20:08:12作者: wolaile1

HTML

初始HTML

  • HTML

    • Hyper Text Markup Language（超文本标记语言）

      • 超文本包括：文字、图片、音频、视频、动画等
      </head>
<body>
    <h3>hello HTML</h3>
    <img src="../1.jpg"/>
    <hr/>
    <video src="../v.swf"></video>
<body>
</html>

  • HTML发展史

    image-20230705101214606

  • 第一个示例文件

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!--meta描述性标签，它用来描述网站得一些信息-->
    <!--meta一般用来作SEO(SEO就是指按照搜索引擎的算法，提升你的文章在搜索引擎中的自然排名)-->
    <meta charset="UTF-8">
    <meta name="keywords" content="yuan学java">
    <meta name="description" content="yuan在图书馆学习Java">

    <!-- title网页标题   -->
    <title>"我的第一个html网页"</title>
</head>

<!-- body标签代表网页头部 -->
<body>
Hello World !!!
</body>
</html>

运行结果：

image-20230705104150113

标签

网页基本标签

  • 标题标签

    <!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>>

</body>
</html>

    运行结果：

    image-20230705104622910

  • 段落标签

  • 换行标签

  • 水平线标签

  • 字体样式标签

  • 注释和特殊符号

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--段落标签-->
<h1>段落标签</h1>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有耳朵，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>

<!--水平标签-->
<h1>水平标签</h1>
<hr/>
<!--换行标签-->
<h1>换行标签</h1>
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>
两只老虎，两只老<br/>
跑得快，跑得快，<br/>
一只没有耳朵，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

<!--粗体， 斜体-->
<h1>字体样式标签</h1>

粗体:<strong> I love you</strong>
斜体: <em>I love you</em>

<!--特殊符号-->
<br/>
空   格:<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
</body>
</html>

图像标签

  • 常见得图像格式

    • JPG

    • GIF

    • PNG

    • BMP

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src ：图片地址
        相对路径， 绝对路径
        ../ --上一级目录
alt : 图片名字
-->
<img src="./resources/imge/img.png" alt="一张截图" title="悬停文字" width="300" height="300">

</body>
</html>

链接标签

  • 超链接
  • 锚链接
  • 功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<a name="top">顶部</a>
<!--a标签
href  : 必填， 表示要跳转到哪个页面
target ： 表示窗口在哪里打开
        _blank 在新标签中打开
        ——self 在自己得网页中打开
-->
<a href="我的第一个html网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com">点击我跳转到百度</a>
<br/>

<!--图像超链接-->
<a href="我的第一个html网页.html" target="_blank">
    <img src="resources/imge/img.png" alt="一张截图" title="悬停文字" width="300" height="300">
</a>
<p><a href="我的第一个html网页.html" target="_blank">
    <img src="resources/imge/img.png" alt="一张截图" title="悬停文字" width="300" height="300">
</a></p>
<p><a href="我的第一个html网页.html" target="_blank">
    <img src="resources/imge/img.png" alt="一张截图" title="悬停文字" width="300" height="300">
</a></p>

<!--中部-->
<a name="mid">中部</a>

<p><a href="我的第一个html网页.html" target="_blank">
    <img src="resources/imge/img.png" alt="一张截图" title="悬停文字" width="300" height="300">
</a></p>
<p><a href="我的第一个html网页.html" target="_blank">
    <img src="resources/imge/img.png" alt="一张截图" title="悬停文字" width="300" height="300">
</a></p>

<!--锚链接
1.需要一个锚链接
2.跳转到标记
-->
<a href="">回到顶部</a>

<!--通过#加链接名字name，可以跳转回到本页面的链接名字所在位置-->
<a href="#top">回到top</a>
<br/>
<a href="#mid">回到中部</a>

<br/>
<!--功能性链接
 邮件链接 : mailto
 qq链接
 -->
<a href="mailto:23736@qq.com">点击联系我</a>
<a href='tencent://message/?uin=QQ号码'>加我扣扣</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>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>
    <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
列 td
-->

<table border="lpx">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>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>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
</table>

<br/>
<hr/>
<table border="lpx">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="4">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>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
    </tr>
</table>
</body>
</html>
image-20230705134644395

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

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

<audio src="./resources/audio/暗号%20-%20周杰伦.mp3" controls autoplay></audio>
</video>
</body>
</html>

页面结构分析

元素名 描述
header 标题头部的内容（用于页面或页面中的一块区域）
footer 标记脚部的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
artice 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容

if内联框架

  • 在一个网站内嵌套（可以打开）另一个网站

表单

初始表单post和get提交

  • 表单语法
    • 表单元素_笑笑师弟的博客-CSDN博客
    • web前端开发之HTMl表单-云社区-华为云
<!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="我的第一个html网页.html" method="post">
    <!--文本输入框: input type="text"-->
    <p>名字: <input type="text" name="username"></p>
    <!--密码框: input type="text"-->
    <p>密码: <input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

表单的初级验证

  • placeholder 提示信息
  • required 非空判断
  • pattern 正则表达式

拓展

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