企业官网建设流程全解析

一、html入门

1.html注释

1)特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。

2)作用：对代码进行解释和说明。(也可用来使某段代码暂时不参与运行)

3)写法：

<!-- 下面的文字只能滚动一次 --> <marquee loop="1">尚硅谷</marquee> <!-- 下面的文字可以无限滚动 --> <marquee>尚硅谷123</marquee>

4)注释不可以嵌套（就近原则）

2.html文档声明

1)作用：告诉浏览器当前网页的版本。

2)写法：<!doctype html>（html5）

并且，html文档声明不限制大小写

其他写法参照w3c官网：https://www.w3.org/QA/2002/04/valid-dtd-list.html。

3.html字符编码

1)计算机对数据的操作：

存储时，对数据进行：编码。

读取时，对数据进行：解码。

2)编码、解码，会遵循一定的规范——字符集

3)字符集的使用原则

原则1：存储时，务必采用合适的字符编码 。 否则：无法存储，数据会丢失！

原则2：存储时采用哪种方式编码 ，读取时就采用哪种方式解码。 否则：数据错乱（乱码）！

5）总结：

平时编写代码时，统一采用UTF-8编码（最稳妥）。

为了让浏览器在渲染html文件时，不犯错误，可以通过meta标签配合charset属性指 定字符编码。

实例：

<head> <meta charset="UTF-8"/> </head>

4.html设置语言

1）主要作用

让浏览器显示对应的翻译提示。

有利于搜索引擎优化。

2）具体写法

<html lang="zh-CN">

3)lang属性的编写规则

1.语言-国家/地区

2.语言-具体种类（不推荐使用）

5.html标准结构

1）结构：

​ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我是一个标题</title> </head> <body> </body> </html> ​

2）输入!，随后回车即可快速生成标准结构。

3）配置V Scode 的内置插件 emmet ，可以对生成结构的属性进行定制。

4）在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标。

五、html基础

1.开发者文档

W3C官网： www.w3c.org

W3School： www.w3school.com.cn

MDN： developer.mozilla.org——平时用的最多

2.排版标签

1） h1最好写一个， h2~h6 能适当多写。

2.）h 1~h6 不能互相嵌套，例如：h1 标签中最好不要写h2 标签了。

3.）p 标签很特殊！它里面不能有：h1~h6 、p、双 div 标签。

3.语义化标签（重点理解）

概念：用特定的标签，去表达特定的含义。

原则：标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要！

举例：对于h1标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。

优势：

1.代码结构清晰可读性强。

2.有利于 SEO（搜索引擎优化）。

3.方便设备解析（如屏幕阅读器、盲人阅读器等）。

4.行内元素与块级元素

1. 块级元素：独占一行（排版标签都是块级元素）。

2. 行内元素：不独占一行

3. 使用原则：

5.常用文本标签

1. 用于包裹：词汇、短语等。

2. 通常写在排版标签里面。

3. 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。

4. 文本标签通常都是行内元素。

6.不常用的文本标签

7.图片标签

1）基本使用

附：10月1日作业