企业官网建设流程全解析

计算机的基础

计算机的五大部分：输出设备、输入设备、存储器【内存(读写速度快、硬盘（读写速度慢）】、CPU（运算、控制）

软件：系统软件、应用软件 ------- c/s b/s c:client s:server b:brower

前端代码------浏览器（渲染）

常见的浏览器：360、ie、谷歌、火狐

第一次：网景 、微软的ie

第二次：网景的火狐

第三次：谷歌

网页：网站的基本单位，有文字、图片、音频、链接

html

html：超文本标记语言（写网页的语言）

超：不只有文件，还有文本、图片、视频、音频

超——超链接

标记：已经有其表示的意思，可以直接使用

语言：标记的写法，读音，使用规则

后缀名：区分文件的类型，比如.html .txt .pdf .png

.html=>html文件=>浏览器解析

html的样式：<英文字母>

<开始标签>标签体</结束标签> （大部分情况）

<标签> （少部分情况）

标签的属性：1、该标签提供额外的信息或者设置 （属性名="属性值"）

2、一个标签可以有多个属性，多个属性之间用空格隔开

3、一般在开始标签之后，通过空格开始写属性

4、不同的表情有不同的属性，不能互相混用

5、当属性名=属性值时，可以简写，例如disabled="disabled" 可以写成disabled 或disabled="" 或disabled=true

开发工具：记事本、sublimit、VScode

解析前端代码：浏览器（谷歌）

骨架

先按shift+！ 然后按enter

<!DOCTYPE html>---- 进行文档声明，声明使用html版本显示网页，默认是h5

<html lang="en">-------lang属性：声明当前文档所显示的语言类型 en表示英文 zh-cn表示中文

<head>------字符编码（a—z A—Z）

<meta charset="UTF-8">------"UTF-8"万国码 charset解码 编码格式和解码格式必须保持一致，否则会出现乱码

<meta name="viewport" content="width=device-width, initial-scale=1.0">----移动适配

<title>Document</title>

</head>

<body>

注释：<!-- --> 注释的快捷键是ctrl+/

</body>

</html>

标题框架

标题标签：<hn></hn> n=1,2,3,4,5,6 h1到h6逐级减小 h标签独占一行

段落标签：<p>段落内容1</p>

<p>段落内容2</p>

水平线标签：<hr>

换行标签：<br>

文本格式化标签

加粗标签：<strong></strong> <b></b>

倾斜标签：<i></i> <em></em>

下划线标签：<u></u>

删除线标签：<del></del>

预格式化标签：<pre></pre>

上标标签：x²

下标标签：y₂

插入图片

常见图片格式：GIF（图片可以动，图片透明，颜色少，只有256色），JPG（1600以上色），PNG，BMP

资源路径：

绝对路径：从计算机的顶级目录（盘符）开始的文件路径

相对路径：从当前文件所在位置作为参考点建立的路径

插入图片：<img />

<src>属性：指向图片的路径的

<img src="" /> ../表示的是上一级目录 ./表示当前目录 下一级的直接喊

宽和高：width height 单位是px

控制文字和图片的位置：align align="top"顶部 align="bottom"底部 align="middle"中间

align="left"左对齐 align="rigft"右对齐

控制文字与图片的水平距离：hspace 单位是px

控制文字与图片的垂直距离：vspace 单位是px

如果图片无法正常加载出来，alt里面的文字救护代替图片

全局属性：所有的标签都具有该属性

title：用来显示描述的文字的 ，title是全局属性

如果没有alt属性，那么alt的属性值就是title的属性值

超链接

超链接可以完成页面之间的跳转

超链接：<a></a> 要有提示字和指定的跳转对象

#表示这是一个空连接，点击之后不会跳转，会把当前页面刷新一次

href：指定链接跳转的地址

<a href=“#”></a> 刷新

a链接内可以放任何其他标签

超链接默认是在当前的窗口跳转到指定的页面的，如果想要更改，利用属性target target="-blank"表示去新的窗口跳转到指定的页面

锚链接

id：全局属性 是标签的唯一表示，同一网页内，id属性值不能重复

标签

视频标签

视频标签：<video></video>

src属性指明视频所在的位置

<video src="" controls></video>

loop循环播放

autoplay自动播放

muted静音

autoplay和mute配合使用

音频标签

音频标签：<audio></audio>

<audio src=“” controls><audio>

loop循环播放

列表标签

无序列表：布局排列整齐的不需要规定顺序的区域 ul>li ul：无序列表

li：列表的子项

<ul>

<li></li>

<li></li+>

</ul+>

ul只能包含li标签，li可以包含任何内容

有序列表：ol>li

<ol>

<li></li>

<li></li>

</ol>

自定义列表:dl只能包含dt和dd，dt和dd能包含任何内容

<dl>

<dt></dt> 标题

<dd></dd> 选项

<dd></dd> 选项

</dl>

表格标签

<table></table>：表格的范围

<tr></tr>：行

<td></td>：列

<table border="1" cellspacing="0">

<tr>

<th></th>

<th></th>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table> 表示两行三列

<th></th>表示表头单元格

border：n 边框属性 n=0表示没有边框 不为0表示有边框，边框的宽度为n像素

cellspacing 细胞间隙 指两个单元格之间的间隙，默认值为2px

align属性表示表格的对齐方式（水平方向） align=""

left左 right右 center居中

valign属性表示表格的对齐方式（垂直方向） valign=""

top顶 bottom底 middle居中

bgcolor背景颜色 bgcolor="#ccc"

backgroung背景为图片 backgroung=""

width=30% height=50% 范围为0%到100% 或使用 px

表格的跨行与跨列

1、明确合并的目标

2、保留最左最上的元素，添加对应的跨行跨列的属性

3、删除掉其他被跨行跨列的单元格

<table border="1" width="500px" height="400px">

<tr>

<th></th>

<th></th>

<th></th>

<th></th>

</tr>

<tr>

<td rowspan="2"></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td ></td>

<!-- 跨列 -->

<td colspan="3></td>

</tr>

</table>

rowspan跨行

colspan跨列

无语义标签

<div></div> div独占一行

<span></span> span不会独占一行

有语义的标签：

<header></header> 网页头部

<footer></footer> 网页底部

<nav></nav> 导航栏

字符实体

&lt； 小于号

&gt； 大于号

&nbsp; 空格

&quot； 双引号

表单标签

表单标签 form

action：指定表单数据要交给哪个页面处理

method:http请求中的那种提交方式 默认的属性值是get

get、post、put、head……

enctype:告诉服务器，如何去解析这次的请求

post：

上传文件、图片 enctype="multipart/form-data"

enctype="application/x-www-form-urlencoded" 默认

input、下拉菜单 、文本域

type="表单类型"

value="元素值"

readonly :只读属性

<form action="#">

<input type="text" id="" value="这是你不能改的" >

<input type="password" name="username">

性别：<input type="radio" name="sex" id="" value="男">男

<input type="radio" name="sex" id="" value="女">女 <br>

checked 默认选中

你喜欢的食物有： <input type="checkbox" name="hobby" id="" value="吃饭">吃饭

<input type="checkbox" name="hobby" id="" value="睡觉" checked>睡觉

<input type="checkbox" name="hobby" id="" value="打豆豆">打豆豆

<input type="submit" name="" id="" value="上传">

<input type="reset">

<input type="button" name="" id="" value="普通按钮">

<input type="file">

cdkjcnsjcdscd

<input type="hidden" name="hidden" id="" value="cdcdcdcdcd">

<input type="email">

disabled 禁用

<button disabled>按钮</button>

get和post的http协议规定不同

get请求安全性极差，直接把提交的数据以键值对的形式显示在url中

post相对比较安全

get允许的最多是2k，post无要求

下拉框

<form action="#">

收货地址：

multiple :以列表的形式显示下拉框

selected 表示的是下拉框里面的默认选中

<select name="address" >

<option value="广州">广州</option>

<option value="aaa" selected>南京</option>

<option value="陕西">陕西</option>

</select>

<button>提交</button>

maxlength 字符的最大个数

<input type="text" name="username" id="" maxlength="6">

文本域

<form action="#">

<textarea cols="20" rows="20" name="hobby" >

</textarea>

<input type="time" name="username" id="" placeholder="请输入用户名：">

</form>

cols：列

rows：行

placeholder 背景提示

框架标签

框架标签：iframe 不受同源策略的约束 同源策略指： 协议、端口、主机名

<iframe src="https://www.baidu.com" frameborder="1"></iframe>

<a href="https://www.taobao.com" target="w">去淘宝</a>

<iframe name="w"></iframe>

<details>

<summary>下面是图片的详细信息</summary>

这是详细描述内容

</detail>

label :扩大域

<form action="#">

1. <label>

<input type="radio" name="sex" value="nan">男

</label>

2. <input type="radio" name="sex" value="nv" id="nv">

<label for="nv">女</label>