HTML+CSS+Emmet基础教程：构建现代网页布局

需积分: 12 77 浏览量更新于2024-09-09 收藏 26KB DOCX 举报

本文档主要介绍了HTML、CSS基础知识以及Emmet在开发过程中的应用，旨在帮助读者理解和掌握这三个Web开发核心技术的核心概念。首先，HTML（HyperText Markup Language）是网页的基础，负责构建网页的结构。通过`<!DOCTYPE>`声明，如`<!DOCTYPE html>`，告知浏览器文档类型，确保浏览器以正确的方式解析和展示内容，即使不区分大小写。`<html>`标签是整个文档的容器，而`<body>`标签则是文档的主要部分，用于包含所有可见的内容。 CSS（Cascading Style Sheets）则关注网页的样式，使开发者能够控制文本的格式、布局和外观。`<b>`和`<i>`标签用于设置粗体和斜体效果，`<code>`, `<kbd>`, `<tt>`, `<samp>`, `<var>`等分别用于表示计算机代码、键盘输入、打字机风格文本和变量。`<sub>`和`<sup>`用于上标和下标，`<big>`和`<small>`则调整字体大小。`<pre>`元素用于预格式化文本，保留原始的空格和换行，`<del>`和`<ins>`用于标记删除和插入的内容。在文档引用方面，`<abbr>`定义缩写，`<address>`用于提供作者或联系信息，`<bdo>`控制文字的方向，`<blockquote>`表示长篇引用，`<q>`用于短引用，`<cite>`标识作品标题，`<dfn>`定义特殊术语，这些都是增强文档可读性和规范性的元素。链接是HTML的重要组成部分，包括链接的样式和属性。未访问过的链接通常显示为蓝色带下划线，访问过的链接为紫色带下划线，鼠标悬停或点击时变为红色。`href`属性指定链接的目标，`target`属性控制新窗口打开还是在当前窗口显示。在图片链接中，`alt`属性是必不可少的，为图像提供替代文本，`src`属性则存放图像的URL。 HTML头部区域（<head>）包含元数据和脚本，如`<title>`定义文档标题，`<base>`设置所有链接的默认地址，`<link>`定义文档与外部资源的关系。此外，`<style>`标签用于嵌入内联样式，`<meta>`用于添加元数据，`<script>`定义外部或内部JavaScript代码，`<noscript>`处理不支持JavaScript的浏览器，`<base>`标签则统一文档中的URL引用。 Emmet是一种快速编写HTML和CSS的工具，它使用简洁的语法来提升开发效率。通过熟练运用Emmet，开发者可以编写更简洁、易读且高效的代码，极大地优化了网页开发流程。本文档涵盖了HTML基础结构、CSS样式应用、链接和元数据管理，以及Emmet工具在提高开发效率方面的实用技巧。学习和掌握这些内容对于理解Web开发语言至关重要，有助于创建出美观、功能丰富的网站。

网页目前的模式是 html+css+javascript 。 html 是网页的结构， CSS 是网页的样式，

javascript 是行为

<!DOCTYPE>声明有助于浏览器中正确显示网页。不区分大小写

<!DOCTYPE html>

<html>定义 HTML 文档

<body> 定义文档的主体

<b>标签表示输出文本进行格式为：粗体

<i>标签格式为：

斜体

<code>电脑自动输出<kbd>键盘输入<tt>打字机文本

<samp>计算机代码样本<var>计算机变量

<sub>下标

<sup>上标

<big>字体放大

<small>字体缩小

<pre>预格式文本，文本中打入空格即空格，换行即换行

<del><ins>删除和插入字体效果 blue

HTML 引文, 引用, 及标签定义

<abbr>定义缩写

<address> 定义地址

<bdo> 定义文字方向

<blockquote> 定义长的引用

<q> 定义短的引用语

<cite> 定义作品的标题

<dfn> 定义特殊术语或短语

链接

一个未访问过的链接显示为蓝色字体并带有下划线

访问过的链接显示为紫色并带上下划线

点击链接时，链接显示为红色并带上下划线

href 属性（Hypertext Reference）描述了链接的目标

Target 属性定义被链接的文档在何处显示

图片链接中，alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。src 指

"source"。源属性的值是图像的 URL 地址。（URL 指 Uniform Resource Locator）

HTML 头部 <head>

<head> 元素包含了所有的头部标签元素。在 <head> 元素中你可以插入脚本

（scripts）, 样式文件（CSS），及各种 meta 信息。

可以添加在头部区域的元素标签为 : <title>, <style>, <meta>, <link>,

<title> - 定义了 HTML 文档的标题

使用 <title> 标签定义 HTML 文档的标题，浏览器工具栏的标题，收藏夹中的标题，

搜索引擎结果页面的标题

<base> - 定义了所有链接的 URL

使用 <base> 定义页面中所有链接默认的链接目标地址。

通常标签 <strong> 替换加粗标签

<b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈

现的文本是重要的，所以要突出显示。现今所

有主要浏览器都能渲染各种效果的字体。不过

未来浏览器可能会支持更好的渲染效果。

下载后可阅读完整内容，剩余4页未读，立即下载

GravityQ

粉丝: 6
资源: 1

HTML+CSS+Emmet基础教程：构建现代网页布局

html5和css笔记.docx

PC端html与css学习笔记.pdf

CSS备课笔记：Emmet语法与快速生成HTML/CSS技巧

CSS学习笔记：EMMET语法与选择器详解

使用html和css实现康奈尔笔记(5R笔记)模板

本人纯手敲的CSS笔记

web开发-css完整笔记

HTML.doc HTML的课堂笔记

emmet-monaco-es:Emmet对摩纳哥编辑器的支持

css复习加学习加升值.pdf

最新资源