HTML网页基本标签及页面结构分析(其一)

什么是HTML?

Hyper Text Markup Language(超文本标记语言)

W3C:World Wide Web Consortium(万维网联盟)

W3C标准包括:

  • 结构化标准语言(HTML、XML)

  • 表现标准语言(CSS)

  • 行为标准(DOM、ECMAScript)

网页的基本标签

1、标题

2、段落

3、换行

4、水平线

5、字体样式

6、注释和特殊符号

<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!-- 段落标签 -->
<p>两只老虎,两只老虎,</p>
<p>跑得快,跑得快,</p>
<p>一只没有眼睛,</p>
<p>一只没有尾巴,</p>
<p>真奇怪!真奇怪!</p>

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

<!-- 换行标签 -->
两只老虎,两只老虎,
跑得快,跑得快,<br/>
一只没有眼睛,<br/>
一只没有尾巴,<br/>
真奇怪!真奇怪!<br/>

<!-- 粗体,斜体标签 -->
<h1> 字体样式标签</h1>
粗体:<strong> i love you </strong><p/>
斜体:<em> i love you </em>

<br/>
<!-- 注释和特殊符号标签 -->
空    格:
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:

<br/>
&gt;
<br/>
&lt;
&copy;版权所有大仙

<!--
特殊符号记忆方式
&   ;
查百度
-->
</body>

图像标签

常见格式

  • JPG

  • GIF

  • PNG

  • BMP

<body>
<!-- img学习
src:图片地址
    相对路径,绝对路径
    ../   -- 上一级目录
alt:
-->
<img src="../resource/img/1.jpg" alt="大仙头像" title="悬停文字" width="300" height="300">
</body>

链接标签

  • 文本超链接

  • 图像超链接

超链接

  • 页面间链接

    • 一个页面链接接到另外一个页面

  • 锚链接

  • 功能性链接

<body>
<!-- 使用name作为标记 -->
<a name="top">顶部</a>
<!-- a 标签
href:必填,表示要跳转的目的地页面
_blank:在新标签中打开
_self:在自己页面的打开
-->
    
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="http://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>
<a href="1.我的第一个网页.html">
    <img src="../resource/img/1.jpg" alt="大仙头像" title="悬停文字" width="300" height="300">
</a>
<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>

<a name="down"></a>
<!-- 功能性链接
邮件链接:mailto:
-->
<a href="mailto:17805241979@163.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=340508942&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:340508942:53" alt="你好,加我领取小电影" title="你好,加我领取小电影"/></a>

</body>

行内元素和块元素

  • 块元素

    • 无论内容多少,该元素独占一行

    • (p、h1--h6......)

  • 行内元素

    • 内容撑开宽度,左右都是行内元素的可以排在一行

    • (a、strong、em......)

列表

1、什么是列表

  • 列表就是信息资源的一种展现形式。他可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷的获得相应的信息

2、列表的分类

  • 无序列表

  • 有序列表

  • 定义列表

<body>
<!-- 有序列表
应用范围:试卷、问答。。。。
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>
<hr/>
<!-- 无序列表
应用范围:导航、侧边栏。。。。
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>
<hr/>
<!-- 定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围:公司底部、
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C/C++</dd>

    <dt>位置</dt>
    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>
    <dd>江苏</dd>
</dl>
</body>
</html>

表格

1、为什么使用表格

  • 简单通用

  • 结构稳定

2、基本结构

  • 单元格

  • 跨行

  • 跨列

练习表格

<body>
<!-- 表格table
tr:行
td:列
-->
</body>
<table border="1px">
    <tr>
        <!-- colspan 跨列-->
        <td colspan="4">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>
<hr/>
<table border="1px">
    <tr>
        <td colspan="3" align="center">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">大仙</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">王立尧</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

视频和音频

1、视频元素

  • Video

2、音频元素

  • audio

<body>
<!-- 音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../resource/video/张艺兴%20-%20梦不落雨林.mp4" controls autoplay></video>
<audio src="../resource/audio/张芸京%20-%20偏爱.mp3" controls autoplay></audio>
</body>

页面结构分析

iframe内联框架

<body>
<!-- iframe 内联框架
src:地址
w-h:宽度、高度
-->
<iframe src="" name="hello"  frameborder="0" width="700px" height="700px"></iframe>

<a href="1.我的第一个网页.html" target="hello">点击跳转</a>

<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->
</body>

版权声明:本文为qq_42405743原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。