网页设计01

HTML 简介
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>
```
实例解析
![](/media/202411/2024-11-08_163154_3715840.12016177707602582.png)
```
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
```
<font color='red'>注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。</font>
![](/media/202411/2024-11-08_163259_5037990.6275056166974677.png)

## 什么是 HTML?
HTML 是用来描述网页的一种语言。
```html
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
```
## HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
```html
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
```

## HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
```html
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>
```
## Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：
![](/media/202411/2024-11-08_163731_6094750.19548549728913955.png)

## HTML 网页结构
下面是一个可视化的HTML页面结构：
<div style="width:99%;border:1px solid grey;padding:3px;margin:0;background-color:#ddd">&lt;html&gt;
<div style="width:90%;border:1px solid grey;padding:3px;margin:20px">&lt;head&gt;
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;title&gt;页面标题&lt;/title&gt;
</div>
&lt;/head&gt;
</div>
<div style="width:90%;border:1px solid grey;padding:3px;margin:20px;background-color:#fff">&lt;body&gt;
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;h1&gt;这是一个标题&lt;/h1&gt;</div>
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;p&gt;这是一个段落。&lt;/p&gt;</div>
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;p&gt;这是另外一个段落。&lt;/p&gt;</div>
&lt;/body&gt;
</div>
&lt;/html&gt;
</div>
<img decoding="async" src="https://www.runoob.com/images/lamp.jpg" alt="Note" style="height:32px;width:32px">只有 <body> 区域 (白色部分) 才会在浏览器中显示。

## <!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
```
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
```
通用声明
```
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整网页声明类型 DOCTYPE 参考手册。
```

## 中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

HTML 实例
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>
```
## HTML 标题
```
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
实例
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
```

## HTML 段落
```
HTML 段落是通过标签 <p> 来定义的。

实例
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
```

## HTML 链接
```
HTML 链接是通过标签 <a> 来定义的。

实例
<a href="https://www.runoob.com">这是一个链接</a>

提示:在 href 属性中指定链接的地址。
```

## HTML 图像
```
HTML 图像是通过标签 <img> 来定义的.

实例

注意： 图像的名称和尺寸是以属性的形式提供的。
```

## HTML 元素
```
|开始标签 *|元素内容|结束标签 *|
<p>	这是一个段落	</p>
<a href="default.htm">	这是一个链接	</a>
<br>	换行	 
```
*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

## HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。

## 嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
HTML 文档由相互嵌套的 HTML 元素构成。
HTML 文档实例
```html
<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>
```
以上实例包含了三个 HTML 元素。

## HTML 实例解析
```
<p> 元素:

<p>这是第一个段落。</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: 这是第一个段落。

<body> 元素:

<body>
<p>这是第一个段落。</p>
</body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
元素内容是另一个 HTML 元素（body 元素）。
```

## 不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
```
<p>这是一个段落
<p>这是一个段落
```
以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

## HTML 属性参考手册
查看完整的HTML属性列表: HTML 标签参考手册。
下面列出了适用于大多数 HTML 元素的属性：

![](/media/202411/2024-11-08_165246_6241950.10812855261976395.png)
```html
<div id="header">This is a header</div>
class: 给元素指定一个或多个类名，方便通过 CSS 或 JavaScript 操作。

<p class="text-muted">This is a paragraph.</p>
style: 直接为元素定义 CSS 样式。

<span style="color: red;">This text is red.</span>
href: 用于 <a> 标签，指定链接目标。

<a href="https://www.example.com">Visit Example</a>
src: 用于 <img> 和 <script> 标签，指定资源的路径。

<img src="image.jpg" alt="Description">
alt: 用于 <img> 标签，提供图片的替代文本。

<img src="logo.png" alt="Company Logo">
title: 提供关于元素的额外信息，通常在鼠标悬停时显示。

<button title="Click me">Submit</button>
name: 在 <input>, <form>, <select> 等表单元素中使用，定义元素的名称。

<input type="text" name="username">
value: 定义表单元素的值。

<input type="text" value="Default text">
target: 用于 <a> 标签，指定链接的打开方式（如 _blank 在新窗口中打开）。

<a href="https://www.example.com" target="_blank" rel="noopener">Open in new tab</a>
type: 指定表单元素的类型（如 text, password, submit）。

<input type="password" name="password">
placeholder: 为 <input> 和 <textarea> 提供一个占位符文本。

<input type="text" placeholder="Enter your name">
```

## 课堂练习
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    
    <script type="text/javascript" src=""></script>
    <style>
        /* styles.css */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

.container {
            max-width: 800px;
            margin: 0 auto; /** 外边距 一个参数 和四个参数一样 上右下左 两个参数：上下 左右 */
            padding: 20px;
        }

header {
            background-color: #fff;
            text-align: center;
            padding: 50px 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /** alpha 透明度 */
        }

.profile-image {
           /*width: 50px;*/
            height: 100px;
            border-radius: 50%;
            margin-bottom: 20px;
        }

h1, h2, h3 {
            margin: 0;
        }

h1 {
            font-size: 2.5em;
            color: #333;
        }

h2 {
            font-size: 1.8em;
            margin-top: 20px;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
        }

p {
            font-size: 1.2em;
            line-height: 1.6;
        }

.skills ul {
            list-style: none;
            padding: 0;
        }

.skills ul li {
            display: inline-block;
            background-color: #e0e0e0;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 5px;
            font-size: 1.1em;
        }

.projects .project {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px 0;
            position: relative;
            bottom: 0;
            width: 100%;
        }

</style>
</head>
<body>
<header>
    <div class="container">
        <img src="https://img0.baidu.com/it/u=2735904299,1592700273&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="个人头像" class="profile-image">
        <h1>张三</h1>
        <p>前端开发工程师</p>
    </div>
</header>

<section class="about">
    <div class="container">
        <h2>关于我</h2>
        <p>你好，我是张三，一名前端开发工程师。我热爱编程和技术，喜欢探索新的技术和工具。我在多个项目中积累了丰富的经验，擅长使用HTML、CSS和JavaScript。</p>
    </div>
</section>

<section class="skills">
    <div class="container">
        <h2>技能</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>React</li>
            <li>Vue.js</li>
        </ul>
    </div>
</section>

<section class="projects">
    <div class="container">
        <h2>项目</h2>
        <div class="project">
            <h3>项目一</h3>
            <p>这是一个描述项目一的简短介绍。</p>
        </div>
        <div class="project">
            <h3>项目二</h3>
            <p>这是一个描述项目二的简短介绍。</p>
        </div>
    </div>
</section>

```