Once your document is saved as .html, a lot of information is lost because HTML does not retain as much semantic markup as the ODF format (in .odt file). Among other things, what you call a TOC in HTML is just a sequence of paragraph like the others, while in ODF the TOC does not exist by itself but is constructed from specially tagged paragraphs (those with Heading n paragraph styles). This tagging is not forwarded to HTML.
HTML is not a “paged” format (in typographical sense). It is displayed as a single unit with vertical scrolling enabled to “navigate” within this long page. There is a single page per file. Therefore your TOC is right announcing page “1” for all your headings. The limitation is not in Writer but in HTML.
If the page numbers are not aligned, check your paragraph styles. Avoid direct formatting. See if the same fonts are used in your browser and Writer.
When you File
>Save as
, the currently selected type always adds its own extension if it is not the same as what you write in the filename box. In your case, this is .html. To change the output type, you must select it from the File type menu or list (appearance varying from version to version). However, if your input document is HTML, saving it as .odt will not recreate what has been lost. If you really want to keep complete structure information, you must restyle all the text with paragraph and character styles and, most important, remove any direct formatting. This reference must be saved as .odt. From it, you export an HTML copy for browser use.
To show the community your question has been answered, click the ✓ next to the correct answer, and “upvote” by clicking on the ^ arrow of any helpful answers. These are the mechanisms for communicating the quality of the Q&A on this site. Thanks!