网页设计 &
网站制作
检查清单

    • 博客
    • info@onmascout.de
    • +49 8231 9595990
    whatsapp
    Skype

    博客

    如何创建 HTML 页面

    创建HTML页面

    如果您想创建自己的网页, 您必须了解 HTML. This article explains how to create an HTML page. 还, 您将学习如何创建 xml 站点地图以及如何添加图片和链接. 创建 xml 站点地图也很重要, 这可以帮助您组织您的网站并增加您的流量. 下一步是选择模板.

    Creating a html page

    HTML 是一种标记语言. 网页的每个元素都由一个标签表示. 标记由尖括号标识, 每个元素都有一个或多个标签. 有些元素只需要一个标签; 其他人可能需要两个. 开始和结束标签有一个正斜杠 (/). 例如, 段落元素由 p 标签表示. 开始和结束标记之间的文本是段落文本.

    创建 HTML 文档, 您将需要使用文本编辑器. 大多数计算机默认都有文本编辑器. Windows 用户将使用 Internet Explorer, Mac 用户可以使用 TextEdit. 您可以安装精美的文本编辑器来创建具有专业外观的网页, 但是对于您的第一个 HTML 页面, 这不是必需的. 您还可以使用简单的文本编辑器和任何网络浏览器. 如果您不确定要使用哪个程序, 尝试下载免费的 HTML 编辑器.

    html页面有两个主要部分: 身体和头部. 正文部分包含网站的实际内容, 而 head 部分用于标题和元信息. 主体包含所有其他元素, 包括图像和其他图形. 标题部分是放置导航链接的地方. 写完正文后, 您已准备好插入文档的内容. 确保使用 body 和 head 元素以确保每个人都可以访问您的网站.

    Creating a xml sitemap

    If you have an HTML page, 您可能想要创建一个 XML 站点地图来帮助搜索引擎抓取您的网站. 虽然这不会影响你的搜索排名, 它将帮助搜索引擎了解您的内容并调整其抓取速度. 这边走, 您的网站将在搜索引擎结果中更加明显. 以下是一些简单的入门步骤:

    创建 HTML 站点地图很容易. 您所要做的就是制作一个简单的网站页面表格, 带有指向每个页面的链接. 然后在页眉或页脚中链接到该站点地图页面. 这边走, 无论您的网站有多少页面, 人们可以轻松地浏览它们. 而且, 您无需提交 SEO 即可创建站点地图.

    一旦您的 HTML 页面上线, 将其提交到 Google Search Console. 您可以使用任何文件扩展名并命名您的 XML 站点地图. 您可以将 XML 站点地图提交给 Google, 但这不是必需的. Google 的爬虫通常很擅长发现新内容, 而且您无需向他们提交站点地图. 您也可以将其提交给其他搜索引擎, 但这并不能保证您会被 Google 发现.

    无需将 XML 站点地图添加到您的网页, 但它会增加你网站的搜索引擎优化. 搜索引擎使用站点地图来帮助他们索引未直接链接到网页的页面. 站点地图还有助于提高富媒体内容的可访问性. 向您的网站添加站点地图有助于让搜索引擎机器人更容易访问您的网站.

    Adding a picture

    In HTML, 您可以使用 img 标签将图像添加到页面. 此标签仅包含图像及其属性; 它不需要结束标签. 此图像标记应插入 HTML 文档的正文部分. 除了图片的宽高, 您应该包含一个描述图片的 alt 属性. alt 标签应该写得好像你正在为一个看不到它的人写描述.

    在 HTML 文档中添加图片需要一些 CSS 和 HTML 知识. 图像大小和分辨率是要考虑的两个最重要的因素. 图像的大小将决定它如何适合文档的内容. 如果您希望使用不同的分辨率或纵横比, 您也可以尝试调整图像大小. 然而, 请记住,缩放并不总是像您期望的那样工作.

    调整图像大小的一个好的经验法则是增加其宽度. 宽度应至少比高度小一个像素. 如果图像太小而无法显示, 你可以添加一个边框, 然后调整它以适合图像大小. 您还可以通过将图像添加到边框属性来调整图像的边框. 边框粗细为默认值, 但您可以将其设置为任何值. 确保图像具有 src 属性.

    Adding a link

    You can add a link in HTML to your document using an a> 带有 href 属性的标签. 这将为文档创建一个书签并在新选项卡中打开它. 您还可以使用 href 属性将图像插入到文档中. 您还可以使用带有 JavaScript 代码的链接将 HTML 按钮转换为链接. 一旦你完成了这个, 您可以使用 CSS 或 JavaScript 代码设置链接样式.

    链接是从一个 Web 资源到另一个 Web 资源的连接. 它由两端组成, 源锚点和目标锚点. 链接可以是从图像到文本文件的任何内容. 大多数社交网站和网站使用链接将用户引导至特定 URL. HTML 也可用于指定链接的位置. 它是’ 属性允许您将代码元素链接到 URL.

    设计链接时, 确保考虑访问者将如何使用内容. 链接文本应该是描述性的, 这样他们就会确切地知道他们应该期待什么. 重复相同的 URL 对屏幕阅读器来说是丑陋的, 它没有给他们任何有用的信息. 屏幕阅读器还通过将链接设置为不同的样式或下划线来告诉用户何时存在链接. 这样, 他们可以轻松找到所需的信息.

    Adding a table

    Adding a table to an HTML page is simple, 但是在你做之前你应该考虑一些事情. 桌子的背景颜色对于吸引访客的眼球和吸引对重要信息的注意至关重要. 您可以使用十六进制颜色代码或颜色名称为表格的标题元素和数据元素设置不同的颜色. 无论哪种方式, 您的桌子将很容易看到.

    您可以使用 td 元素添加表头和表数据, 它定义了个人 “盒子” 对于内容. 添加表头是在网页上显示数据的第一步, 如果你愿意,你应该添加第一个. 一个表格也应该有三个行标题. 一个标题应该是空的. 如果您的表有列, 您还应该为每列创建行标题.

    您还可以在表格中添加标题. 标题是描述表格用途的可选元素. 字幕也有助于辅助功能. 该表还可以包含描述数据组的单元格. 最后, 您可以添加 thead 元素来定义一组行和列. 您可以同时或单独使用这两个元素. 您甚至可以组合使用它们, 但标题是最重要的.

    Adding a div

    Adding a div to an HTML file allows you to add a section of your webpage without re-writing the whole page. div 元素是一个特殊的文本容器, 图片, 和其他元素. 您可以将其命名为任何您喜欢的名称并更改其属性以满足您的需要. 您还可以添加类或边距以在 div 和页面上的其他元素之间创建空间.

    您还可以使用 innerHTML 属性在 div 中插入代码. 此方法接受包含在字符串中的代码, 如果它不在 div 内, 内容将被删除. 您应该避免以这种方式将代码插入 div, 因为它可能会使您的网站暴露于跨站点脚本漏洞. 如果您使用的是 JavaScript 等脚本语言, 您可以使用 innerHTML 属性.

    div 是一个基本的 HTML 标记,用于对文档中的代码进行分组. 它可以包含一个段落, 块引用, 图片, 声音的, 甚至是标题. 它的位置允许您将统一的样式和语言应用于页面的不同部分. Div 最适合用于标记连续元素组共有的语义. 当你想为一个部分添加样式而不需要重写整个页面时,应该使用 div.

    我们的视频
    联系信息