c1-3 网页制作记录

最新推荐文章于 2024-07-24 21:48:20 发布

油光发亮的小猛

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量215

点赞数 1

分类专栏： C1 文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/weixin_44062399/article/details/115394177

版权

C1 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如何简单制作一个网页

1、工具下载
2、文件存放
3、html制作
4、js以及css修改

1、工具下载

vscode文本编辑器：https://pan.baidu.com/s/1odc_6GG7h-4ZVQiSibwlYw
提取码：wz6e

2、文件存放

2.1、新建网站文件夹

当我们构建网站时，网站的所有文件需要存储至一个文件夹内，因此我们需要新建一个文件夹，我给他命名为“网站搭建”。
2.2、新建html文件

进入网站搭建文件夹，使用创建一个文本文档，将后缀名改为html，用Visual Studio Code打开，然后就可以进行愉快的编辑啦。
2.3、其他文件

制作网页所需的文件很多，如js，css文件以及一些需要使用的视频和图片，我在此目录下分别新建文件来保存他们，以便html文件来调用。
其中js与css文件的构建方法和html文件相同。

3、html制作

3.1、html基础

html不是一门编程语言，而是一门定义内容结构的标记语言。HTML由一系列元素组成，这些元素可以用来包围不同的部分，使他们以某种方式呈现或工作。一对对标签将内容封装。例如：<p>网页制作尝试</p>
在这里

是开始标签，

是结束标签，由此封装了一个段落元素，使内容在单独一行呈现。
由此可见，一个元素的主要部分有：

开始标签
结束标签
内容
元素（开始标签，结束标签以及内容结合就是一个元素）
HTML中还有一些标签：

<!DOCTYPE html> —— 文档类型。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。
<html></html>—— html类型。该元素包含整个页面的内容，也叫根元素
<head> </head>——<head> 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等
<meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码 ，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
<title></title> — <title> 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容。

HTML有很多元素，完整的html需要很多元素构成，下面尝试插入一张图片并展示，代码和效果如下：

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title>网站搭建</title>
    </head>
  <body>
        <img src="images/1.jpeg" alt="图片">
  </body>
</html>

3.2、插入表格

1 <td></td>:可以制作一个单元格
2 <tr></tr>:由于直接用<td>制作单元格会换行，如果想在同一行则需用<tr></tr>来包装<td>,同行的单元格都封装在同一个<tr>中
3<table></table>:我们习惯于用这个元素来封装我们的一个表格，且表格的边框等属性也需要在这个标签中定义
4<colgroup></colgroup>：<col></col>被规定包含在其中
5<col></col>:定义整列样式信息

知道以上基本知识就可以简单插入一个表格了，以下是我插入表格的代码：

<table border="1">
    <colgroup>
      <col style="background-color: cadetblue "colspan="10" rowspan="10" ></col>
      <col style="background-color:rgb(185, 230, 215)" colspan="10"rowspan="10"></col>
      <col style="background-color:rgb(72, 82, 78)"colspan="10"rowspan="10"></col>
      <col style="background-color:rgb(170, 180, 177)" colspan="10"rowspan="10"></col>
      <col style="background-color:rgb(69, 100, 91)" colspan="10"rowspan="10"></col>
      
    </colgroup>
    <tr>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
      <td>财富</td>
      <td>运气</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>16</td>
      <td>0</td>
      <td>90</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>男</td>
      <td>9</td>
      <td>10</td>
      <td>9</td>
    </tr>
    <tr>
      <td>狗蛋</td>
      <td>男</td>
      <td>55</td>
      <td>90</td>
      <td>60</td>
    </tr>
    <tr>
      <td>风崽</td>
      <td>女</td>
      <td>45</td>
      <td>86</td>
      <td>77</td>
    </tr>
  </table>

显示如图：

3.3、插入视频
插入视频在html5中非常简单，只需要简单的就可以，代码如下：
```
 <video  src="videos/1.mp4" controls>
      <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
 </video>
```
其中，视频是我录制的展示视频，src是video的地址属性，指向videos文件下的一个视频文件。width限制了视频显示宽度属性，展示效果如图：

4、js以及css修改

我们可以看到，粗暴显示的表格和视频相当不好看，网页也表现的很粗糙，我们需要用js和css知识来修改，以下是Mozilla社区学习地址：

html学习地址
css学习地址
javascript学习
经过学习和修改，虽然网页依旧粗糙，但是比之前好了不少，网站显示如下：
以上，完成第三个任务表格和视频以及变色的要求，但想要制作一个好的网站显然还需要更多钻研，咸鱼叹息！！！

油光发亮的小猛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
c1-3 网页制作记录

如何简单制作一个网页1、工具下载2、文件存放2.1、新建网站文件夹2.2、新建html文件2.3、其他文件3、html制作3.1、html基础3.2、插入表格3.3、插入视频4、js以及css修改1、工具下载vscode文本编辑器：https://pan.baidu.com/s/1odc_6GG7h-4ZVQiSibwlYw提取码：wz6e2、文件存放2.1、新建网站文件夹当我们构建网站时，网站的所有文件需要存储至一个文件夹内，因此我们需要新建一个文件夹，我给他命名为“网站搭建”。
复制链接

扫一扫