-
【HTML5入门指北】第二篇 网页相关的标签
网页相关的标签
1.标题标签
<h1>一级标签h1> <h2>二级级标签h2> <h3>三级级标签h3> <h4>四级标签h4> <h5>五级标签h5> <h6>六级标签h6>- 1
- 2
- 3
- 4
- 5
- 6
- 7
2.段落标签
<p>p> <p>当你的眼睛眯着笑p> <p>当你喝可乐 当你吵p> <p>我想对你好 你从来不知道p> <p>想你 想你也能成为嗜好p> <p>当你说今天的烦恼p> <p>当你说夜深 你睡不着p> <p>我想对你说 却害怕都说错p> <p>好喜欢你 知不知道p>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
如果没加段落标签，在网页上显示则不分段。
加了段落标签之后，与之前对比文本内容分段了
3.换行标签
当你的眼睛眯着笑<br/> 当你喝可乐 当你吵<br/> 我想对你好 你从来不知道<br/> 想你 想你也能成为嗜好<br/> 当你说今天的烦恼<br/> 当你说夜深 你睡不着<br/> 我想对你说 却害怕都说错<br/> 好喜欢你 知不知道<br/>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
4.水平标签
<hr/>- 1
- 2
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> <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/> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
5.字体样式标签
粗体： <strong>I miss you,yutingstrong> 斜体： <em>I miss you,yutingem>- 1
- 2
- 3
- 4
- 5
- 6
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> <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/> 粗体： <strong>I miss you,yutingstrong> 斜体： <em>I miss you,yutingem> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
6.注释和特殊符号
空 格 空 格 <br/> >大于 <br/> <小于 <br/> ©版权所有guanguan- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
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> <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/> 粗体： <strong>I miss you,yutingstrong> 斜体： <em>I miss you,yutingem> <br/> 空 格 空 格 <br/> >大于 <br/> <小于 <br/> ©版权所有guanguan body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
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="../resource/image/guan.jpg" alt="guan头像" title="悬停文字" height="300" width="300"> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
9.文本标签
图像超链接
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签title> head> <body> <a name="top">顶部a> <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> <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> <a href="#top">回到顶部a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
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>javali> <li>pythonli> <li>c/c++li> <li>goli> ol> <hr> <ul> <li>javali> <li>pythonli> <li>c/c++li> <li>goli> ul> <dl> <dt>学科dt> <dd>javadd> <dd>pythondd> <dd>c/c++dd> <dd>godd> <dt>位置dt> <dd>北京dd> <dd>上海dd> <dd>广州dd> <dd>深圳dd> dl> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
11.表格标签
加上边框后的表格
<table border="1px"> <tr> <td>1-1td> <td>1-2td> <td>1-3td> <td>1-4td> tr> <tr> <td>2-1td> <td>2-2td> <td>2-3td> <td>2-4td> tr> <tr> <td>3-1td> <td>3-2td> <td>3-3td> <td>3-4td> tr> table>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
表格跨行、跨列
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签title> head> <body> <table border="1px"> <tr> <td colspan="4">td> <td>1-1td> tr> <tr> <td rowspan="2">2-1td> <td>2-2td> <td>2-3td> <td>2-4td> tr> <tr> <td>3-1td> <td>3-2td> <td>3-3td> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
总结
本篇笔记是基于B站up主：遇见狂神说的笔记进行学习，感兴趣的可以去B站进行学习。网站地址：https://space.bilibili.com/95256449，以上就是今天要讲的内容，本文仅仅通过简单了解
网页相关的标签。好了今天的内容就到这里了，下一篇再见 -
相关阅读:
JavaScript从入门到精通系列第三十篇：详解JavaScript中的正则表达式语法
计算机毕业设计选题推荐-健身房管理系统-Java项目实战
html在线阅读小说网页制作模板 小说书籍网页设计 大学生静态HTML网页源码 dreamweaver网页作业 简单网页课程成品
SpringMVC Controller是单例还是多例？线程安全吗？如何解决呢？
postgresql-触发器
day9-机器学习之pandas库学习
西电软件体系结构笔记ATMA
最新前端面试题整理
Flutter SliverAppBar 吸顶效果
＜C++＞ 哈希表模拟实现STL_unordered_set/map
- 原文地址：https://blog.csdn.net/guanguan12319/article/details/126211280
