欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML5——网页基本标签

程序员文章站 2022-06-12 10:41:49
...

文章目录

HTML5——网页的基本标签

基本标签：

  • 标题标签

  • 段落标签

  • 换行标签

  • 水平线标签

  • 字体样式标签

    粗体：<strong></strong>
斜体：<em></em>

  • 注释和特殊符号

    空&nbsp; 格
> &gt;大于
< &lt;小于

    基本标签的使用

<!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>1、只有飞速的bai旋转，才可以止住我的泪水，du忘记你的模样。 -----不祥之刃</p>
<p>2、他们都说我是穿着东方dao盔甲的奇怪人，但我只想顶在最前面，用我的长枪保护我的朋友。-----德邦总管</p>
<p>3、一曲终了、繁花散尽、伊人已逝，只余一声空叹。----- 死亡歌颂者 </p>
<p>4、妩媚倾城的面容 我蛊惑万千众生 孰不知 心里 早有了一个人 ..却只能无尽的思念 你送我的宝珠 我一直带着 只因为我能看见你的身影。-----九尾妖狐 </p>
<p>5、我醒来了，但是我什么都不记得，我很害怕，我包裹住我的身体，然后独自在黑暗中哭泣。----殇之木乃伊</p>


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


<!--换行标签,还是属于一段-->
6、我只是部落遗子，你却是高贵公主，我愿把我生命的力量化为三刀为你而战，只为证明我，配的上你… -----蛮族之王<br/>
7、我很想陪伴在你身边，只是你不允许，没关系，在你需要帮助时，我还是会出现在你身边。 -----暮光之眼<br/>
8、我一路种下了蘑菇、只为让你知道回家的路。 ----迅捷斥候<br/>
9、我一直急速前行 穿梭于人人之间 试图叫应接不暇的风景让我褪去对你的思念----无极剑圣<br/>
10、我蒙上自己的双眼，只想记住最后看你的那一眼。 我刺瞎自己的双眼 只为记住那逝去的红颜。-----盲僧<br/>


<!--粗体，斜体-->
<h1>字体样式标签 </h1>
粗体：<strong>hello world</strong><br/>
斜体：<em>hello world</em>
<br/>
<!--特殊符号-->
空       格：<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 格
<br/>
> &gt;
<br/>
< &lt
<!--查找特殊符号的方式：&+字母-->

</body>
</html>

图像标签

格式：

HTML5——网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img标签学习
src（必填）：图片地址:相对地址../resources/image/1.jpg推荐使用（../上一级目录）
            绝对地址D:\project\resources\image\1.jpg
alt（必填）:替代图片的名字
title：鼠标悬停文字

-->
<img src="../resources/image/1.jpg" alt="风景" title="家乡的风景" width="800" height="400">


</body>
</html>

链接标签

文本超链接

<!--a标签
href(必填)：表示要跳到哪个页面
target="_blank":打开一个新网页
       "_self"：在自己的网页打开

-->

图像超链接

<!--在图片里面嵌套一个链接-->
<a href="1.我的第一个网页.html"><br/>
    <img src="../resources/image/1.jpg" alt="风景图" title="点击查看源网页" width="800" height="400">
</a>

锚链接

<!--锚链接 可以实现页面间的跳转
1.需要一个锚标记
2.可以跳转到锚标记
可以在一个网页打开另一个网页的锚链接
-->

链接测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!--锚链接标记：使用name作为标记-->
<a name="top">网页顶部</a><br/>


<!--a标签
href(必填)：表示要跳到哪个页面
target="_blank":打开一个新网页
       "_self"：在自己的网页打开

-->


<a href="https://www.csdn.net/" target="_blank" >点击跳转到CSDN</a><br/>
<a href="https://www.baidu.com/" target="_self">点击跳转到百度</a><br/>

<!--在图片里面嵌套一个链接-->
<a href="1.我的第一个网页.html"><br/>
    <img src="../resources/image/1.jpg" alt="风景图" title="点击查看源网页" width="800" height="400">
</a>


<!--锚链接 可以实现页面间的跳转
1.需要一个锚标记
2.可以跳转到锚标记
可以在一个网页打开另一个网页的锚链接
-->
<a href="#top" >回到顶部</a>
<br/>
<a name="down">网页底部</a>


<!--功能性连接
邮件链接 mailto:
qq链接
-->
<br/>
<a href="mailto:aaa@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="../resources\image\2.jpg" alt="加我，免费领取小电影" title="加我，免费领取小电影"/></a>


</body>
</html>

行内元素和块元素

块元素：

  • 无论内容多少，该元素独占一行
  • 如：p段落标签，h标题标签…

行内元素：

  • 内容可以在宽度上撑开，左右都是行内元素的可以排在一行
  • 如：a链接，strong粗体。em斜体…

列表标签

列表：列表就是信息资源的一种展示形式，他可以使信息结构化和条理化，并以列表的形式显示出来，一边浏览者能更快捷的获取相应信息

列表的分类;

  • 无序列表ul

  • 有序列表ol

  • 定义列表dl

列表测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>

<!--有序列表ol
应用范围:试卷，问答...
-->
<ol>科目分类
    <li>数学</li>
    <li>语文</li>
    <li>英语</li>
    <li>物理</li>
    <li>化学</li>
    <li>生物</li>
</ol>

<hr/>
<!--无序列表ul
应用范围:导航，侧边栏...
-->
<ul>科目分类
    <li>数学</li>
    <li>语文</li>
    <li>英语</li>
    <li>物理</li>
    <li>化学</li>
    <li>生物</li>
</ul>

<!--定义列表dl
应用范围：公司官网底部
-->
<dl>
    <dt>科目分类</dt>    <!--列表名称-->
    <dd>语文</dd>    <!--列表内容，可以有多个-->
    <dd>英语</dd>
    <dd>物理</dd>
    <dd>化学</dd>

    <dt>信息</dt>
    <dd>男</dd>
    <dd>20</dd>
    <dd>优秀</dd>
    <dd>科班</dd>

</dl>

</body>
</html>

表格标签

表格table
行 tr
列 td
border边框

合并列colspan

合并行rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td
border边框
-->
<table border="1px">
    <tr>
        <!-- 跨列（合并列）colspan="5"要合并的列数-->
        <td colspan="5">1-1</td>

    </tr>
    <tr>
        <!-- 跨行（合并行）rowspan="4"要合并的行数-->
        <td rowspan="4">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
        
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
        <td>3-5</td>

    </tr>
    <tr>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
        <td>4-5</td>
    </tr>
    
</table>
</body>
</html>

测试：用HTML5做一个课表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课表</title>
</head>
<body>
<table border="1px">
    <tr>
        <td></td>
        <td></td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
    </tr>
    <tr>
        <td rowspan="2">上午</td>
        <td>一</td>
        <td></td>
        <td>面向对象程序设计</td>
        <td></td>
        <td>面向对象程序设计</td>
        <td>HTML5网页制作</td>
    </tr>
    <tr>

        <td>二</td>
        <td>操作系统</td>
        <td>数据库原理</td>
        <td>HTML5网页制作</td>
        <td>计算机组成原理</td>
        <td>计算机组成原理</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>三</td>
        <td>计算机组成原理</td>
        <td></td>
        <td>操作系统</td>
        <td>数据库原理</td>
        <td></td>
    </tr>
    <tr>

        <td>四</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>


</table>


</body>
</html>

HTML5——网页基本标签

相关标签： HTML5 列表 html html5 IDEA java

上一篇： 带你去个好地方，让你长长见识

下一篇： 被谋杀的爱情

推荐阅读