从这儿初始：怎么样创建一个非常简单的HTML文档？-外链论坛

l14107cb 发表于 2024-6-29 12:11:30

从这儿初始：怎么样创建一个非常简单的HTML文档？

重视：本专栏内的教程适用于0基本的新手。
什么是HTML？
按照<a style="color: black;">百度百科</a>上的解释：HTML叫作为超文本标记语言，是一种标识性的语言。它包含一系列标签．经过这些标签能够将网络上的文档格式统一，使分散的Internet资源连接为一个规律整体。HTML文本是由于HTML命令构成的描述性文本，HTML命令能够说明文字，图形、动画、声音、表格、链接等。它的全叫作是Hyper Text Markup Language。
简单来讲，HTML是编写网页的语言，用来告诉浏览器应该怎样表示网页。HTML的编程环境不算太苛刻，大都数能编辑.txt后缀文件的软件，就能够编写HTML代码，例如Windows的记事本。只是倘若想要查看效果，必须另存为HTML文档（后缀为.html），或桌面上选中文件并重命名，而后手动更改后缀亦能够。
下面起始实战操作：（运用专业的研发工具很要紧，之后我会举荐几款软件。）
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-50ece76dfec4ab358c48527eb960ee65_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
桌面右键-新建-文本文档，而后打开这个文本文档，最好用记事本打开。此时候并不必须每次都手动选取记事本，能够设置默认程序。要认识更加多信息，详见：
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;">panda456：Windows 10怎样设置默认程序？14 赞同 · 6 评论文案</a></div>
打开后，咱们先输入：
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html></div>
这暗示什么呢？
所有的HTML文档都必要以此开头，用来声明这是一个HTML文档，让浏览器更方便地判断文档类型。每一个HTML文档的开头必要是这行代码，并且只显现一次。
回车以进行换行。
咱们再输入：
<div style="color: black; text-align: left; margin-bottom: 10px;"><html>

 </html>
</div>
这又是什么意思？
HTML文档的本身要以<html>起始，以</html>结束。
而后在中间空出的一行中，再输入：
<div style="color: black; text-align: left; margin-bottom: 10px;"><body>

 </body>
</div>
这又是什么意思？
顾名思义，这中间相当于HTML文档的「身体」。
主体结构已完工：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-d225a61bae084afbd643e691d29310b1_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
下面进行网页的主体编写。先写些什么呢？不如先添加一个标题吧。输入：
<div style="color: black; text-align: left; margin-bottom: 10px;"><h1>Hello world! </h1></div>
至于为何要输入 Hello world! ，参见：
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;">panda456：番外篇（1）：Hello World 中夹杂着的情感……2 赞同 · 0 评论文案</a></div>
倘若想要调节标题的要紧性（亦便是体积），前面和后面能够调节成<h2>和</h2>，始终到<h6>和</h6>：
<div style="color: black; text-align: left; margin-bottom: 10px;"><h1>这是一级标题</h1>
 <h2>这是二级标题</h2>
 <h3>这是三级标题</h3>
 <h4>这是四级标题</h4>
 <h5>这是五级标题</h5>
 <h6>这是六级标题</h6>
</div>
效果如下：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-7e57c14acffc3adc898856c4bcc603cc_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
添加完标题之后，再添加一段文字吧。回车进入新的一行，输入：
<div style="color: black; text-align: left; margin-bottom: 10px;"><p>这是一段文字，能够按照自己的需求进行替换。</p></div>
至此，记事本里便是这些代码，不爱学习的小伙伴们直接拿去复制：
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
 <html>
 <body>

 <h1>Hello world! </h1>
 <p>这是一段文字，能够按照自己的需求进行替换。</p>

 </body>
 </html>
</div>
保留后关闭。右键-重命名-将后缀名改为.html-完成！
倘若无表示后缀名，请参见这篇文案：
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;">panda456：Windows 10怎样表示文件名后缀？19 赞同 · 7 评论文案</a></div>
而后用浏览器打开。
倘若浏览器表示出的是以下界面，那样恭喜你，成功了。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-aa0103080dfce49e385f69b4f2b831a3_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
重视：倘若你的浏览器窗口够长，你只会看到一个标题和一行文字。上面的截图由于窗口太小，因此会经过换行的方式调节文本格式，实质上并无换行。
总结及重视事项：
1.HTML文档的主体结构长这般（这是最最基本的）：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-b3efe5ab7f22d74d5c5d14ed026cbc57_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>照片源自于W3School，侵删。其中白色部分是表示在浏览器上的内容。
2.HTML文档的元素结构：
<标记（属性）>这儿是详细内容</标记>
重视：元素是能够嵌套的。例如我在<html>和</html>之间插进<body>与</body>，再在中间加入<h1>与</h1>、与等等。
3.虽然有时HTML文档会自己检测出丢失的标记并补上，然则为了保险并养成良好的习惯，请务必检测自己的前标记（首标记）和后标记（末标记）是不是无缺失。例如输入和段落内容后，不要忘记输入！
4.有时候，HTML标记不区分体积写。例如会自动转换成，然则为了规范，在输入标记时，尽可能运用小写。
5.除了用中文输入法输入文本内容外，在输入代码时始终运用英文输入法。
这篇文案的内容到这儿就结束了，附上参考资料：<a style="color: black;">W3Schools</a>。
下期文案：
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;">panda45</a>6：HTML中针对颜色的应用19 赞同 · 0 评论文案</div>

wrjc1hod 发表于 2024-9-25 17:52:33

你的言辞如同繁星闪烁，点亮了我心中的夜空。

j8typz 发表于 2024-9-27 23:36:08

楼主节操掉了，还不快捡起来！

页: [1]

外链论坛's Archiver

从这儿初始：怎么样创建一个非常简单的HTML文档？