您好,登录后才能下订单哦!
这篇文章主要介绍“Asp.Net Core Web网站应用HTML实例分析”,在日常操作中,相信很多人在Asp.Net Core Web网站应用HTML实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Asp.Net Core Web网站应用HTML实例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
HTML 是用来形容网页的一种语言
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来形容网页
HTML定义网页的结构和内容
打开百度APP看高清图片
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元素大概有以下几种方式:
元素具备开始标记、结束标记和中间的内容
Hello World元素是包括从开始标记到结束标记的所有一切内容有的元素没有内容所以不需要结束标记如:
元素也可以嵌套到其余元素
<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>
列表
<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>
<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元素中,有不同类型的输入元素,常用如下:文本输入
列表
下拉列表
复选框
单选按钮
提交按钮示例:
<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的元素
到此,关于“Asp.Net Core Web网站应用HTML实例分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。