网站开发：XTML+CSS - 网页文档结构

最新推荐文章于 2024-09-03 17:02:58 发布

蒜蓉大猩猩

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量835

点赞数 14

分类专栏：网站开发：XTML+CSS 文章标签： javascript html5 前端 html 前端框架

本文链接：https://blog.csdn.net/qq_51222843/article/details/141762089

版权

网站开发：XTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 前言

HTML（HyperText Markup Language，超文本标记语言）是构建网页和 web 应用程序的标准标记语言。它定义了网页的结构和内容，允许开发者创建有组织、语义化的文档。

HTML 使用一系列的元素（elements）和标签（tags）来标记不同类型的内容，比如文本、图像、链接、表单、视频等。每个 HTML 标签都有特定的用途，可以用来定义页面的不同部分，如标题、段落、列表、链接、图片等。

2. 文档结构

<!DOCTYPE html>

用于告知浏览器当前文档的HTML版本，有助于页面渲染

<html>
...
</html>

上述的<html>标签象征HTML标记文档的开始，可以省略，但为了保持文档的完整性最好加上。

<head>是HTML文档中用于包含有关网页的元数据，在<body>标签之前，通常对于网站中内部进行渲染与处理，通常包含以下内容：

<title>: 定义网页的标题，显示在浏览器标签页上。
<meta>: 提供文档的元数据，比如字符集、作者、描述等。
<link>: 连接外部资源，比如 CSS 文件。
<style>: 内部 CSS 样式。
<script>: 内部 JavaScript 代码或链接到外部 JavaScript 文件。

<head>
...
</head>

2.1 title

tltle是自定义网页栏目显示

<title> 这是我的第一个网站 </title>

效果如下图所示：

2.2 meta标签

meta一般针对于网页页面的元信息，在我的理解就是处理网页内部内容的一个框架，例如网页本身编码形式，网页中索引等。

针对于meta，可以将其比作其他编程语言中的类型，后续所跟charset，name等是他的不同功能呈现方式，选择相应功能后，根据content进行相关参数设定。

<meta charset='UTF-8'> #设置浏览器显示形式

<meta name='keywords' content='关键字,keywords' /> #这个网页的关键字，关于什么

<meta name='description' content='网页的介绍' /> #针对于搜索引擎网页的摘要介绍

<meta http-equiv='refresh' content='5,url' /> #设置间隔5s，跳转至url;
<!-- 如果没有设置url，则默认刷新 -->

3. 文本与图像

HTML中编写主题内容就像写一篇文章，要有标题，正文，美化的图片等等

网页所显示的内容都放在网页的主题标记内，是HTML文件的重点所在

主体标记以body进行声明，以此开始以此结束。

<body>
...
</body>

3.1 标题

HTML文档中包含有各种级别的标题，由<h1>至<h6>由重要性进行排序

h实际上就是headline的简称，方便大家记忆

<html>
<head>
</head>

<body>
<h1>这里是第一级标题</h1>
<h2>这里是第二级标题</h2>
<h3>这里是第三级标题</h3>
<h4>这里是第四级标题</h4>
<h5>这里是第五级标题</h5>
<h6>这里是第六级标题</h6>
</body>

</html>

3.2 文字列表（目录）

文字列表可以有序编排一些信息资源，例如目录等，使得网站内容更加结构化和条理化，方便浏览者更加方便跨界获取信息

3.2.1 无序列表

无序列表使用<ul></ul>标签进行声明，其中对于每一个列表使用<li></li>

<body>
<h1>游戏设计</h1>
<ul>
    <li>项目需求</li>
    <li>内容收集</li>
        <ul> <!-- 列表中也可以嵌套列表 -->
        <li>背景调查</li>
        </ul>
</ul>
</body>

3.2.2 有序列表

有序列表顾名思义列表中的标签都是有次序的，标记为<ol></ol>，每一个列表使用<li></li>

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>

如下图所示，有序列表将文本自动编码

3.3 文本段落

使用标签<p></p>进行声明，paragraph的简称，声明后后序文本为成为一个段落，声明结束后自动换行。

注意在HTML中打若干个空格，实际上只会显示一个空格

<p>一起学习哈哈哈哈哈啊哈哈</p>
<p>学个勾巴</p>

3.4 文本样式与排版

3.4.1 重要文本

文本样式标签跟在段落标签之后

