「前端-HTML」 HTML-标签的基本使用-第一篇

前端-HTML-第一篇

HTML系列

此系列为三篇-会讲解HTML语言-HTML都写完了,HTML我花了四天学习,文档都已经写好了,在我的Typora中,最近在学习CSS,还没彻底的整理HTML,所以,我有时间了更新以下两篇,耐性等待…………PS:本人是正在自学渗透的小白,欢迎大佬带我入坑,在校学生

建议按照我写的动手做一遍,编辑器安装包,可以联系我,fengzilin_blog@163.com


概念

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。

编辑器

  • Dreamweaver、Sublime、VS Code、notepad++、phpstorm、

Dreamweaver:简称DW,适合html+css开发,优点:代码提示比较好,缺点:打开速度慢,收费

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

notepad++:小型的编辑器,优点:打开速度快,缺点:代码提示需要手动设置,做大型项目不太方便

Sublime:适合javascript开发,优点:快捷操作比较方便,打开速度比较快

phpstorm:适合php开发

HTML基本结构

<!DOCTYPE html> 
<html>
	<head>
           <meta charset="utf-8">
		<title>我的第一个网页</title>
	</head>
	<body>
	这是我的第一网页
	</body>		
</html>
标签说明
<!DOCTYPE html>声明为 HTML5 文档
<meta charset="utf-8">字符集声明
<html></html>页面的根元素
<head></head>这个是标题标签、配合<title></title>标签写标题
<title></title>标题
<body></body>写内容的

在这里插入图片描述

HTML注释

注释:提示给开发人员或者便于开发人员的理解和阅读、注释只是便于理解,在浏览器中是不解析的

语法:<!-- 注释内容 -->

HTML常用标签

1.标题

语法:<h1>填写标题内容</h2>

特点:

  1. 独占一行、文字加粗、h1最大,h6最小
  2. DW快捷键 Ctrl+1 <h1></h1>标签,依次类推

案例

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>枫梓林</title>
	</head>
	<!--标题运用-->
	<body>
		<h1>标题h1</h1>
		<h2>标题h2</h2>
		<h3>标题h3</h3>
		<h4>标题h4</h4>
		<h5>标题h5</h5>
		<h6>标题h6</h6>
	</body>
</html>

在这里插入图片描述

2.段落标记

语法:<p>段落</p>

特点:

  1. 常用划分段落使用、排版

案例

<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
		<title>段落</title>
	</head>
		<body>
			<h1>枫梓林</h1>
			<p>
			枫梓林是一个正在学习web渗透的小白;
			</p>
			<p>
			枫梓林,热爱技术。
			</p>
		</body>
</html>

在这里插入图片描述

3.换行及水平线

语法:<hr>     水平线
     <br>      换行

4.文字标记

粗体、斜体、下划线

理解:经常做word就可以看到word上面的[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述在HTML中同样通用

语法:<b></b>   加粗
	 <i></i>   斜体
	 <u></u>   下划线

案例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>字体标记</title>
</head>
<body>
	<b>加粗</b> <br>
	<i>倾斜</i> <br>
	<u>带有下划线</u>
</body>
</html>

在这里插入图片描述

标签的属性

标签的分类

单标签:单个的标签叫做单标签,没有内容只有属性-----><hr>

双标签:成对出现的标签叫双标签,内容写在标签中间-----><p>段落</p>

属性

  • HTML的标签可以设置属性的
  • 属性中可以添加附加信息
  • 属性没有顺序
  • 属性之间用空格隔开
  • 一个标签可以有多个属性
  • 对应的值要用引号引起来("" ,’’)

属性实例

语法:<标签名 属性1="值1" 属性="值2"></标签名>
    	<h1 align="center"> 标签的属性 </h1> 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签的属性</title>
</head>
<body>
	<h1 align="center"> 标签的属性 </h1>   <!-- align属性:规定了h1标签中的内容水平对齐方式,这里不比纠结align,后面会讲的center表示居中对齐-->
	<hr color="#2A13EB" width="500">      <!--color表示此标签的颜色 windth表示此标签的宽度-->
</body>
</html>

在这里插入图片描述

HTML 链接

<a></a>
语法:<a href="https://blog.csdn.net/fengzilin1973" target="_blank">超链接</a>

在这里插入图片描述

特点:

常用于链接的跳转,相当于新闻链接点击就跳转另外一个地址,也可以本地链接,就是跳转自己写的另外一页面、编辑的内容会变蓝色并且有下划线

标签的属性

属性说明
href指定链接的地址。(可以是外部链接,本地链接,下载链接)下载链接在浏览器未识别格式将会下载
target目标属性
_blank跳转到一个新的窗口页面
_title在原页面的窗口中打开新页面

案例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超链接的运用</title>
</head>
<body>
	<hr>
	<!-- 
内部(本地)链接  target="_blank" 意思是新开一个页面打开链接
-->
	<a href="12.小案例-列表.html" >小案例</a>
	<hr>
	<!---外部链接-->
	<a href="https://blog.csdn.net/fengzilin1973" target="">超链接</a>
	<hr>
	<!--浏览器无法识别.pptx 格式的文件就会下载-->
	<a href="ppt.pptx">PPT下载</a>
	<hr>
</body>
</html>

在这里插入图片描述

HTML 图像

语法;<img src='图片的源' alt='' title='' />
属性说明
src图片的地址,是本地链接
alt当图片无法显示的时候,将alt后面的文字显示在图片的位置上
title当鼠标放到图片位置的时候显示提醒性文字

案例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片链接</title>
</head>
    
<body>
	<img src="1.jpg" title="图片"/>   <!--src为图片的路径,可以写相对路劲或者绝对路径 title就是鼠标点击的,如下显示的图片 就是title的作用-->
</body>
</html>

在这里插入图片描述

第一篇 HTML标签-及属性总结一览表

在这里插入图片描述

总结

以上就是今天要讲的内容,本文仅仅简单介绍了HTML的使用,HTML的编辑器,怎么插入图片,链接,还有常用的标签等等。
相关系列
第一篇:「前端-HTML」 HTML-标签的基本使用-第一篇
第二篇:「前端-HTML」 HTML-表格-表单-第二篇
第三篇:「前端-HTML」 HTML-H5-新特性-第三篇

            创作不易,感谢支持,转载请联系我fengzilin_blog@163.com,我是枫梓林

已标记关键词 清除标记
相关推荐
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页