企业官网建设流程全解析

目录

• 1. 路径
• 2. 超链接
• 3. 列表
• 4. 表格
• 5. 常用标签补充
• 6. 表单

1. 相对路径：以当前位置作为参考点，去建立路径。注意点：相对路径中的./ 可以省略不写。相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。

绝对路径：以根位置作为参考点，去建立路径。1. 本地绝对路径：E:/a/b/c/奥特曼.jpg。（很少使用）2. 网络绝对路径：http://www.atguigu.com/images/index_new/logo.png。注意点：使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败。

2. 超链接 主要作用：从当前页面进行跳转。可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定应用。

href：指定要跳转到的具体目标。

target：控制跳转时如何打开页面，常用值如下：_self：在本窗口打开。_blank：在新窗口打开。

id：元素的唯一标识，可用于设置锚点。

name：元素的名字，写在a标签中，也能设置锚点。

3. 列表

1）有序列表 概念：有顺序或侧重顺序的列表。

<ol> <li></li> <li></li> </ol>

2）无序列表 概念：无顺序或不侧重顺序的列表。

<ul> <li></li> </ul>

3）列表嵌套 概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把结构写完整）。

<h2>我想去的几个城市</h2> <ul> <li>成都</li> <li> <span>上海</span> <ul> <li>外滩</li> <li>杜莎夫人蜡像馆</li> <li> <a href="https://www.opg.cn/">东方明珠</a> </li> <li>迪士尼乐园</li> </ul> </li> <li>西安</li> <li>武汉</li> </ul>

4）自定义列表 1. 概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。2. 一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述（可以有多个）。

注意：li标签最好写在ul或ol中，不要单独使用。

4. 表格

基本结构 1. 一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。

表格涉及到的标签：table：表格 caption：表格标题 thead：表格头部 tbody：表格主体 tfoot：表格注脚 tr：每一行 th、td：每一个单元格（备注：表格头部中用th，表格主体、表格脚注中用td）。

table属性 width：设置表格宽度。height：设置表格最小高度，表格最终高度可能比设置的值大。border：设置表格边框宽度。cellspacing：设置单元格之间的间距。

thead属性 height：设置表格头部高度。align：设置单元格的水平对齐方式，可选值如下：1. left：左对齐 2. center：中间对齐 3. right：右对齐 valign：设置单元格的垂直对齐方式，可选值如下：1. top：顶部对齐 2. middle：中间对齐 3. bottom：底部对齐

tbody、tfoot、tr同上。

td、th属性 width：设置单元格的宽度，同列所有单元格全都受影响。height：设置单元格的高度，同行所有单元格全都受影响。align：设置单元格的水平对齐方式。valign：设置单元格的垂直对齐方式。rowspan：指定要跨的行数。colspan：指定要跨的列数。

rowspan：指定要跨的行数。colspan：指定要跨的列数。

5. 常用标签补充

br换行单 hr分隔单 pre按原文显示（一般用于在页面中嵌入大段代码）。

6. 表单
<form>
表单包含内容写里面
action表单属性
指定什么网站搜索后加/s
target表单属性
是否在新页面打开
method表单属性，请求方式包含get、post
name input的属性
用于指定提交数据的名字
不同网站的name不同，action后加的/?也不同
<button>按钮
a侧重跳转，form侧重收集用户数据
value input的属性，设置默认值
maxlength input的属性，设置最大输入长度
单选框type属性值为radio，并且二选一，name的属性值要一致，设置默认值value
checked属性默认选中
复选框type的属性值为checkbox，name和value自定义
普通输入框不用写value，单选框和多选框必须写
隐藏输入框的type属性值为hidden
确认按钮的两种写法：
<button>确认</button>
<input type="submit" value="确认">
按钮框不能加name属性，否则失去按钮效果
重置按钮两种写法：
<button type="reset">重置</button>
<input type="reset" value="重置">
普通按钮：
<button type="button">检测是否?</button>
<input type="button" value="普通按钮">
普通按钮功能设置目前还没有学到
注意：button的type属性默认为submit提交
文本域textarea属性name、cols、rows
下拉框select，选项用option，属性value最好提前设置，默认选择用selected
disabled禁用表单控件属性，input、textarea、button、select、option都可以用
label标签实现提示文字和表单控件之间的关联，两种用法：
1. 直接将提示文字和表单控件套在里面
2. 设置label属性for和表单控件id属性，实现关联（不限距离）
fieldset为表单控件分组，legend为分组控件设置标题
iframe为框架标签，属性name与target配合使用，frameborder是否显示边框
字符实体：用一种特殊形式表示某个符号
全局属性常用：id给标签指定唯一标识，注意：id是不能重复的。title给标签设置一个文字提示，一般超链接和图片用得比较多。
meta元信息就是基本信息。

