企业官网建设流程全解析

一.背景知识

1）.两位前驱：图灵和冯 诺依曼

2）.计算机的组成（如下图）：

3.两种架构

1）.B/S：无需安装，偶尔更新，不跨平台。（微信）

2）.C/S:无需安装，更新，跨平台。（百度）

4.浏览器（如下图）

5.HTML历史图鉴

6.前端概述

1）.html：结构

2）.css: 表现

3).JavaScript：行为

二.HTML

1.超文本标记语言的国际组织

1).IETF:http://www.ietf.org

2).W3C:http://www.w3.org

3).WHATWF:http://www.whatwg.org

2.入门体验

1).新建文本改后缀为.html

2).源代码

<marquee>内容</marquee>

3.HTML标签属性

1).双标签

起始标签 名 终止标签

<marquee>内容</marquee>

2）单标签

/可省略

<input/>

3).各关系之间可用tab缩近

<marquee> 文本 <input> </marquee> <input>

4.HTML标签属性

1). 如图定义

e.g.

<marquee loop="1" bgcolor="orange"> 文本 </marquee> <input type="password">

2).无名无值

e.g.

<input disabled>

3).注意

a.不同的标签，有不同的属性; 也有一些通用属性(在任何标签内都能写，后面会详细总结)。
属性名、属性值不能乱写，都是W3C规定好的。
b.属性名、属性值，都不区分大小写，但推荐小写。
c.双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
b.标签中不要出现同名属性，否则后写的会失效。
错误示范:

<input type="text" type="password">

4.HTML的基本结构

1).查看具体代码

a.检查：网页渲染的代码

b.查看源代码：原始代码

2).基本结构：

<html> <head> <title>...</title> <body> ...... </body> </html>

5.HTML的注释

1).live sever:一定要使用vs code打开文件夹，可实现自动刷新。

2).注释会被忽略，但不能嵌套

e.g.

<html> <head> <title>注释</title> </head> <body> <marquee loop="1"> 内容 <!--下面的内容是可以滚动的，且只能滚动一次--> <input type="text"> </marquee> <!--下面的内容是不可以滚动的--> <!-- <input type="text"> --> </body> </html>

6.HTML文档说明

1).说明该网页的版本

e.g.

<!DOCTYPE html> <html> <head> <title>注释</title> </head> <body> <marquee loop="1"> 内容 <!--下面的内容是可以滚动的，且只能滚动一次--> <input type="text"> </marquee> <!--下面的内容是不可以滚动的--> <!-- <input type="text"> --> <body> </html>

注意：必须在最开始说明

7.HTML的字符编码

1).存储时，对数据进行:编码。
读取时，对数据进行:解码。

2)原则:

a.原则1: 存储时，务必采用合适的字符编码。
否则:无法存储，数据会丢失!
b.

原则2: 存储时采用哪种方式编码，读取时就采用哪种方式解码。
否则: 数据错乱(乱码)!
例如下面文字中，包含有:中文、英文、泰文、缅甸文

我爱你 I love you! ฉันรักเธอ ကျွန်တော် ချစ်သူ

e.g.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML字符编码</title> </head> <body> <marquee loop="1"> 内容 <!--下面的内容是可以滚动的，且只能滚动一次--> <input type="text"> </marquee> <!--下面的内容是不可以滚动的--> <!-- <input type="text"> --> <body> </html>

8.HTML设置语言

1).写法(语言-国家/地区)，例如:
zh-CN : 中文-中国大陆(简体中文)
zh-TW : 中文-中国台湾(繁体中文)
zh : 中文
en-US : 英语-美国
en-GB : 英语-英国
e.g.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML设置语言</title> </head> <body> <div>weather is good</div> <marquee>weather is good</marquee> <marquee>weather is good</marquee> <body> </html>

9.HTML标准结构

1).回车！即可生成，用ctrl+shift+k快速删除第五行代码

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

2).在文件夹外侧存放facvicon.ico即可定制网站图标（需提前设置emmet)

三.HTML基础

1.开发者文档

W3C官网： www.w3c.org\n\n

W3School： www.w3school.com.cn\n\n

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

2.排版标签

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

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

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

3.语义化标签

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

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

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

3).优势：

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

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

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

e.g.

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML语义化标签</title> </head> <body> <h1>把个人信息“安全堤”筑牢</h1> <div> <h4>2022-6-21 07：34 1347评论</h4> <p>置身移动互联时代，人们在享受智能设备带来便利的同时，也在一些场景中面临个人信息泄露风险。随着时间推移，这样的风险日益呈现出新的表现形式。</p> <p>一些APP声称看视频、玩游戏甚至走路都能赚钱，但用户想提现却难上加难，还容易泄露个人信息；新型不法软件图标透明、没有名称，在手机屏幕上十分隐蔽，不仅不停推送广告，还会收集并转卖用户隐私信息；个人信息安全和隐私保护话题引发关注，正说明其涉及群众切身利益，问题不容小视。</p> </div> </body> </html>

