【HTML5入门指北】第二篇 网页相关的标签
2024-05-11 18:15:46
网页相关的标签
文章目录
- 网页相关的标签
- 1.标题标签
- 2.段落标签
- 3.换行标签
- 4.水平标签
- 5.字体样式标签
- 6.注释和特殊符号
- 7.图像标签
- 8.链接标签
- 9.文本标签
- 8.块元素
- 9.行内元素
- 10.列表标签
- 11.表格标签
- 总结
1.标题标签
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级级标签</h2>
<h3>三级级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
2.段落标签
<!--段落标签快捷键先按p在按tab-->
<p></p>
<!--段落标签--><p>当你的眼睛眯着笑</p><p>当你喝可乐 当你吵</p><p>我想对你好 你从来不知道</p><p>想你 想你也能成为嗜好</p><p>当你说今天的烦恼</p><p>当你说夜深 你睡不着</p><p>我想对你说 却害怕都说错</p><p>好喜欢你 知不知道</p>
如果没加段落标签，在网页上显示则不分段。
加了段落标签之后，与之前对比文本内容分段了
3.换行标签
<!--换行标签只有一个<br/>，不是成对的-->
<!--段落标签-->当你的眼睛眯着笑<br/>当你喝可乐 当你吵<br/>我想对你好 你从来不知道<br/>想你 想你也能成为嗜好<br/>当你说今天的烦恼<br/>当你说夜深 你睡不着<br/>我想对你说 却害怕都说错<br/>好喜欢你 知不知道<br/>
4.水平标签
<!--水平线标签-->
<hr/>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title> 网页基本标签</title>
</head>
<body><!--Html5注释的快捷键按ctrl+/ -->
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级级标签</h2>
<h3>三级级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6><!--段落标签快捷键先按p在按tab-->
<p></p>
<!--段落标签--><p>当你的眼睛眯着笑</p><p>当你喝可乐 当你吵</p><p>我想对你好 你从来不知道</p><p>想你 想你也能成为嗜好</p><p>当你说今天的烦恼</p><p>当你说夜深 你睡不着</p><p>我想对你说 却害怕都说错</p><p>好喜欢你 知不知道</p><!--水平线标签-->
<hr/><!--换行标签只有一个<br/>，不是成对的-->
<!--段落标签-->当你的眼睛眯着笑<br/>当你喝可乐 当你吵<br/>我想对你好 你从来不知道<br/>想你 想你也能成为嗜好<br/>当你说今天的烦恼<br/>当你说夜深 你睡不着<br/>我想对你说 却害怕都说错<br/>好喜欢你 知不知道<br/></body>
</html>
5.字体样式标签
<!-- 粗体，斜体 -->
<!--字体样式标签-->粗体： <strong>I miss you,yuting</strong>
斜体： <em>I miss you,yuting</em><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title> 网页基本标签</title>
</head>
<body><!--Html5注释的快捷键按ctrl+/ -->
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级级标签</h2>
<h3>三级级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6><!--段落标签快捷键先按p在按tab-->
<p></p>
<!--段落标签--><p>当你的眼睛眯着笑</p><p>当你喝可乐 当你吵</p><p>我想对你好 你从来不知道</p><p>想你 想你也能成为嗜好</p><p>当你说今天的烦恼</p><p>当你说夜深 你睡不着</p><p>我想对你说 却害怕都说错</p><p>好喜欢你 知不知道</p><!--水平线标签-->
<hr/><!--换行标签只有一个<br/>，不是成对的-->
<!--段落标签-->当你的眼睛眯着笑<br/>当你喝可乐 当你吵<br/>我想对你好 你从来不知道<br/>想你 想你也能成为嗜好<br/>当你说今天的烦恼<br/>当你说夜深 你睡不着<br/>我想对你说 却害怕都说错<br/>好喜欢你 知不知道<br/><!-- 粗体，斜体 -->
<!--字体样式标签-->粗体： <strong>I miss you,yuting</strong>
斜体： <em>I miss you,yuting</em></body>
</html>
6.注释和特殊符号
<!--特殊符号-->
空 格
空 格<br/>
>大于
<br/>
<小于
<br/>
©版权所有guanguan
<!--特殊符号记忆方式
& ;
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title> 网页基本标签</title>
</head>
<body><!--Html5注释的快捷键按ctrl+/ -->
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级级标签</h2>
<h3>三级级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6><!--段落标签快捷键先按p在按tab-->
<p></p>
<!--段落标签--><p>当你的眼睛眯着笑</p><p>当你喝可乐 当你吵</p><p>我想对你好 你从来不知道</p><p>想你 想你也能成为嗜好</p><p>当你说今天的烦恼</p><p>当你说夜深 你睡不着</p><p>我想对你说 却害怕都说错</p><p>好喜欢你 知不知道</p><!--水平线标签-->
<hr/><!--换行标签只有一个<br/>，不是成对的-->
<!--段落标签-->当你的眼睛眯着笑<br/>当你喝可乐 当你吵<br/>我想对你好 你从来不知道<br/>想你 想你也能成为嗜好<br/>当你说今天的烦恼<br/>当你说夜深 你睡不着<br/>我想对你说 却害怕都说错<br/>好喜欢你 知不知道<br/><!-- 粗体，斜体 -->
<!--字体样式标签-->粗体： <strong>I miss you,yuting</strong>
斜体： <em>I miss you,yuting</em>
<br/>
<!--特殊符号-->
空 格
空 格<br/>
>大于
<br/>
<小于
<br/>
©版权所有guanguan
<!--特殊符号记忆方式
& ;
-->
</body>
</html>
7.图像标签
JPG、GIF、GIF、PNG、BMP…
图片放置地址
地址正确就可以找到图片
把地址resource改为source地址错误，则返回 alt="guan头像"的信息
加上 title="悬停文字"后，鼠标箭头悬停在图片上则会显示文字
加上title=“悬停文字” height=“300” width="300"限制图片大小
8.链接标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签</title>
</head>
<body>
<!--img学习
src : 图片地址（必填）相对地址（推荐使用），绝对地址../ 上一级目录
alt: 图片名字（必填）
title:鼠标悬停在图片上显示文字
width:图片的宽
height:图片的高--><img src="../resource/image/guan.jpg" alt="guan头像" title="悬停文字" height="300" width="300">
</body>
</html>
9.文本标签
图像超链接
<!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="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<br/>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/><!--图片超链接-->
<a href="1.我的第一个网页.html"><img src="../resource/image/guan.jpg" alt="guan头像" title="悬停文字" height="300" width="300">
</a><p><a href="1.我的第一个网页.html"><img src="../resource/image/guan.jpg" alt="guan头像" title="悬停文字" height="300" width="300"></a>
</p><p><a href="1.我的第一个网页.html"><img src="../resource/image/guan.jpg" alt="guan头像" title="悬停文字" height="300" width="300"></a>
</p><p><a href="1.我的第一个网页.html"><img src="../resource/image/guan.jpg" alt="guan头像" title="悬停文字" height="300" width="300"></a>
</p><p><a href="1.我的第一个网页.html"><img src="../resource/image/guan.jpg" alt="guan头像" title="悬停文字" height="300" width="300"></a>
</p><p><a href="1.我的第一个网页.html"><img src="../resource/image/guan.jpg" alt="guan头像" title="悬停文字" height="300" width="300"></a>
</p><!--功能性链接
邮件链接:mailto
QQ链接
-->
<a href="mailto:2054210430@qq.com">点击联系我</a><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2054210430&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2054210430:53"alt="联系我，告诉你变帅秘诀" title="联系我，告诉你变帅秘诀"/></a><!--锚链接
1.需要一个锚标记
2.跳转到标记
--><a href="#top">回到顶部</a></body>
</html>
8.块元素
1.无论内容多少，该元素独占一行
2.（p、h1~h6…）
9.行内元素
1.内容撑开宽度，左右都是行内元素的可以排在一行
2.（a.strong.em…）
10.列表标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表</title>
</head>
<body><!--有序列表
应用范围:试卷，问答
--><ol><li>java</li><li>python</li><li>c/c++</li><li>go</li>
</ol><hr><!--无序列表
应用范围:导航，侧边栏
-->
<ul><li>java</li><li>python</li><li>c/c++</li><li>go</li>
</ul>
<!--自定义序列表-->
<dl><dt>学科</dt><dd>java</dd><dd>python</dd><dd>c/c++</dd><dd>go</dd><dt>位置</dt><dd>北京</dd><dd>上海</dd><dd>广州</dd><dd>深圳</dd>
</dl>
</body>
</html>
11.表格标签
加上边框后的表格
<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>
表格跨行、跨列
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签</title>
</head>
<body><!--表格tbale
行 tr
列 td
--><table border="1px"><tr>
<!-- colspan 跨列 --><td colspan="4"></td><td>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>
总结
本篇笔记是基于B站up主：遇见狂神说的笔记进行学习，感兴趣的可以去B站进行学习。网站地址：https://space.bilibili.com/95256449，以上就是今天要讲的内容，本文仅仅通过简单了解网页相关的标签。好了今天的内容就到这里了，下一篇再见
【HTML5入门指北】第二篇 网页相关的标签相关推荐
- 【Linux入门指北】第一篇 初识Linux
目录 前言 一.Linux操作系统的发展历史 1.Linux操作系统的诞生 2.Linux操作系统的发展 1.自由软件基金会(FSF) 2.GPL协议 3.GUN工程 二.Linux的不同发行版本 1 ...
- Flutter 入门指北(Part 9)之弹窗和提示(SnackBar、BottomSheet、Dialog)
该文已授权公众号 「码个蛋」,转载请指明出处 前面的小节把常用的一些部件都介绍了,这节介绍下 Flutter 中的一些操作提示.Flutter 中的操作提示主要有这么几种 SnackBar.Botto ...
- 计算机学习入门指北——计科软工网络信安侧重图析、解读专业术语、岗位分类、未来规划
申明:本博文偏技术向,主观性较强,其中部分理解必有偏差和误解,望指出改正! 计算机学习入门指北: 作为刚入学的计算机系学生,面对一片专业术语十分蒙.区块链?大数据?开源?数据库?嵌入式开发?前端后端? ...
- 新司机的黑裙战斗机 篇四：新司机的黑群晖指北—软件篇（下）
原文网址:https://post.smzdm.com/p/awxl3d44/ 各位剁友好,我是身在长沙的一只小剁,因为ID的缘故长沙剁友赐雅号--姐夫 本文是我的首个系列<新司机的黑裙战斗机& ...
- Blockly开发入门指北
Blockly开发入门指北 [腾讯文档]Blockly开发入门指北 https://docs.qq.com/doc/DRWRDUU5kR2lhaGNN 写这篇文章的目的 最近公司的项目用到了Block ...
- Python 简单入门指北(二)
Python 简单入门指北(二) 2 函数 2.1 函数是一等公民 一等公民指的是 Python 的函数能够动态创建,能赋值给别的变量,能作为参传给函数,也能作为函数的返回值.总而言之,函数和普通变量 ...
- Python 简单入门指北（试读版）
本文是我小专栏中 Python 简单入门指北 一文的前半部分,如果你能坚持读完并且觉得有一定收获,建议阅读原文,只需一杯咖啡钱就可以阅读更精彩的部分,也可以订阅小专栏或者加入我的知识星球,价格都是 6 ...
- TensorRT详细入门指北，如果你还不了解TensorRT，过来看看吧
首发于TensorRT详细入门指北,如果你还不了解TensorRT,过来看看吧!,最新回复以及交流请看这里~ 推荐一个深蓝学院的CUDA课程,TensorRT_Tutorial的作者伟哥讲解的,质量很 ...
- D3.js学习指北--第二章，基础复习
D3学习指北–第二章,基础复习 1.关于html的svg标签 html5里有很多个标签,但是关于D3的应用多用在一个标签上< svg >svg标签可以理解为一个绘画板,里面提供了各类的 ...
- 【杭电数电实验】verilog入门指北
verilog入门指北 前言 指北内容 面向人群 基础实验 1-15 代码参考 正文 ISE 的安装 实验的基本操作流程 可能出现的问题 创建工程闪退 希望删除某一文件,实际上并没有删除 如何编写测试 ...
最新文章
- php拦截器配置,php 类中的各种拦截器
- selection does not contain a main type错误
- Android FFmpeg移植总攻略——获取视频帧数（亲测可用）
- ProMesh.Net基本使用说明！
- poj2955Brackets(区间DP)
- java 命令 乱码_解决java 命令行乱码的问题
- 第十七次ScrumMeeting会议
- python枪战项目计划书_人肉(共享)代购项目计划书(示例代码)
- centos7查看当前cpu运行模式_杂集：centos7中设置服务开机自启的两种方法，欢迎补充...
- 8 Regular Expressions You Should Know
- QImage QPixmap Mat区别
- 无法启动SQL Server 2005中的SQL Serve（MSSQLSERVER）服务
- 基于JAVA+Swing+MYSQL的汽车租赁系统
- vue结合element实现自定义上传图片、文件
- oracle strsplit函数,oracle splitstr 函数
- 桌面超简单小代码 bat形式
- java struts2教程_Struts2学习教程之入门小白的开始基础
- mysql安装版与mysql解压版议论
- C语言基本数据类型占内存的大小
- 基于边缘计算的视觉感知研究