HTML简单概述及常用标签解析

最新推荐文章于 2024-06-12 22:18:50 发布

向日葵向日

最新推荐文章于 2024-06-12 22:18:50 发布

阅读量515

点赞数

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

本文链接：https://blog.csdn.net/qq_43036356/article/details/130692015

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

什么是HTML

HTML用来描述网页的一种语言

HTML – hyper text markup language 超文本标记语言
超文本包括：文字、图片、音频、视频、动画等等
标记语言：是一套标记标签，HTML使用标记标签来描述网页

HTML发展史

(C:/Users/MiQiLin/AppData/Roaming/Typora/typora-user-images/image-20230515152059987.png)]

HTML5 提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则.

这些元素, 特性和规则的建立, 提供了许多新的网页功能. 如使用网页实现动态渲染图形，图表，图像和动画、以及不需要安装任何插件直接使用网页播放视频等。

HTML优势

浏览器厂商的支持
- Microsoft
- edge
- Google
- chrome
- Opera
- Mozila
时长的需求
跨平台

W3C

World Wide Web Consortium – 万维网联盟
- 成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构
- W3C官网
- W3C中国
W3C标准包括
- 结构化标准语义（HTML XML）
- 表现标准语义（CSS）
- 行为标准（DOM，ECMAScript）

HTML基本结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6rZf63qj-1684153333627)(C:/Users/MiQiLin/AppData/Roaming/Typora/typora-user-images/image-20230515163334674.png)]

示例：

<!DOCTYPE html>
<html>
	<head>
		<title>第一个网站</title>
		<meta charset="UTF-8"><!-- 定义网页的编码格式为中文utf-8-->
	</head>
	<body>
        <h1>第一个HTML页面</h1>
	</body>
</html>

HTML标签

标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cR2T57d5-1684153333627)(D:/%E8%AF%BE%E4%BB%B6/%E7%AC%94%E8%AE%B0/web%E5%AE%89%E5%85%A8/img/image-20230515164809704.png)]

HTML标签可以设置属性
属性可以在元素中添加附加信息
属性总是以名称/值对的形式出现，比如：name=“value"
属性值应该始终被包括在引号内

链接标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-69hepgPu-1684153333628)(D:/%E8%AF%BE%E4%BB%B6/%E7%AC%94%E8%AE%B0/web%E5%AE%89%E5%85%A8/img/image-20230515165759819.png)]

<!DOCTYPE html>
<html>
  <head>
      <title>HTML基础标签</title>
      </head>
  <body>
      <!--a标签
      href属性表示要跳转到哪个地址
      -->
      <a href="https://www.baidu.com">
      <img src="./image/222.jpg" alt="跳转" />
      </a>
    	<br>
    	<a href="https://www.baidu.com">百度一下</a>
  </body>
</html>

块元素和行内元素

块元素
- 无论内容多少，钙元素独占一行，例如：p，h1等
行内元素
- 内容撑开宽度，左右都是行内元素的，可以排在一行，例如：<a，等

列表

有序列表

  <ol>
    <li>html</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
  </ol>

无序列表

  <ul>
    <li>html</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
  </ul>

自定义列表

  <!-- 自定义列表
  dl：标签
  dt：列表名称
  dd：列表内容
  -->
  <dl>
  	<dt>编程语言</dt>
    <dd>c++</dd>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>PHP</dd>
  </dl>

表格

基本结构

单元格
行
列
跨行
跨列

<table border="1px">
    <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>
</table>
<!--表格 table
tr: 行
td：列
colspan：跨列
rowspan：跨行
border:边框间距
-->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保失败,源站可能有防盗链机制,建议将图片保存下来直接上传存上传(im1vC4nBK7MS-1684153333628)(D:/%E8%AF%BE%E4%BB%B6/%%AC%94%EE%AE%B7/web%E8%AE%80%E5%85%A8/img/image-20230515170915314.png59)(D:/%E8%AF%BE%E4%BB%B6/%E7%AC%94%E8%AE%B0/web%E5%AE%89%E5%85%A8/img/image-20230515170915314.png)]

示例：

<html>
	<head>
		<title>成绩表</title>
		<meta charset="UTF-8">
	</head>
	<body>
		<table border="1px">
			<tr>
				<td colspan="3">学生成绩</td>
			</tr>
			<tr>
				<td rowspan="2">小明</td>
				<td >语文</td>
				<td >99</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>99</td>
			</tr>
			<tr>
				<td rowspan="2">小bai</td>
				<td >语文</td>
				<td >99</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>99</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

媒体元素

视频元素 video

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>视频</title>
  </head>
  <body>
    <!--视频元素 video
    src：资源地址
    controls：控制条
    autoplay：自动播放
    -->
    <video src="./image/Java内容介绍.mp4" controls autoplay>Java</video>
  </body>
</html>

音频 audio

<!DOCTYPE html>
  <html>
  <head>
      <title>音频</title>
  </head>
  <body>
      <!--音频元素 audio
      src：资源地址
      controls：控制条
      autoplay：自动播放
      -->
      <audio src="郑钧.mp3" controls autoplay></audio>
  </body>
</html>

页面结构分析

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