4.块级元素与行内元素

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

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

3).原则:

e.g.

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>块级元素与行级元素</title> </head> <body> <!--块级元素，独占一行--> <marquee>内容12</marquee> <marquee>内容12</marquee> <h1>内容</h1> <h1>内容</h1> <p>内容12</p> <p>内容12</p> <div>内容</div> <div>内容</div> <!--行内元素，不独占一行--> <input type="text"> <input type="text"> <span>内容</span> </body> </html>

5.文件标签（uniform）

e.g.

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>常用文本标签</title> </head> <body> <p> 把个人信息<em>“安全堤”筑牢 </em> </p> <P> <strong>123</strong> </P> <p> 内容：<span>12</span> </p> </body> </html>

6.文件标签（rarely)

e.g.

<html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML_不常用的文本标签</title> </head> <body> <p> 这首<cite>《光辉岁月》</cite>，非常的好听！ </p> <p> <dfn>耗子尾汁</dfn>，是一个网络流行语，意思同<dfn>好自为之</dfn>。 </p> <p> 商品原价：<del>199</del>，限时秒杀：<ins>99</ins> </p> <p> 水的化学方程式是：H<sub>2</sub>O，8的三次方是这么写的：8<sup>3</sup> </p> <p> 等过一段我们学习了JS，你就会发现这段代码很有意思：<code>alert(1)</code> </p> <p> 手机突然提示，<samp>支付宝到账100万元！</samp> </p> <p> 保存的快捷键是：<kbd>ctrl + s</kbd> </p> <p> <abbr title="英雄联盟">LOL</abbr>这个游戏非常好玩 </p> <p> 你是年少的欢喜，这句话反过来念就是：<bdo dir="rtl">你是年少的欢喜</bdo> </p> <p> 等过一段我们学习了JS，我们就知道要这样定义变量了：<code>let <var>a</var> = 1</code> </p> <p> <small>本网站所有资料、图表仅供参考，涉及投资项目所造成的盈亏与本网站无关。</small> </p> <p> 我也买过<b>罗技GPW二代</b>这个鼠标，确实很好用！ </p> <p> 猪头声嘶力竭的喊着：<i>“燕子，没有你我怎么活啊！”</i> </p> <p> 张三把“你好”的英文写成了：<u>heelo</u>，这是不对的！ </p> <p> 屈原曾经说过：<q>路漫漫其修远兮，吾将上下而求索</q> </p> <p> 有一首歌，歌词是这样的： <blockquote>后来，我总算学会了如何去爱；可惜你早已远去消失在人海；后来终于在眼泪中明白，有些人一旦错过就不在；</blockquote> </p> <p> 我们的学校地址是：<address>北京宏福科技园</address> </p> </body> </html>

7.图片标签

1).应用:

e.g.

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>图片标签</title> </head> <body> <img width=200 src="奥特曼.jpg" alt="你相信光吗"> <img width=200 src="奥特曼.jpg" alt="你相信光吗"> </body> </html>

10.1 作业

<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>卡牌排序</title> <link rel="stylesheet" href="style.css"> </head> <style> /*这里修改样式*/ h2{color: darkblue;} h3{color:grey} </style> <body> <main> <h2>梅花</h2> <h3>2~4</h3> <span><img src="images/C2.png" alt="梅花2"width="150" lang="100"></span> <span><img src="images/C3.png" alt="梅花3"width="150" lang="100"></span> <span><img src="images/C4.png" alt="梅花4"width="150" lang="100"></span> <h2>方片</h2> <h3>5~7</h3> <span><img src="images/D5.png" alt="方片5"width="150" lang="100"></span> <span><img src="images/D6.png" alt="方片6"width="150" lang="100"></span> <span><img src="images/D7.png" alt="方片7"width="150" lang="100"></span> <h2>红桃</h2> <h3>8~10</h3> <span><img src="images/H8.png" alt="红桃8"width="150" lang="100"></span> <span><img src="images/H9.png" alt="红桃9"width="150" lang="100"></span> <span><img src="images/H10.png" alt="红桃10"width="150" lang="100"></span> <h2>黑桃</h2> <h3>J~K</h3> <span><img src="images/SJ.png" alt="黑桃J"width="150" lang="100"></span> <span><img src="images/SQ.png" alt="黑桃Q"width="150" lang="100"></span> <span><img src="images/SK.png" alt="黑桃K"width="150" lang="100"></span> <span><img src="images/SA.png" alt="黑桃A"width="150" lang="100"></span> </main> </body> </html>