HTML超文本标记语言入门指南

需积分: 10 191 浏览量更新于2024-07-19 1 收藏 902KB PDF 举报

"HTML关于前端学习" HTML（HyperText Markup Language）是前端开发的基础，它是一种用于创建网页的标准标记语言。HTML通过一系列的标签来描述网页的结构和内容，这些标签通常以尖括号包围，例如`<html>`、`<head>`、`<body>`等。HTML文档由开始标签`<html>`和结束标签`</html>`包围，中间包含了文档的头部和主体部分。 **一、HTML标签** HTML标签通常成对出现，如`<tag>`和`</tag>`，它们定义了网页的不同部分和元素。学习HTML时，了解和掌握这些标签的用法至关重要。例如，`<head>`标签包含文档的元数据，如标题、样式表引用和脚本链接；`<body>`标签则包含网页的实际内容，如文本、图像、链接等。`<title>`标签定义了浏览器顶部显示的页面标题，而`<meta>`标签用于设置文档的元信息，如字符编码（`charset=utf-8`）。 **二、HTML文档类型（DOCTYPE）** DOCTYPE声明位于HTML文档的开头，它告诉浏览器文档遵循的HTML或XHTML规范。例如，`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`声明了文档是XHTML 1.0过渡型。DOCTYPE有三种类型：严格型（strict.dtd）、过渡型（transitional.dtd）和框架集型（frameset.dtd）。对于初学者，过渡型通常足够使用，因为它允许使用一些传统但不推荐的HTML元素和属性。 **三、HTML编辑器** 在学习和编写HTML时，选择合适的编辑器有助于提高效率。常见的HTML编辑器有： 1. 记事本（Notepad）：简单的文本编辑器，适用于基础学习。 2. EditPlus：功能丰富的文本编辑器，支持代码高亮和自动完成。 3. Dreamweaver：Adobe出品的专业级网页设计工具，提供可视化编辑和代码编辑模式。 4. WebStorm：JetBrains公司的强大的Web开发IDE，支持HTML、CSS、JavaScript等，适合专业开发。 **四、HTML文档结构** 一个基本的HTML文档结构如下： ```html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>HTML基础知识</title> </head> <body>  </body> </html> ``` 在这个结构中，`<!DOCTYPE html>`声明了文档类型为HTML5，`<html>`是文档的根元素，`<head>`包含文档头部信息，`<body>`包含实际的网页内容。`<meta>`标签设置了字符编码，确保不同语言的字符都能正确显示。掌握HTML的基础知识是成为一名前端开发者的第一步。随着学习深入，你将学习到更多高级概念，如表格、列表、链接、图像、表单、框架以及如何使用CSS和JavaScript增强网页交互性和视觉效果。继续学习，你就能创建出功能丰富、交互性强的网页了。

从一张页面链接到另一张页面或在当前在当前页面从一个链接跳到相应的锚点

链接跳转：

<a href="chapter1.html">点击跳转到 chapter1.html</a>

Href 规定链接指向的地址的 URL，此处为相对地址

<a href="chapter1.html" target="_blank">点击跳转到 chapter1.html</a>

 _self，在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定

 _blank 新浏览器窗口中打开链接文件

 _top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架

 _parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链

接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self 参数一

样。

 Framename

框架相关，后面会讲到

<a href="chapter1.html">点击跳转到 chapter1.html</a>

<a href="chapter1.html" target="_blank">点击跳转到 chapter1.html</a>

显示为：

多个 a 标签内容若不足一行，不会换行，如果想让他们换行，可以使用换行标签<br/>

锚点

<body>

<p>春宵一颗值千金，花有清香月有阴。</p><p>春宵一颗值千金，</p><p>花有清香月有阴。</p>

<a href="chapter1.html">点击跳转到 chapter1.html</a><br/>

<!--这是 HTML 中的注释，不会

显示在网页上，此处的 <br/>表示换行-->

<a href="chapter1.html" target="_blank">点击跳转到 chapter1.html</a><br/>

<p>春宵一刻值千金，</p>

<p>花有清香月有阴。</p>

<p>歌管楼台声细细，</p>

<p>秋千院落夜沉沉。</p>

<p>春宵一刻值千金，</p>

<p>花有清香月有阴。</p>

<p>歌管楼台声细细，</p>

<p>秋千院落夜沉沉。</p>

剩余19页未读，继续阅读

qq_37968406

粉丝: 0
资源: 1

HTML超文本标记语言入门指南

web前端笔记

大四学生前端实习的第二周周记

WEB前端学习总结

前端学习HTML与CSS

前端学习路线.html

前端学习：Html.zip

2018最新HTML5前端学习路线图

HTML前端学习源代码css js

javaweb 前端 html学习笔记

web前端HTML学习笔记

最新资源