iframe内敛框架

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内联框架 iframe</title>
    </head>
    <body>
        <iframe src="https://www.runoob.com/" frameborder="0" width="1000px"
        height="800px"></iframe>
    </body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>
        <!-- 表单提交
        表单元素：form标签
        action：表单提交的地方
        method：请求方法
        输入标签：input
        name:标识
        type 输入框的类型
        text文本
        password 密码
        submit 提交按钮
        reset 重置按钮
        -->
        <form action="./05媒体元素.html" method="get">
        <p>用户名：<input type="text" name="username"></p>
        <p>密码：<input type="password" name="password"></p>
        <p>
            <input type="submit">
            <input type="reset">
        </p>
        </form>
    </body>
</html>

表单元素格式

属性	说明
type	指定元素的类型，text、password、checkbox、radio、submit、reset、file、 hidden、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值，type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或者password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位
maxlength	type为text或者password时，限制输入的最大字符数
checked	type为radio或者checkbox，指定按钮默认处于选中

练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
  </head>
  <body>
    <!-- 表单提交
    表单元素：form标签
    action：表单提交的地方
    method：请求方法
    输入标签：inpu
    name:标识
    type 输入框的类型
    text文本
    password 密码
    submit 提交按钮
    reset 重置按钮
    -->
    <form action="./05媒体元素.html" method="get">
      <p>用户名：<input type="text" name="username" value="表单联系测试"
      maxlength="10" size="30"></p>
      <p>密码：<input type="password" name="password"></p>
      <!--单选框 radio-->
      <p>性别：
        <input type="radio" value="boy" name="sex" >男
        <input type="radio" value="giry" name="sex" checked>女
      </p>
      <!--多选框 checkbox-->
      <p>爱好：
      <input type="checkbox" value="Basketball" name="hobby" checked>篮球
      <input type="checkbox" value="Football" name="hobby">足球
      <input type="checkbox" value="run" name="hobby">跑步
      <input type="checkbox" value="sing" name="hobby">唱歌
    </p>
    <p>图片按钮：
      <input type="image" src="./image/444.png">
    </p>
    <!-- 下拉框-->
    <p>互联网公司：
      <select name="列表单">
      <option value="B">百度</option>
      <option value="A">阿里</option>
      <option value="T" selected>腾讯</option>
      <option value="Z">字节跳动</option>
      </select>
    </p>
    <!-- 文本域-->
    <p>评论：
      <textarea name="evaluate" id="" cols="40" rows="4"></textarea>
    </p>
    <!-- 文件域-->
    <p>上传文件：
    简单验证与搜索框
    <input type="file" name="files">
    </p>
    <!-- 提交按钮 submit、重置按钮 reset-->
    <p>
    <input type="submit">
    <input type="reset" value="清空内容">
    </p>
    </form>
  </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DnR8Zb7q-1684153333629)(D:/%E8%AF%BE%E4%BB%B6/%E7%AC%94%E8%AE%B0/web%E5%AE%89%E5%85%A8/img/image-20230515200548069.png)]

简单验证域搜搜框

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>滑块与简单验证</title>
  </head>
  <body>
      <form action="./05媒体元素.html" method="get">
      <!-- 邮箱验证 -->
      <p>邮箱：
      		<input type="email" name="email">
      </p>
      <!-- URL验证 -->
      <p>URL：
      		<input type="url" name="url">
      </p>
      <!-- 数字验证
      max：最大值
      min：最小值
      step：步长
      -->
      <p>数字：
     		 <input type="number" name="number" max="100" min="10" step="10">
      </p>
      <!-- 滑块 -->
      <p>滑块：
      		<input type="range" name="value" max="100" min="2" step="2" >
      </p>
      <!-- 搜索框 -->
      <p>搜索框：
      		<input type="search" name="search">
      </p>
      <!-- 提交按钮 -->
      <p>
      		<input type="submit">
      </p>
      </form>
  </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-apMKtGgG-1684153333630)(D:/%E8%AF%BE%E4%BB%B6/%E7%AC%94%E8%AE%B0/web%E5%AE%89%E5%85%A8/img/image-20230515200821139.png)]

表单简单应用

隐藏域
只读
禁用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单的应用</title>
        </head>
        <body>
        	<form action="./05媒体元素.html" method="get">
        <!-- 只读属性 readonly -->
        <p>用户名：
        	<input type="text" name="username" value="admin" readonly>
        </p>
        <!-- hidden 隐藏域 -->
        <p>密码：
        	<input type="password" name="password" hidden>
        </p>
        <!-- disabled 禁用 -->
          <p>性别：
              <input type="radio" value="boy" disabled>男
              <input type="radio" value="girl">女
          </p>
          <p>
          		<input type="submit">
          </p>
        </form>
    </body>
</html>

表单的初级验证

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单初级验证</title>
    </head>
    <body>
        <form action="./05媒体元素.html" method="get" >
        <!--
        placeholder 提示信息
        required 要求不能为空,非空判断
        pattern 正则表达式
        -->
        <p>
        	用户名：<input type="text" name="username" placeholder="请输入用户名"
        required>
        </p>
        <p>
        	密码：<input type="password" name="password" placeholder="请输入密码">
        </p>
        <p>自定义手机号规则：
        	<input type="text" name="phone" pattern="/^1(3\d|4[5-9]|5[0-35-
        9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/">
        </p>
        <p>
        	<input type="submit">
        </p>
        </form>
    </body>
</html>

在这里插入图片描述

向日葵向日

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML简单概述及常用标签解析

HTML用来描述网页的一种语言HTML – hyper text markup language 超文本标记语言超文本包括：文字、图片、音频、视频、动画等等标记语言：是一套标记标签，HTML使用标记标签来描述网页。
复制链接

扫一扫

专栏目录