前言

新人学习成本很高，网络上太多的名词和框架，全部学习会浪费大量的时间和精力。

新手缺乏学习内容的辨别能力，本系列文章为新手过滤掉不适合的学习内容（比如多线程等等），让新手少走弯路直通罗马。

作者认为新人应该先打好基础，不要直接学习框架，例如先掌握 SQL 再使用 EFCore 框架。

作者只传授数年内不会变化的知识，让新手学习快速进入跑道受益终身。

分享使我快乐，请务必转发给同学，朋友，让大家都少走一些弯路！！

W3C 是一群大佬制定的 WEB 标准规范，包括 HTML/CSS/JavaScript、HTTP协议等等。所有厂商遵循行业标准，比如前端的浏览器（Chrome/IE/Firefox），后端的WEB服务器（Nginx/Apache/IIS）。（思考：如果 IE浏览器只能访问 IIS 服务器？）

我们基于 WEB 之上的码农，只需要学习好这些标准知识，就可以在任何编程语言下通用，这些知识未来几十年都不过时。

W3C 虽然标准，但也不是每项技术都值得新人学习（例如 XHTML/XSL），对于新手而言，只推荐学习 HTML/CSS/JavaScript、HTTP协议。

什么是 HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML文档的后缀名

.html
.htm

HTML 编辑器推荐

VS Code：https://code.visualstudio.com/

Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

步骤 1: 新建 HTML 文件

在 VS Code 安装完成后，选择" 文件(F)->新建文件(N) "，在新建的文件中输入以下代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>文档标题</title>

</head>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>

</html>

步骤 2: 另存为 HTML 文件

然后选择" 文件(F)->另存为(A) "，文件名为 runoob.html:

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好，我建议统一用 .html。

在一个容易记忆的文件夹中保存这个文件，比如 runoob

步骤 3: 在浏览器中运行这个 HTML 文件

然后鼠标右击编辑器上的文件名，选择在默认浏览器打开（也可以其他的浏览器）:

注：vscode 中使用浏览器打开 html 文件需要安装 "open in browser" 扩展。

运行显示结果类似如下:

玩转 Chrome 浏览器

查看源代码：在浏览器页面右键点击鼠标，弹出菜单，选得“查看源代码”。

按 F12 打开开发者模式：

常用的是这些，其他的功能以后可以慢慢摸索。

HTML 基础

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.runoob.com" target="_blank">这是一个链接</a>

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

HTML 段落是通过标签 <p> 来定义的。

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

HTML 换行是通过标签 <br> 来定义的。

<p>这个<br>

段落<br>

演示了分行的效果</p>

HTML 图像是通过标签 <img> 来定义的。

<img src="/images/logo.png" width="258" height="39" />

HTML 水平线是通过标签 <hr> 来定义的。

<hr>

HTML 注释是通过标签来定义的。

<!-- <hr> -->

HTML 文本格式化，加粗，斜体，等等可以通过 CSS 解决，下篇文章介绍。

HTML 表格是通过标签 <table> 来定义的。

<table border="1">

    <tr>

        <th>Header 1</th>

        <th>Header 2</th>

    </tr>

    <tr>

        <td>row 1, cell 1</td>

        <td>row 1, cell 2</td>

    </tr>

    <tr>

        <td>row 2, cell 1</td>

        <td>row 2, cell 2</td>

    </tr>

</table>

在浏览器显示如下：

HTML 列表是通过标签 <ol>、<ul> 来定义的。

<table width="100%" border="0">

  <tr>

    <td width="50%">

      <h3>有序列表</h3>

      <ol>

	<li>第一个列表项</li>

	<li>第二个列表项</li>

	<li>第三个列表项</li>

      </ol>

    </td>

    <td width="50%">

      <h3>无序列表</h3>

      <ul>

	<li>列表项</li>

	<li>列表项</li>

	<li>列表项</li>

      </ul>

    </td>

  </tr>

</table>

浏览器中显示如下：

HTML 布局 - 使用 <div> 元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>菜单</b><br>

HTML<br>

CSS<br>

JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

版权  runoob.com</div>

</div>

</body>

</html>

上面的 HTML 代码会产生如下结果：

HTML 表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

<form action="post" action="/WeatherForecast/Select_table02">

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

<input type="submit" value="提交">

<input type="reset" value="重置">

</form>

浏览器显示如下：

文本字段 <input type="text">
密码字段 <input type="password">
单选框 <input type="radio">
复选框 <input type="checkbox">
按钮 <input type="button">
提交按钮 <input type="submit">
重置按钮 <input type="reset">

