前端网页设计

构造图：

目录

构造图：

前端构造：

HTML知识点：

标签是有技巧的，重点记住每个标签的语义，简单的理解：就是这个标签是用来干嘛的

一、基本标签

1.标题：

2.水平线：

3.段落和换行

4.文字效果

5.超链接

6.图像

7.音频和视频

二、 布局标签

1.无序列表

2.有序列表

3.定义列表

4.表格

三、容器

作用：存储内容的容器（盒子），通常与css技术结合使用，完成页面的布局和美化

语法：

---

 

• 前端构造：

  • HTML 用于构建网站的基础结构的
  • CSS 用于美化页面的，作用和化妆或者整容作用一样
  • JS 实现网页和用户的交互
  • ==Vue== 主要用于将数据填充到html页面上的
  • ==Element== 主要提供了一些非常美观的组件

• HTML知识点：

  • 标签是有技巧的，重点记住每个标签的语义，简单的理解：就是这个标签是用来干嘛的

    

  • 一、基本标签

    • 1.标题：

      • 作用：用于将普通文字变成标题
      • 语法： <hn>普通文字</hn> n表示范围：1~6 特点：数值越大，字体越小
      • 属性：align：对齐方式 取值：left（默认值，左对齐） 、 center（居中） 、 right（右对齐）

    • 2.水平线：

      • 作用：在页面上生成一条横线
      • 语法：<hr/>
      • 属性：color：颜色， 用于设置颜色线条颜色，通过英文字母或者RGB表示
        • 英文单词: red blue green pink purple yellow black white
        • RGB: #FFFFFF
      • width：宽度， 用于设置线条的长度，可以是用绝对像素或者百分百设置
        • 绝对: 100px
        • 相对: 百分比

    • 3.段落和换行

      • 换行： <br/>
      • 分段： <p>一段内容，使用这个标签的效果是一段文字的上下会留出空白</p>
      • 空格: &emsp;(中文) &nbsp;(英文)

    • 4.文字效果

      • <b>文字</b>：加粗标签
      • <i>文字</i>： 斜体标签
      • <u>文字</u>：下划线标签，在文字的下方有一条横线
      • <center>文字</center>: 文字居中显示
      • <font>文字</font>: 定义文字字体(face)，大小(size:1-7)，颜色(color)

    • 5.超链接

      • 作用：用于给文字添加超链接效果，点击文字是跳转一个目标页面
      • 语法：<a>文字</a>
      • 属性：
        • href：用于指定超链接的跳转地址，支持绝对路径和相对路径两种写法
          • 绝对地址: 百度一下，你就知道
          • 相对地址: ./ 当前文件所在目录 ../ 当前文件上层目录
        • target：用于指定页面打开方式
          • _self 在当前页签打开目标页面(默认)
          • _blank 在新页签打开打开目标页面

    • 6.图像

      • 用于在HTML页面中引入一个图片
      • 语法<img/>
      • 属性:
        • src：用于指定图片资源的路径，支持绝对路径和相对路径两种写法
        • alt：用于在指定咋图片丢失时要显示的文字提示
        • width：用于设置图片宽度（浏览器会根据设置的宽度按照比例自动调整高度）

    • 7.音频和视频

      • audio：定义音频。支持的音频格式：MP3、WAV、OGG
      • video：定义视频。支持的音频格式：MP4, WebM、OGG
      • src：规定音频的 URL
      • controls：显示播放控件

  • 二、 布局标签

    • 1.无序列表

      • <ul>
      • <li>列表项</li>
      • <li>列表项</li>
      • </ul>

    • 2.有序列表

      • <ol>
      • <li>列表项</li>
      • <li>列表项</li>
      • </ol>

    • 3.定义列表

      • <dl>
      • <dt>大</dt>
      • <dd>小</dd>
      • <dd>小</dd>
      • </dl>

    • 4.表格

      • <table>：定义表格
        • border：规定表格边框的宽度
        • width：规定表格的宽度
        • height: 设置高度
        • cellspacing: 外边距 单元格和单元格之间的距离
        • cellpadding: 内边距 单元格和内部文字形式
      • <tr>：定义行
      • <th>：定义表头单元格
      • <td>：定义单元格
      • align：定义表格行的内容对齐方式
      • bgcolor 设置背景色
      • align 设置单元格内文字的水平位置
      • 合并行rowspan 还是合并列colspan

  • 三、容器

    • 作用：存储内容的容器（盒子），通常与css技术结合使用，完成页面的布局和美化

    • 语法：

      • <div>块级元素,独自占用一行</div>
      • <span>行内元素,内容有多大，就占用多少</span>