DuckBlog

Duck Blog

唐如飞

( ^∀^)/欢迎\( ^∀^)

79 文章数
14 评论数

HTML5

tangrufei
2023-12-12 / 0 评论 / 134 阅读 / 0 点赞

HTML定义

HTML 超文本标记语言一一HyperText Markup Language。

  • 超文本 - 链接

  • 标记 - 标签

HTML基本骨架

HTML骨架是网页模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
  • html:整个网页
  • head:整个头部,存放给浏览器看的代码。例如CSS

标签语法

成对出现中间包裹内容
<> 里面放英文字母
结束标签比开始标签多/

标签的关系

作用:明确代码书写的位置

  • 父子关系(嵌套关系)
  • 兄弟关系(并列关系)

标题标签

h1~h6

	<h1>这是一个H1</h1>
	<h2>这是一个H2</h2>
	<h3>这是一个H3</h3>

段落标签

标签名 p(双标签) 独占一行 段落之间有间隙

换行与水平线标签

  • 换行
    (单标签)

  • 水平线:


    (单标签)

文本格式化标签

作用:为文本添加特殊格式,以突出重点。常见文本格式: 加粗倾斜下划线删除线 文本格式化标签在浏览器中在一行显示

  • strong、em、ins、del 标签自带强调含义 (语义)
	<strong>加粗</strong>
	<em>倾斜</em>
	<ins>下划线</ins>
	<del>删除线</del>

图像标签

网页中插入图像

超链接标签

跳转到其他页面

<a href="https://www.baidu.com/" ></a>
  • href属性值是跳转地址,是超链接的必须属性

  • target="_blank" 表示新窗口打开文件 href="#" 表示空连接不会跳转

<a href="https://www.baidu.com/" target="_blank" ></a>

音频标签

<audio src="音频的URL"></audio>

常见属性

属性 作用 特殊说明
src(必须属性) 音频URL 支持格式:MP3、Ogg、Wav
controls 显示音频控制面板
loop 循环播放
autoplay 自动播放 为了提升用户体验,浏览踞一般会禁用自动插放功能

视频标签

<video src="视频的URL"></video>

常见属性

属性 作用 特殊说明
src(必须属性) 视频URL 支持格式:MP4、Ogg、Wabm
controls 显示视频控制面板
loop 循环播放
muted 静音播放
autoplay 自动播放 为了提升用户体验,浏览踞一般会禁用自动插放功能

列表

作用: 布局内容排列整齐的区域
列表分类: 无序列表,有序列表,定义列表

无序列表

作用:布局排列整齐的不需要规定顺序的区域
标签:ul嵌套li,ul是无序列表,li是内容条目

有序列表

作用:布局排列整齐的需要规定顺序的顺序
标签:ol嵌套li,ol是有序列表,li是内容条目

定义列表

标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情

表格

表格与网页中excel中类似,用来展示数据
标签:table嵌套tr,tr嵌套th/td

** 标签名** 作用
table 表格
tr
th 表头单元格
td 内容单元格

合并单元格

作用将多个单元格合并成一个单元格,以合并同类信息

表单

作用收集用户信息

使用场景

  • 登陆页面
  • 注册页面
  • 提交信息

input标签

input标签type属性不同则功能不同

type属性值 说明
text 文本框用于输入单行文本
password 密码框
radio 单选框
checkbox 多选框
file 上传文件

input占位文本

占位文本:提示信息 placeholder

单选框

checked默认选中

上传文件

多选框

下拉菜单(select)

文本域

lable标签

增大点击范围

按钮

无语义布局标签

文章不错,扫码支持一下吧~
上一篇 下一篇
评论
来首音乐
光阴似箭
今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月