Loading

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 编辑器推荐

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

posted @ 2022-10-11 20:28  FreeSql  阅读(931)  评论(0编辑  收藏  举报