Asp.net core 少走弯路系列教程（二）HTML 学习
前言
新人学习成本很高，网络上太多的名词和框架，全部学习会浪费大量的时间和精力。
新手缺乏学习内容的辨别能力，本系列文章为新手过滤掉不适合的学习内容（比如多线程等等），让新手少走弯路直通罗马。
作者认为新人应该先打好基础，不要直接学习框架，例如先掌握 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 样式知识！
系列文章导航
- （一）了解 W3C
- （二）HTML 学习
- （三）CSS 学习
- （四）JavaScript 学习
- （五）了解 HTTP 协议
- （六）C# 语法学习
- （七）WebApi 学习
- （八）数据库 CRUD 增删改查学习
- （九）待续。。
原创保护，转载请注明出处：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应 ...
随机推荐
- MySQL-8.0.20
版本: 8.0.20 操作: Centos 7 Linux 未介绍针对数据库的详细操作,如有需求请前往 第一章 MySQL的介绍及安装 1.介绍 1.1 数据库管理系统(DBMS) RDBMS : O ...
- CF1896H2
看不懂的题 首先考虑 \([a_i\neq b_i]=-2a_ib_i+a_i+b_i\),所以: \[f(a,b)=\sum a_i+\sum b_i-2\sum a_ib_i=N-2\sum a_ ...
- Flink中的时间分类
一.分类 1.1 事件时间:EventTime 事件发⽣的时间 事件时间是每个单独事件在其产⽣进程上发⽣的时间,这个时间通常在处理的消息体中,如创建时间 在事件时间中,时间值 取决于数据产⽣记录的时间 ...
- Redis 持久化原理分析和使用建议
作者:来自 vivo 互联网存储团队- Qiu Xu 本文主要介绍了 Redis 提供的三大持久化机制,即 AOF 日志.RDB 快照以及混合持久化机制. 一.Redis 为什么需要进行持久化 Re ...
- 2025AI应用元年，DeepSeek让领域小模型训练成本急剧下降！
关注公众号回复1 获取一线.总监.高管<管理秘籍> 模型训练俗称炼丹,而炼丹是修士特权,这就显得模型训练离普通人很远了. 虽然是笑谈,但如果对其中情况不太了解确实也会因为其背后深厚.复杂的 ...
- 一种将历史地图坐标配准到GIS中的方法
经常我们看到历史地图影像,比如谭图里面的各个历史朝代的大地图, 然后我们希望利用这个影像作为图层或者叫底图,然后在GIS软件上编辑一些矢量文件, 从而产生的地图矢量文件具有真实的经纬度坐标,不是单单的 ...
- 功率MOS管的参数说明
图解功率MOS管的每一个参数! 最大额定参数 最大额定参数,所有数值取得条件(Ta=25℃) VDSS 最大漏-源电压 在栅源短接,漏-源额定电压(VDSS)是指漏-源未发生雪崩击穿前所能施加的最 ...
- MySQL - [17] Oracle、SQLServer、MySQL数据类型对比
题记部分 一.数据类型对比 对应关系 (1)整数类型 Oracle的NUMBER(*,0) 对应 SQL Server的INT 和 MySQL的INT Oracle的BIGINT 可能需要映射到SQL ...
- Linux - 服务器磁盘 Raid & 分区 & 挂载
一.流计算服务器 有一台流处理服务器(系统盘:2*600G.数据盘:6*600G)分区挂载如下: 设备名 分区 大小 挂载点 文件系统类型 磁盘用途 分区类别 /dev/sda /dev/sda1 3 ...
- idea中启动web、jsp项目
1. idea打开项目 选择要打开的项目的根目录 2. 项目配置 配置jdk modules配置 添加web 添加依赖 删除爆红的依赖 添加依赖目录或者jar 配置web.xml 配置lib 如果没有 ...