参考：https://www.runoob.com

提示：现在 form 表单几乎很少有人使用了，大多数可以使用 JavaScript AJAX 技术向服务端提交数据。

HTML 内容体系还有很多，但是对新手而已学到这里算入门了，千万不要指望一下能吃下所有内容（贪吃蛇的后果），只有反复的实战才能彻底领会贯通。

到这里，你已经对 HTML 有了初步的认识，为我们以后深入打下了基础，下一篇我们学习 CSS 样式知识！

系列文章导航

原创保护，转载请注明出处：https://www.cnblogs.com/FreeSql/p/16782488.html

Asp.net core 少走弯路系列教程（二）HTML 学习的更多相关文章

学习ASP.NET Core Razor 编程系列十二——在页面中增加校验
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十四——文件上传功能（二）
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Blazor编程系列二十——文件上传（完）
学习ASP.NET Core Blazor编程系列文章之目录学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
学习ASP.NET Core Blazor编程系列二十一——数据刷新
学习ASP.NET Core Blazor编程系列文章之目录学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
学习ASP.NET Core Blazor编程系列二十二——登录（1）
学习ASP.NET Core Blazor编程系列文章之目录学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
学习ASP.NET Core Blazor编程系列二十三——登录（2）
学习ASP.NET Core Blazor编程系列文章之目录学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
学习ASP.NET Core Blazor编程系列二十三——登录（3）
学习ASP.NET Core Blazor编程系列文章之目录学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
学习ASP.NET Core Blazor编程系列二十五——登录（4）
学习ASP.NET Core Blazor编程系列文章之目录学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
学习ASP.NET Core Blazor编程系列二十六——登录（5）
学习ASP.NET Core Blazor编程系列文章之目录学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
学习ASP.NET Core Blazor编程系列二十七——JWT登录（1）
学习ASP.NET Core Blazor编程系列文章之目录学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

随机推荐

Q:oracle备份表语句
oracle备份还原表语句方法1.sql语句(同一数据库服务器) 备份 create table xxx_temp as select * from xxx; 还原 truncate table x ...
Iceberg Spark存储过程-表治理工具
一.简介存储过程(Procedure)是数据库领域的概念,类似于编程语言中的方法或函数,是对实现特定操作的封装,原生的 Spark SQL 中是不支持存储过程的,Iceberg 0.11.0版本之后 ...
Maven配置多仓库
一.配置说明 <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="htt ...
DeepSeek普照的阳光下，继续RAG还是Distillation？
什么是RAG RAG概述 RAG,全称为Retrieval-Augmented Generation(检索增强生成),是一种结合了信息检索和文本生成的人工智能技术.简单来说,RAG通过从大量文档或数据 ...
WPF DevExpress GridColumn ComboBox 显示选择内容的 TooTip
实现显示当前选择的ComboBox中项的ToolTip信息: 1. 设置 GridColumn 的 CellTemplate 为 ComboBoxEdit , 然后自定义他的 ItemContaine ...
[SDOI2008] Sandy的卡片题解
讲一种自认为最暴力的方法. 首先肯定还是用差分的思想,对于每一张卡片进行重新标号,在卡片串与卡片串中插入特殊字符,然后找重复了 \(n\) 次的子串. 这里我们对于每一个子串开一个大小为 \(n\) ...
科研界DeepSeek+AI应用协作攻略来了！
自从DeepSeek爆火 AI应用届开启"精英集结" 与DeepSeek携手撑起国产AI一片天比如,DeepSeek+Midjourney 成为设计师的好帮手 DeepSeek+ ...
pagehelper分页查询的一个坑，明明下一页没有数据了却还是返回了数据
pagehelper分页查询的一个坑,明明下一页没有数据了却还是返回了数据解决:关闭这该死的合理化,如下配置: pagehelper:# helperDialect: mysql reasonabl ...
AI 艺术工具通讯
创刊号 AI 领域的发展速度令人惊叹,回想一年前我们还在为生成正确手指数量的人像而苦苦挣扎的场景,恍如隔世 . 过去两年对开源模型和艺术创作工具而言具有里程碑意义.创意表达的 AI 工具从未像现在这般 ...
2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
在1 使用ollama完成DeepSeek本地部署中使用ollama完成deepSeek的本地部署和运行,此时我可以在PowerShell中通过对话的方式与DeepSeek交流,但此时本地模型不具备联 ...

Asp.net core 少走弯路系列教程（二）HTML 学习

前言