企业官网建设流程全解析

DAY2 HTML27~53学习笔记及作业

快捷键：ctrl shift +同时按 放大页面
ctrl shift ——同时按 放大页面
shift tab同时按 左移
ctrl shift delete 同时按 浏览器清理上网记录
shift alt ↓ 快速向下复制
ctrl / 单行快速注释
（一）相对路径和绝对路径
相对路径：以当前位置作为参考点，去建立路径。
注意:1.相对路径中的./可以省略不写。
2.相对路径依赖的是当前位置，后期如果调整了文件位置，那么文件中的路径也要修改。
绝对路径：以根位置作为参考点，去建立路径。
分为本地绝对路径和网络绝对路径

注意：1.使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。
2.使用网络绝对路径，虽然方便，但是要注意：如果服务器开启了防盗链，会导致图片引入失败。
（二）常见图片格式



**（三）超链接：**从当前页面进行跳转。
标签名：a 双标签 常用属性href：要跳转的具体位置。
target：跳转时要如何打开页面，常用值有：_self:在本标签页中打开。
_blank：在新标签页中打开。

（1）跳转页面

注意：代码中的多个空格，多个回车，都会被浏览器解析成一个空格。
虽然a是行内元素，但a元素可以包裹除它自身外的任何元素。
（2）跳转文件

（3）跳转锚点


（4）唤起指定应用
通过a标签，可以唤起设备应用程序。

超文本：是一种组织信息的方式，提供超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容。
（四）列表
有序列表

1. 把冰箱门打开
2. 把大象放进去
3. 把冰箱门关上

无序列表

我想去的几个城市

• 成都
• 上海
• 西安
• 武汉

注意：li标签最好写在ul和ol中，不要单独使用。 **自定义列表** dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述。

如何更好的学习

做好笔记

笔记是我们以后复习的一个抓手

多加练习

只有敲出来的代码，才是自己的

别怕出错

错很正常的，改正后并记住，就是经验

**（五）表格** 1.基本结构 表格 四个部分组成：表格标题 表格脚注 2.tr：每一行 th、td：每一个单元格（备注：表格头部用th，表格主体、表格脚注用td）  3.具体编码

表格头部 表格主体

学生信息

姓名	性别	年龄	民族	政治面貌
张三	男	19	汉	群众
李四	女	18	汉	团员

4.常用属性   5.跨行跨列 rowspan：指定要跨的行数 colspan：指定要跨的列数 **（六）常用标签补充** 标签名 标签含义 单/双标签 br 换行 单 hr 分隔 单 pre 按原文显示（一般用于在页面中嵌入大段代码） 双 注意点: 1. 不要用
来增加文本之间的行间隔，应使用后面即将学到的 CSS margin 属性。 2.

---

的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用 CSS 完成。 **（七）表单** **（1）基本结构** *form 表单（双标签）* 常用属性： 3. action：用于指定表单的提交地址（需要与后端人员沟通后确定）。 4. target：用于控制表单提交后，如何打开页面，常用值如下： _self：在本窗口打开。 _blank：在新窗口打开。 5. method：用于控制表单的提交方式。 *input 输入框（单标签）* 常用属性： 6. type：设置输入框的类型，目前用到的值是 text，表示普通文本。 7. name：用于指定提交数据的名字，（需要与后端人员沟通后确定）。 *button 按钮（双标签） 示例代码： html 去百度搜索 **（2）常用表单控件** ①文本输入框 常用属性如下： - name 属性：数据的名称。 - value 属性：输入框的默认输入值。 - maxlength 属性：输入框最大可输入长度。 ②密码输入框 常用属性如下： - name 属性：数据的名称。 - value 属性：输入框的默认输入值（一般不用，无意义）。 - maxlength 属性：输入框最大可输入长度。 ③单选框 女 男 常用属性如下： - name 属性：数据的名称，*注意*：想要单选效果，多个 radio 的 name 属性值要保持一致。 - value 属性：提交的数据值。 - checked 属性：让该单选按钮默认选中。 ④复选框 抽烟 喝酒 烫头 常用属性如下： - name 属性：数据的名称。 - value 属性：提交的数据值。 - checked 属性：让该复选框默认选中。 ⑤隐藏域 用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。 - name 属性：指定数据的名称。 - value 属性：指定的是真正提交的数据。 ⑥提交按钮 点我提交表单 注意： 8. button 标签 type 属性的默认值是 submit。 9. button 不要指定 name 属性。 10. input 标签编写的按钮，使用 value 属性指定按钮文字。 ⑦重置按钮 点我重置 注意点： 11. button 不要指定 name 属性。 12. input 标签编写的按钮，使用 value 属性指定按钮文字。 ⑧普通按钮 普通按钮 注意点：普通按钮的 type 值为 button，若不写 type 值是 submit 会引起表单的提交。 ⑨文本域 我是文本域 常用属性如下： 13. rows 属性：指定默认显示的行数，会影响文本域的高度。 14. cols 属性：指定默认显示的列数，会影响文本域的宽度。 15. 不能编写 type 属性，其他属性，与普通文本输入框一致。 ⑩下拉框 黑龙江 辽宁 吉林 广东 **常用属性及注意事项**： 16. name 属性：指定数据的名称。 17. option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）。 18. option 标签设置了 selected 属性，表示默认选中。 3.禁用表单控件 表单控件的标签设置 disabled 既可禁用表单控件。 input、textarea、button、select、option 都可以设置 disabled 属性。 4.label标签 label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。 两种与 label 关联方式如下： 19. 让 label 标签的 for 属性的值等于表单控件的 id。 20. 把表单控件套在 label 标签的里面。

（八）框架标签
标签:iframe
功能和语义：框架（在网页中嵌入其他文件）
属性：

• name：框架名字，可以与 target 属性配合。
• width：框架的宽。
• height：框架的高度。
• frameborder：是否显示边框，值：0或者1。
  单/双标签：双
  iframe 标签的实际应用：

22. 在网页中嵌入广告。
23. 与超链接或表单的 target 配合，展示不同的内容。
    （九）HTML字符实体
    在HTML中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是HTML实体。
    字符实体由三部分组成：一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一个分号 ;

作业