<p><b>粗体文字</b></p>
<p><em>强调文字</em></p>
<p><strong>超级强调文字</strong></p>

3.4.2 倾斜文字

<p><I>斜体字</i></p>

3.4.3 上下标显示

<!-- 上标显示 -->
<p>c=a<sup>2</sup></p>

<!-- 下标显示 -->
<p>c=a<sub>2</sup></p>

3.4.4 换行标记

换行标记是一个单标签<br/>

<body>
我是<br/>一个<br/>大傻子
<body>

3.5 图片

网页中使用的图像可以是GIF，JPEG，MBP，PNG等格式的图像文件

URL(Uniform Resource Locator)，翻译为“统一资源定位器”，网络中的计算机是通过IP地址进行区分，若需要访问某个资源，首先需要定位该计算机，然后获取相应文件。

http://www.baidu.com/pages/computer.html

http:表示协议

//.../:主机名

绝对路径：完整的去描述文件位置的路径就是绝对路径

相对路径：以当前位置作为参考点，相对于目标的位置，例如与html文件同级的情况下，相对路径是image/tp.jpg （image文件夹中的tp图片）；

".."表示上一级目录，"../.."表示上级的上级目录

插入图片的标签为单标记<img>，相关属性下图所示

属性	值	描述
alt	text	图像的文本描述
src	URL	要显示的图像的URL
width	"pixcel"	设置图像宽度
height	"pixels"	设置图像宽度

<body>
<img src='images/picture.jpg' alt='草莓沙拉' width="200">
</body>

4. 超链接

4.1 网页跳转

超链接的文本与图形可以连接到其他页面

超链接标记为<a></a>

在<a>后需要一个载体去接受超链接，可以使用文本也可以使用图片

<a href='www.baidu.com'>百度一下</a> #使用文本进行超链接
<a href='www.baidu.com'><img src='image.jpg'></a> #使用图片进行超链接

在默认状态下，跳转页面会覆盖掉原界面，可以设置新窗口显示超链接页面

<a href='http://www.baidu.com' target='_blank'> new window </a>

4.2 邮箱跳转

使用“mailto”关键字进行声明，点击后用户即可跳转至发送邮箱页面

<a href="mailto":xxxxx@xx.com>邮箱发送</a>

5. 标签总结

标签	效果
<head></head>	渲染
<body></body>	主体
<title></title>	网页标题
<h1></h1>	标题
<p></p>	段落
<img src='ULR' alt=''>	图片
<a href='URL'></a>	超链接
<ol></ol> <li></li>	有序列表
<ul></ul> <li></li>	无序列表

杂七杂八的实验汇总：

<!-- # HB -->
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset='utf-8' />
<title> 这是我的第一个网站 </title>
</head>
<body>
<h1> How can i say </h1>
<ul>
	<li>项目需求</li>
	<li>内容手机</li>
</ul>

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>

<p><i>This is a paragraph of text. It will be displayed with a space before and after it.</i></p>
<p>OKOKOKOKOKOKOK</p>
<h2> OK </h2>
<p>H<sub>2 </p>
<img src='WechatIMG396.jpeg' alt='haha'>
<p> <a href='http://www.baidu.com'>公司简介</a> </p>
<p> <a href='https://shibboleth.nyu.edu/idp/profile/SAML2/Redirect/SSO?execution=e5s1)'><img src='WechatIMG396.jpeg'></a> </p>
<p> <a href='mailto:1173083865@qq.com'>站长信箱</a> </p>
<p> <a href='http://www.baidu.com' target='_blank'> new window </a> </p>

</body>

</html>
	   
	   
<!--meta 设置元属性，例如set的作用-->
<!--“keywords”“description”相当于功能定义，设置元属性的具体内容-->
<!--content表示所包含的内容-->

<!--h1,h2代表标签，重要性程度高低进行排列,字体由大至小进行打印-->
<!--p代表段落-->
<!--相关文本格式化字符查表得到-->

6. 参考资料

《精通HTML5+CSS3+JavaScript网页设计》

蒜蓉大猩猩

关注

14
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
网站开发：XTML+CSS - 网页文档结构

HTML 使用一系列的元素（elements）和标签（tags）来标记不同类型的内容，比如文本、图像、链接、表单、视频等。每个 HTML 标签都有特定的用途，可以用来定义页面的不同部分，如标题、段落、列表、链接、图片等。
复制链接

扫一扫

专栏目录