s一、基础知识

1. B/S结构

image.png
image.png

3、 网页的组成部分

页面由三部分内容组成！
分别是内容（结构） 、 表现、 行为。
内容（ 结构） ， 是我们在页面中可以看到的数据。 我们称之为内容。 一般内容 我们使用
html 技术来展示。
表现， 指的是这些内容在页面上的展示形式。 比如说。 布局， 颜色， 大小等等。 一般使用
CSS 技术实现
行为， 指的是页面中元素与输入设备交互的响应。 一般使用 javascript 技术实现。

4. 创建一个静态得web工程

image.png
创建html页面：

  1. <!DOCTYPE html> <!-- 约束声明-->
  2. <html lang="zh_CN"><!-- html标签： 表示html的开始    lang="zh_CN" 表示支持中文>
  4. <!-- html的标签分为2部分：
  5.     head: 表示头部信息，包含3部分内容
  6.         title标签
  7.         css：样式
  8.         js: 代码
  9.     body: 内容
  10. -->
  12. <head>
  13.     <meta charset="UTF-8">  <!-- 表示当前页面使用UTF-8字符集-->
  14.     <title>标题</title>
  15. </head>
  16. <body>
  17.     hello
  18. </body>
  19. </html>

image.png

horizontal rule : 水平线

8. font标签

字体颜色
字体类型
字体大小
image.png
对齐： align = left
image.png

9. 超链接 a标签


image.png

10. 列表标签

    : unordered list
      : ordered list
    1. : list item
      image.png

      11. image标签： 可以在页面上显示照片

      image.png

      12. 表格标签

      image.png

      13. 表格的跨行跨列

      image.png

      14. 页面中加载其他小页面

      image.png

      15. 同一页面中的超链接 : bookmarks

      • 即：点击同一页面中的一个超链接，自动跳转到该处

      image.png
      image.png

      16. 表单

      image.png

      17. 表单的改进

      把每项都变成table表单中的行image.png
      效果图：
      image.png

      18. CSS标签选择器

      • CSS文件：
           - ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22435741/1631473719476-1a524e8b-7eb0-44f6-8e0a-5c5d7f17b415.png#clientId=u94e2ce23-6013-4&from=paste&height=268&id=u45a7a6e8&margin=%5Bobject%20Object%5D&name=image.png&originHeight=268&originWidth=464&originalType=binary&ratio=1&size=12780&status=done&style=none&taskId=u3b125fdb-0323-4ff0-aed4-bb56ecabeda&width=464)
      • html文件引用：
           - ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22435741/1631473762386-977db1d5-41d9-4f87-b67e-f17d9e5ac522.png#clientId=u94e2ce23-6013-4&from=paste&height=218&id=u4be51aae&margin=%5Bobject%20Object%5D&name=image.png&originHeight=218&originWidth=627&originalType=binary&ratio=1&size=20110&status=done&style=none&taskId=ud95db0b8-f9ef-49c2-98ff-2152b6ded0a&width=627)

      19. CSS-id选择器

      image.png
      image.png

      20. CSS-类选择器： .class{}

      image.png
      image.png

      21. 组合选择器