質問がありましたので・・・
macOSのテキストエディットでHTMLファイルを編集する場合の手順を整理します。
用意したindex.htmlです。
index,htmlをテキストエディットでダブルクリック、あるいはファイル指定して普通にお開くと上のようにプレビュー状態で開いてしまします。しかも 参照しているCSSファイルを認識していないのでレイアウトが崩れています。
こうならないために、テキストエディットでhtmlファイルを編集する場合は、オプションをクリックし[リッチテキストコマンドを無視]にチェックを入れて、該当ファイルを開く必要があります。テキストエディットはデフォルトがリッチテキスト編集モードだからです。
[リッチテキストコマンドを無視]にチェックを入れて開けfp普通に編集することが出来ます。