超文本标记语言HTML5

前言

本文介绍对HTML的学习


一、VScode插件安装

open in browser //右击直接打开网页
Auto Close Tag //自动闭合HTML/XML标签
Auto Rename Tag //自动完成另一侧标签的同步修改
JavaScript (ES6) code snippets //js(es6)的代码片段提示、补全,提高开发效率
Vetur //vue开发者必备的扩展
Visual Studio Code Commitizen Support //git提交规范插件。
CSS Peek //可以让你把鼠标放在类名的时候,能自动地跳到 css 文件对应类名的地方。
Path Intellisense //智能路径提示,可以在你输入文件路径时智能提示。
HTML CSS Support //智能提示CSS类名以及id。
HTML Snippets //智能提示HTML标签,以及标签含义。
HTMLHint //工具可以对 HTML 代码做静态代码检查,从而保证 HTML 代码的规范和质量。要百度配置教程。
indent-rainbow //高亮(每行代码之前的)缩进。

二、html5超文本标记语言

2.1 html框架

1)!+Tab:可以生产基本框架

<!DOCTYPE html>  <!--定义文档类型-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>
</head>
<body>
    这是网页身体/主体
    <!-- 这是注释, 是对代码的解释说明 -->
</body>
</html>
  • html标签:网页的整体
  • head标签:网页的头部
  • body标签:网页的身体
  • title标签:网页的标题

注:可以在标签内添加属性
2)ctrl + /:添加注释,再按一次取消注释
3)tab:代码提示&缩进

2.2 排版标签

<h1>标题标签</h1>
<p>段落标签</p>

<!-- 换行标签 -->
<br>

<!-- 水平线标签 -->
<hr>

2.3 文本格式化标签

标签标签语义化说明
bstrong加粗
uins下划线
iem倾斜
sdel删除线

如:

<b>加粗</b>

2.4 媒体标签

1)图片标签:

 <img src="cat.gif" alt="这是一只猫" title="这是title文字, 鼠标悬停的时候显示" width="200" height="800">
  • src:路径
  • alt:图片加载失败时的替换文本
  • title:鼠标悬停图片时的提示文本

2)音频标签:

<audio src="./music.mp3" controls autoplay loop></audio>
  • controls:显示播放控件
  • autoplay:自动播放(很多浏览器没用)
  • loop:循环播放

3)视频标签:

<video src="./video.mp4" controls autoplay muted loop></video>
  • muted:静默播放视频

2.5 链接标签

<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>
  • href:目标网页的路径
    注:href取值#表示空连接
  • target:目标网页的打开形式
取值效果
_self默认值(覆盖原网页)
_blank在新窗口跳转(保留原网页)

2.6 列表标签

1)无序列表

<ul>
        <li>榴莲</li>
        <li>香蕉</li>
</ul>
  • ul:无序列表标签
  • li:列表标签

2)有序列表

<ol>
    <li>张三:100</li>
    <li>李四: 80</li>
</ol>

3)自定义列表

标签名说明
dl表示自定义列表的整体
dt表示自定义列表的主题
dd表示对于主题的每一项内容
<dl>
	<dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
</dl>

注:无序列表最常用,有序列表偶尔用,自定义列表底部导航用

2.7 表格标签

1)表格基本标签

标签名说明
table表格整体
tr表格每行
td单元格包含内容
th加粗内容

注:标签的嵌套关系:table > tr > td
2)表格相关属性

属性名属性值效果
border数字边框宽度
width数字表格宽度
height数字表格高度

注:实际开发时针对于样式效果推荐用CSS设置
3)表格标题和表头单元格标签

<table border="1">
		<caption><strong>学生成绩单</strong></caption>
        <tr>
            <th>姓名</th>
        </tr>
        <tr>
            <td>张三</td>
        </tr>
</table>
  • caption:表格大标题,默认居中加粗显示
  • th:表格单元格,表示一列小标题,默认文字加粗居中显示

4)表格的结构标签(了解)

<thead>表格头部</thead>
<tbody>表格主题</tbody>
<tfoot>表格底部</tfoot>

5)合并单元格(取值为合并单元格个数)

  • rowspan:跨行合并,即垂直合并,从当前行往下合并
  • colspan:跨列合并,即水平合并,从当前列往右合并
<td rowspan="2">100分</td>

2.8 表单标签

1)input系列标签
①type属性值

type属性属性说明
text文本框,用于输入单行文本
password密码框,用于输入密码
radio单选框,用于多选一
checkbox
file文件选择,用于上传文件
submit提交按钮
reset重置按钮
button普通按钮默认无功能,配合js使用

②表单控件

属性值表单控件控件说明
textplaceholder占位符,提示用户输入内容的文本
passwordplaceholder占位符,提示用户输入内容的文本
radioname分组,相同name单选框为一组
radiochecked默认选中
checkboxchecked默认选中
filemultiple多文件选择
<input type="radio" name="sex" checked>

注:value属性和name属性作用介绍
value属性:用户输入的内容,提交之后会发送给后端服务器
name属性:当前控件的含义,提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是:name的属性值 = value的属性值

2)button按钮标签(在网页中显示用户点击的按钮)

type属性属性说明
submit提交按钮
reset重置按钮
button普通按钮默认无功能,配合js使用

注:谷歌浏览器中button默认是提交按钮,button标签是双标签,更便于包裹其他内容:文字、图片等
3)select下拉菜单标签(在网页中提供多个选择项的下拉菜单表单控件)

标签标签说明
select下拉菜单的整体
option下拉菜单的每一项
  • 常见属性:selected,下拉菜单的默认选中
<select>
        <option>北京</option>
        <option selected>深圳</option>
</select>

4)textarea文本域标签(提供可输入多行文本的表单控件)

属性属性说明
cols规定了文本域内可见宽度
rows规定了文本域内可见行数
<textarea cols="60" rows="30"></textarea>

注:右下角可以拖拽改变大小,实际开发时针对于样式效果推荐用CSS设置
5)label标签(绑定内容与表单标签的关系)

使用方法①:
1.使用label标签把内容(如:文本)包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值

使用方法②:
1.直接使用label标签把内容(如:文本)和表单标签一起包裹起来
2.需要把label标签的for属性删除即可

<input type="radio" name="sex" id="nan"> <label for="nan"></label>
<label><input type="radio" name="sex"></label>

2.9 语义化标签

(1)没有语义的布局标签

标签说明
div一行只显示一个(独占一行)
span一行可以显示多个
<div>这是div标签</div>
<span>这是span标签</span>

(2)有语义的布局标签

标签说明
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章

在这里插入图片描述

2.10 字符实体

1)HTML的空格合并现象
场景:如果在html代码中同时并列出现多个空格、换行、缩进等,最终浏览器只会解析出一个空格

2)常见字符实体
场景:在网页中展示特殊符号效果时,需要使用字符实体替代

在这里插入图片描述
在这里插入图片描述

这是HTML文档, 现在要学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;习字符实体.

附录:CSS3层叠样式表

https://blog.csdn.net/weixin_44567668/article/details/132521477

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别问,问就是全会

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值