学习HTML＜一＞-CSDN博客

本文链接：https://blog.csdn.net/m0_46331585/article/details/119118563

任务1

软件开发

前端：html、css、javascript、vue
后端：java、python、php、c++

任务2

HTML(解释性语言)

HTML的发展史
- html4
- html5
运行环境(浏览器、现代浏览器)
- Googel Chrome
- Mozilla Firefox
- Microsoft Edge
开发工具
- VScode
- Hbuilder
- 等等
注释
- 从上到下一行一行渲染解释执行。
- 能在浏览器中查看源代码和审查元素。
- 标签一般是成对出现的，也有自封闭标签。

任务3

HTML的基础结构

基本结构
```
<html>
    <head>
       <title>网页标题</title>
    </head>
    <body>网页内容</body>
</html>
```
- 掌握<!DOCTYPE>的作用与意义
  
  它声明了这是html5的文档规范，加上了<!DOCTYPE html>之后会让浏览器强制使用w3c标准来解析和渲染页面。如果不加上这一行的话，浏览器就会按照自己的标准进行解析和渲染，可能会导致页面的元素或布局出现问题。
- 掌握<html></html>、<head></head>、<body></body>之间的关系。
- 掌握<meat>(在<head>与</head>之间，并且使用 meta 设置编码要先于 title 标签)
  - 使用 charset 属性设置页码编码
```
<meta charset="utf-8" />
```
  - 能够使用keyword 属性设置搜索关键字 (搜索引擎)
```
<meta name="keywords" content="购物，买衣服，买球鞋，买啊买卖" />
```
  - 能够使用description 属性设置页面描述信息 (搜索引擎)
```
<meat name="description" content="买东西的地方，我要东西，购买新的家具" />
```
  - 能够使用 http-equiv 属性和content 属性设置页面自动刷新和跳转
```
<meta http-equiv="refresh" content="3;url=https://www.baidu.com" />
```
  - 能够使用 <link> 设置浏览器标题栏小图标
```
<link href="img/logo.png" rel="icon" />
```
  - 能够为HTML代码添加注释
```

```
注释
- 在Hbuilder中快捷注释的方法为"Ctri+/"。
- 被注释掉的部分不会被解释执行，但依旧会发到浏览器上面。
- “utf-8'被成为万国码，他支持很多国家的各种语言。
- <link>加载本网页之外的内容。

任务四

块标签

标题标签(从大到小)
```
<h1>标题1</h1>
<h2>标题2</h2>
```
段落标签
- 段落标签中不能插入 div 标签，否则会将一个<p></p> 拆分成两个段落
- 知道段落前后有空白行(默认效果)
```
<p>西安的油泼面好吃</p>
<p>西安的油泼面好吃</p>
```
水平线标签（宽度(width)、排列方式(align)、高度·(size)、阴影(noshade)）（是自封闭标签）
```
<hr width="500" align="center" size="7" noshade="noshade"/>
```
有序列表（列表项目的风格(list-style)、可嵌套、学会看注释、type可设置列表前计数模式）
```
<ol>
     <li>出生</li>
     <li>成长</li>
     <li>死亡</li>
</ol>
```

无序列表（列表项目的风格(list-style)、可嵌套，学会看注释、type可设置列表前的点）

<ul type="square">
    <li>西安</li>
       <ol type="A">
        <li><span style="color:red;font: '微软雅黑' ;font-size: 30px;">油面</span></li>
                <li>羊肉</li>
                <li>钟楼</li>
       </ol>
    <li>兰州</li>
    <li>北京</li>
</ul>

描述标签（ dl为描述标签、dt描述标签的标题、dd描述标签的详细内容。用于产品介绍，合同条款、

标签的题目内容都不仅仅局限与文字）
```
<dl>
    <dt><img src="img/home.png"></dt>
    <dd>描述标签的详细信息</dd>
    <dd>描述标签的详细信息</dd>
    
</dl>
```

div标签

div标签是个容器标签。
div标签里面可以放行标签和块标签。而<p></p>只能放行标签。
div表示页面上的一个分区。

div呈现的效果可以由css来设置。一些简单的风格也可以由style来设置

<div style="width: 300px;height: 300px;background-color: red;">
        <p>
            西安油泼面
        </p>
        <p>
            西安油泼面
         </p>
         <ul>
            <li>西安油泼面</li>
            <li>西安油泼面</li>
        </ul>
 </div>

任务五

行标签

span标签（span标签属于容器标签，只针对一行，用来修饰文本）
```
<span style="color: red;font-size: 40px;">油泼面</span>
```
换行标签（源代码中的回车换行在浏览器中不会换行、与段落标签（有空白）效果的差别）
```
<br />
```

任务六

nginx服务器

进入nginx目录下:
```
cd nginx-1.21.1
```
在命令提示符中启动nginx:(启动后可以在任务管理器中查看到两个nginx进程)
```
start nginx
```
修改配置后重新加载生效
```
nginx -s reload
```
有序退出
```
nginx -s quit
```
快速关闭
```
nginx -s stop
```
结束所有进程(tasklist 、taskkill 、start 都是 Windows 自带的命令，不是 nginx 提供的)
- 因为多次启动 nginx 导致启动了多个 nginx 进程，此时需要列出这些进程相关的信息:
```
tasklist /fi "imagename eq nginx.exe"
```
- 如果需要将这些进程全部杀死，可以使用以下命令:
```
taskkill /f /f /im nginx.exe
```