NetCore/Net5 Web应用开发基础-HTML介绍

NetCore/Net5 Web应用开发基础-HTML介绍

HTML 是用来描述网页的一种语言

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言,而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML定义网页的结构和内容

...

HTML的版本
DOCTYPE声明,指定要使用的HTML版本

常见版本声明

HTML 5

<!DOCTYPE html>

HTML 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML元素

HTML元素是描述HTML文档各部分的结构

HTML元素大概有以下几种方式:

元素具有开始标记、结束标记和中间的内容

 <title>Hello World</title>
元素是包括从开始标记到结束标记的所有一切内容
有的元素没有内容所以不需要结束标记如:
<br />

元素也可以嵌套到其他元素

<head><meta charset="utf-8" />

<title>Hello World</title>

</head>

理解一下下面的html代码回到后面的问题

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Hello World</title>

</head>

<body>

这是第一个html页面

</body>

</html>

上面html代码有多少个元素?
5个元素
2.上面html代码有多少个嵌套元素?
4个嵌套元素 3.上面html代码有哪些元素?
html, head, title, body, meta
请对照仔细理解一下

标题与段落

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>标题与段落演示</title>

</head>

<body>

<h1>标题1</h1>

<p>我是段落1</p>

<h2>标题2</h2>

<p>我是段落2</p>

<h3>标题3</h3>

<p>我是段落3</p>

<h4>标题4</h4>

<p>我是段落4</p>

</body>

</html>

...

格式化
仔细对照代码和网页效果就能理解了

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>格式化演示</title>

</head>

<body>

<p>

.NET 5 下一代全平台<b>.Net 框架</b> ,更多更详细介绍我就不复制粘贴了,也没啥意义,<i>网上一搜一大把</i>,

这里只是提一下让大家有个印象就成。因为这个是个很基础的系列,<u>所以很多方面都只是浅尝辄止</u>,

<span style="color:red;">旨在让初学者能够直观上有个概念然后能快速入门</span>,大伙可以根据这个线索提纲有针对性深度学习研究。

</p>

</body>

</html>

...

列表
<html>

<head>

<meta charset="utf-8" />

<title>列表演示</title>

</head>

<body>

<h1>无序列表</h1>

<ul>

<li>Item1</li>

<li>Item1</li>

<li>Item1</li>

</ul>

<h1>有序列表</h1>

<ol>

<li>ItemA</li>

<li>ItemB</li>

<li>ItemC</li>

</ol>

</body>

</html>

...

图片

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>图片演示</title>

</head>

<body>

<img src="images/h5.png" width="80" height="100" />

<img src="images/js.png" width="80" height="100" />

<img src="images/css.png" width="80" height="100" />

</body>

</html>

...


HTML元素属性
HTML元素可以有属性

属性提供有关元素的附加信息
属性总是在开始标签中指定
属性以键/值对的形式出现,如:key=“value”
示例1
<img src=“/images/h5.png”width=“50”height=“60”/>
图片路径(src)和图像大小(width和height)都作为img元素的属性
示例2
<p title=“关于NetCore”>跨平台 .NET Core 是微软推出的最新的跨平台的框架,用它可 以创建的应用可以运行在MAC,Linux上 。</p>
元素P有title属性,值为“About RP”
超链接
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>超链接演示</title>

</head>

<body>

<a href="https://docs.microsoft.com/zh-cn/dotnet/">Net官方文档</a>

<a href="https://www.microsoft.com/zh-cn/">微软中文官网</a>

<a href="Heading.html">标题和段落演示</a>

<a href="Lists.html">列表演示</a>

</body>

</html>

... ...

DIVS

<div>元素是一个块元素,可以用作其他HTML元素的容器。

它可用于将<h1>和<p>分组成块。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>DIV演示</title>

</head>

<body>

<div style="width:450px;background-color:yellow;">

<h1>NET Framework</h1>

<p>NET Framework是用于Windows的新托管代码编程模型。它将强大的功能与新技术结合起来,用于构建具有视觉上引人注目的用户体验的应用程序,实现跨技术边界的无缝通信,并且能支持各种业务流程。</p>

</div>

<div style="width:450px;background-color:lightblue;">

<h1>NET Core</h1>

<p>.NET Core是适用于 Windows、Linux 和 macOS 的免费、开源托管的计算机软件框架,是微软开发的第一个官方版本,具有跨平台能力的应用程序开发框架 (Application Framework),未来也将会支持 FreeBSD 与 Alpine 平台,也是微软在一开始发展时就开源的软件平台 [1] ,它经常也会拿来和现有的开源 .NET 平台 Mono 比较。</p>

</div>

</body>

</html>

...

表单

表单form元素用于前台输入后台获取前台输入相关数据。

在form元素中,有不同类型的输入元素,常用如下:
文本输入

列表

下拉列表

复选框

单选按钮

提交按钮
示例:
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>表单演示</title>

</head>

<body>

<form id="userinfo">

<div>

<label for="name">用户名:</label>

<input type="text" name="name" id="name" />

</div>

<div>

<label for="nation">民族:</label>

<select id="nation">

<option>--请选择--</option>

</select>

</div>

<div>

<label>性别:</label>

<input type="radio" name="gender" id="gender1" />男

<input type="radio" name="gender" id="gender2" />女

</div>

<div>

<label>兴趣爱好:</label>

<input type="checkbox" name="like1" id="like1" />篮球

<input type="checkbox" name="like2" id="like2" />看书

<input type="checkbox" name="like3" id="like3" />跑步

</div>

<div>

<label for="introduce">介绍:</label>

<textarea id="introduce" name="introduce" rows="5" cols="40"></textarea>

</div>

<div>

<input type="submit" value="表单提交" />

</div>

</form>

</body>

</html>

...


HTML元素标识
id属性是HTML元素的标识属性,该值在HTML文档中必须是唯一的

id属性主要用于:

通过CSS指向样式表中的样式

通过JavaScript操纵特定id的元素

示例

<div id=“menu”>
<input type=“text” id=“sno”>


HTML就简单介绍到这里,本节介绍了我们日常web网页开发中所要用到的HTML元素,可以对照代码和运行效果进行理解,可以尝试修改代码然后运行查看实际效果。


下一节将介绍CSS