表单控件完整示例

1. 文本框（单行文本输入框）

<!-- type="text"：指定为单行文本框；name：提交数据的名字；value：默认值；maxlength：最大输入长度；placeholder：输入提示文字 --> <input type="text" name="username" value="张三" maxlength="10" placeholder="请输入用户名">

2. 单选框

<!-- type="radio"：指定为单选框；name：同一组单选框name必须一致，才能实现二选一；value：提交时的值；checked：默认选中 --> <input type="radio" name="gender" value="male" checked>男 <input type="radio" name="gender" value="female">女

3. 复选框

<!-- type="checkbox"：指定为复选框；name：提交数据的名字；value：提交时的值；checked：默认选中 --> <input type="checkbox" name="hobby" value="basketball" checked>篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="swimming">游泳

4. 下拉框

<!-- select：下拉框；name：提交数据的名字；option：下拉选项；value：选项提交时的值；selected：默认选中 --> <select name="city"> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="guangzhou">广州</option> </select>

5. 文本域（多行文本输入框）

<!-- textarea：多行文本输入框；name：提交数据的名字；cols：可见列数（宽度）；rows：可见行数（高度） --> <textarea name="message" cols="30" rows="5">请输入留言内容</textarea>

作业

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人学习</title> </head> <body> <table border="5" cellspacing="0"> <thead> <tr> <th colspan="7" align="center">个人信息</th> </tr> </thead> <tbody> <tr> <td rowspan="3" width="100" heigth="100"> <img src="./通达校徽.jpg" title="这是通达校徽"> </td> <td style="width: 65px; background-color: skyblue;" >姓名</td> <td> <form> <input type="text" name="name" placeholder="请输入姓名"> </form> </td> <td style="width: 65px; background-color: skyblue;">年龄</td> <td> <form> <select> <option selected>18</option> <option>19</option> <option>20</option> </select> </form> </td> <td rowspan="3" style="width: 130px;"> <a href="https://jwxt.nytdc.edu.cn/jwglxt/xtgl/login_slogin.html" target="_blank">前往查询个人课表</a> </td> <td rowspan="3" style="width: 110px;"> <span>学习目标：</span> <ol> <li>勤学善思</li> <li>笃学力行</li> <li>慎思笃行</li> </ol> </td> </tr> <tr> <td style="width: 65px; background-color: skyblue;" align="center" valign="middle">性别</td> <td> <form> <input type="radio" name="gender" value="male" checked>男 <input type="radio" name="gender" value="female">女 </form> </td> <td style="width: 65px; background-color: skyblue;">专业</td> <td> <form> <select> <option selected>计算机科学与技术</option> <option>软件工程</option> <option>物联网工程</option> </select> </form> </td> </tr> <tr> <td style="width: 65px; background-color: skyblue;" align="right" >爱好</td> <td> <form> <input type="checkbox" name="hobby" value="read">阅读 <input type="checkbox" name="hobby" value="listen">听歌 <input type="checkbox" name="hobby" value="run">跑步 <input type="checkbox" name="hobby" value="code" checked>敲代码 </form> </td> <td style="width: 65px; background-color: skyblue;" valign="bottom">自我介绍</td> <td> <form> <textarea name="zwjs" placeholder="我喜欢敲代码，希望认识很多朋友"></textarea> </form> </td> </tr> <tr> <td colspan="7" align="center"> <form> <button>提交个人信息</button> </form> </td> </tr> </tbody> </table> </body> </html> <!-- 占位符是placeholder -->