HTML入门教程：构建静态网页

需积分: 0 93 浏览量更新于2024-08-04 收藏 68KB DOCX 举报

"html静态网页设计代码" HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它是构建互联网页面的基础。在HTML静态网页设计中，我们主要关注的是内容的结构和呈现方式，而不是动态功能。以下是一些核心知识点： 1. HTML基本结构：HTML文档通常以`<!DOCTYPE html>`开头，表明文档类型为HTML5。接着是`<html>`元素，它是整个文档的根元素。`<head>`包含元数据，如字符集设置（`<meta charset="utf-8">`）和页面标题（`<title>`），而`<body>`则包含了页面可见的内容。 2. 常用HTML标签： - `<h1>`至`<h6>`用于定义标题，`<h1>`最大，`<h6>`最小。 - `<p>`表示段落。 - `<b>`和`<strong>`用于加粗文字，但`<strong>`更强调语义。 - `<i>`用于斜体，`<em>`则强调语义。 - `<br/>`插入换行。 - ` `表示非中断空格。 - `<img>`插入图像，`src`指定图像源，`alt`提供替代文本，`title`为鼠标悬停时的提示文本。 - `<a>`创建超链接，`href`指定链接地址，`target`决定链接在何处打开，如`_blank`为新窗口。 3. CSS（Cascading Style Sheets）样式： - 内联样式：直接在HTML元素中使用`style`属性定义样式。 - 内部样式：在`<head>`中的`<style>`标签内定义样式，应用于整个文档。 4. CSS选择器： - 标签选择器：根据HTML标签名称选择元素，如`p {color: red;}`将所有段落设为红色。 - 类（class）选择器：使用`.`前缀，如`.color1 {color: blue;}`，在HTML中通过`class="color1"`引用，可同时应用多个类。 - ID选择器：使用`#`前缀，如`#header {background-color: gray;}`，ID唯一，只能在一个元素上使用，通过`id="header"`引用。 5. CSS伪类选择器： - `:hover`：当鼠标悬停在元素上时应用的样式，如`a:hover {color: yellow;}`。了解这些基本概念后，你可以开始创建简单的HTML静态网页。随着技能的提升，可以进一步学习CSS布局、响应式设计、JavaScript等，以实现更复杂的功能和交互效果。记住，良好的代码结构和语义化HTML对SEO（搜索引擎优化）和无障碍访问至关重要。在实践中不断练习，你将逐渐掌握静态网页设计的精髓。

第一周：HTML 写静态网页

一、HTML 理论介绍及常用格式

1.HTML 主体格式基本结构

<!DOCTYPE html> <html> <head> <mate charset=”utf-8″/> <title>标题</title> </head>

解说：整个 HTML 格式分为两大部分，一个是 head 部分，一个是 body 部分，其中 head

部分是用于书写网页样式，而 body 部分用于书写网页主题

2.常用标签：

标题标记

… <h6></h6>

<p></p>段落标签

<b></b> <strong></strong>加粗

<i></i>倾斜

<br/>换行

 空格

<img src=”” alt=”” title=””/> 图片【gif，png，jpg】src:图片的链接地址 alt：图片加载失败

的时候，在图片原本的位置显示的提示文本 title：鼠标悬停的时候，显示的提示文本

<a href=”” target=””></a> 超链接 href：链接地址 target：打开新网页的打开方式，默认是

在本页面打开

<div></div> 盒子

3.css 样式：

内联样式： <标记 style=”属性 1：属性值 1；属性 2：属性值 2；…”></标记> 内部样式：

在 head 中添加<style></style>

4.选择器：（1）标签选择器：在<>中的标记都可以作为标签选择器语法： <style> 标记

{ 属性 1：属性值 1；属性 2：属性值 2； } </style> （2）class 选择器：必须在 style 中

进行声明，在标签中进行引用，声明的时候使用“.”进行声明，多个 class 选择器可以同时作

用于一个标记。语法： <style> .color1{ 属性 1：属性值 1；属性 2：属性值 2； } .color2{ 属

性 1：属性值 1；属性 2：属性值 2； } </style> <p class= “color1 color2”>M</p> id 选择

器：必须在 style 中进行声明，在标签中进行引用，声明的时候使用“#”进行声明，他是唯一

的，取名的时候不能使用关键字语法： <style> #color1{ 属性 1：属性值 1；属性 2：属

性值 2； } #color2{ 属性1：属性值1；属性 2：属性值 2； } </style> <p id= “color1”>M</p>

:hover 伪类选择器，表示鼠标经过事件包含选择器：必须要有包含的关系比如：.box p

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

老了敲不动了

粉丝: 87
资源: 4288

HTML入门教程：构建静态网页

大学生静态网页设计期末作业蛋糕店主题静态网页大作业HTML源码.zip

静态网页设计期末作业二十四节气HTML静态网页源码.zip

HTML静态网页的设计 html静态网页设计含代码 html静态网页设计采用的外部样式来设计贵美商城网站 静态网页设计及实例

静态网页设计代码

山东菏泽家乡网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

html静态网页设计含代码

网上花店网页代码 html静态花店网页设计制作 dw静态鲜花网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

葫芦娃外文静态网页设计代码包（HTML/CSS）

html网页设计与制作：基于html设计整套招聘网站求职前端模板页面 静态网页HTML代码 学生网页课程设计期末作业下载

css+html静态网页实现代码防网页

最新资源

HTML静态网页的设计 html静态网页设计含代码 html静态网页设计采用的外部样式来设计贵美商城网站静态网页设计及实例

html网页设计与制作：基于html设计整套招聘网站求职前端模板页面静态网页HTML代码学生网页课程设计期末作业下载