企业官网建设流程全解析

一.基本结构

<html>

<head></head>

<body></body>

</html>

在<head>与</head>之间可以补充<title></title>

<body></body>之间补充内容（内容只能补充在body间而不是head中）

快速生成标准格式：创建html文件后首行输入英文！，后多于内容使用快捷键ctrl+shift+k删除

首行的DOCTYPE html作用是告诉浏览器当前版本（默认都是html5）

二.快捷键

ctrl+s 快速保存

ctrl+z 撤销

ctrl+y 恢复

ctrl+ / 单行注释（注释是<!-- -->）

三.设置语言，字符编码等

lang=...（en是英语，zh-cn是简中）

字符编码流程有编码与解码，编码不可以随意变换，否则会导致内容丢失，解码可以。默认都使用UTF-8

四.排版标签

<h1></h1> <p></p> <div><div>等 其中有优先级等 h1h2h3h4等 h1的语义最高 p是指一段段落 div则是指整合在一起，没什么大的意义。p可以存在多个，但是h1等不能重复

五.块内元素与行内元素

块级元素独占一行（有p，div，h等） 行内元素不独占一行（目前只存在input（input只用写一个）与span）（input type=“text”）

规则1：块级元素中能写行内元素和块级元素（基本什么都能写）

规则2：块级元素中能写行内元素，不能写块级元素

特殊规则：h1 - h6 不能相互嵌套

特殊规则：p标签中不能写块元素（但p实际上还是块内元素）

六.favicon.ico图片可配置网站图标，需要放在代码文件中，同级关系

七.常用的文本标签

em，strong（两者基本上没有什么区别 前者是斜体 后者是加粗）span（组合的效果和div差不多？）

八.不常用的文本标签

九.图片标签

不同于上方的favicon.ico图片 这个与文件夹不是同级的关系 而是放到文化夹中

<img width="" src="" alt="">src为图片的名字 alt则是自定义一段话 当图片无法正常显示的时候alt设置的话则会显示

十.作业

<!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>

*{

text-align: center;

}

body {

margin: 0;

padding: 30px;

background-color: whitesmoke;

color: black;

font-family: "Microsoft YaHei", sans-serif;

font-size: 18px;

line-height: 1.8;

}

</style>

<body>

<main>

<h2>梅花</h2>

<h3>2~4</h3>

<span><img width="100" height="150" src="C2.png" alt="梅花2"></span>

<span><img width="100" height="150" src="C3.png" alt="梅花3"></span>

<span><img width="100" height="150" src="C4.png" alt="梅花4"></span>

<h2>方片</h2>

<p>5-7</p>

<span><img width="100" height="150" src="D5.png" alt="方片5"></span>

<span><img width="100" height="150" src="D6.png" alt="方片6"></span>

<span><img width="100" height="150" src="D7.png" alt="方片7"></span>

<h2>红桃</h2>

<p>8-10</p>

<span><img width="100" height="150" src="H8.png" alt="红桃8"></span>

<span><img width="100" height="150" src="H9.png" alt="红桃9"></span>

<span><img width="100" height="150" src="H10.png" alt="红桃10"></span>

<h2>黑桃</h2>

<p>j-k</p>

<span><img width="100" height="150" src="SJ.png" alt="黑桃J"></span>

<span><img width="100" height="150" src="SQ.png" alt="黑桃Q"></span>

<span><img width="100" height="150" src="SK.png" alt="黑桃K"></span>

<span><img width="100" height="150" src="SA.png" alt="黑桃A"></span>

</main>

</body>

</html>

效果图