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

2020-10-17 17:30:15 88 收藏
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengzilin1973/article/details/109135465
版权

前端-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，我是枫梓林

已标记关键词 清除标记
HTML基本标签示例使用
Hello, New World!
04-04 193
HTML基本标签的使用1. 结构标签：html、head、title、meta、body2. 排版标签：p、br、hr3. 标题标签：h1、h2、h3、h4、h5、h64. 容器标签：div、span5. 列表标签：ul-li、ol-li、dl-dt-dd6. 图片标签：img7. 链接标签：a8. 表格标签：table-tr-th-td9. 文本标签：b、strong、big、small、em、...
表情包
插入表情
还能输入1000个字符
相关推荐
HTML标签（1）——使用规则
码厩
02-24 1093
HTML称为超文本标记语言，从这个名字上看，我可以知道其中最重要的就是“标记”两个字，我将“标记”理解为HTML的核心。用于标记的符号称为超文本标记语言标签（英文名Hyper Text Markup Language tag），简称HTML标签。HTML标签是HTML语言中最基本的单位，也是HTML(标准通用标记语言下的一个应用)最重要的组成部分。 HTML标签的组成 HTML标签以尖括...
【web前端(八)】html_样式的层叠性、继承性和特殊性
LED_of_Java的博客
08-05 42
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /** * 层叠性： * 这里写了两个div块， * 但是这个明显是冲突的。 * 那么，后面的块里对应的属性， * 就会将前...
HTML常用标签和基本使用
Jessica_Day的博客
04-26 73
HTML 其实非常的简单 以下自己加<标签>符号 A: 标签:<!DOCTYPE> 作用:用来声明 最顶点 B: 标签:HTML 作用:此元素可告知浏览器其自身是一个HTML文档 C: 标签:head 作用:标签用于定义文档的头部，它是所有头部元素的容器- 比如css js jquery json 等等… D: 标签:title 作用:元素可定义文档的...
html标签基本使用
S753019的博客
05-11 23
HTML标签基本操作
weixin_44538322的博客
02-22 190
开发工具与关键技术：Adobe Dreamweaver CC 2017，CSS 作者：谢天林 撰写时间：2019年01月27日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 在书写代码时，我们可以应用一些小技巧来加快我们的书写速度，就比如HTML中的标签书写。 我们可以用一些快捷符号来快速书写标签格式。 ...
HTML基本标签的使用(一)
jinlun_blog
11-14 403
俗话说，好记性不如烂笔头。最近在学习前端开发，顺便整理一下学习笔记，日后方便查询。
HTML的基本使用以及标签详解
槐序二十四的博客
10-29 189
那先说说html吧！它都有一些基础标签，当然，可不是就这么多，标签多的去了。。。 &lt;p&gt;&lt;/p&gt;  段落标签 &lt;h1&gt;&lt;/h1&gt;----&lt;h6&gt;&lt;/h6&gt; 标题标签(字体逐渐变小)  属性：align对齐属性值有：center 中间，left（默认）左，right右 &lt;b&gt;&lt;/b&gt;
Html书写规范，基本标签使用
林锐波
10-11 6974
一、html简介 1、html是什么 Html是用来描述网页的一种语言。 (1)HTML 指的是超文本标记语言 (Hyper Text Markup Language) (2)HTML 不是一种编程语言，而是一种标记语言(markup language,标记语言是一套标记标签(markup tag)); (3)HTML 使用标记标签来描述网页 超文本 标记 语言 语言： 人与计
HTML5 基本标签的使用
pengf_wuxiaowu的博客
04-18 637
HTML5 基本的标签&lt;html&gt;标签  它是html文档的根元素。但是html5允许完全省略这个元素。&lt;head&gt;标签 它是用于定义html文档的头部。但是html5允许完全省略这个元素。&lt;title&gt;标签 它是用于定义html页面的标题。&lt;body&gt;标签 它是用于定义html的页面主体部分。该标签可以指定id、class、style、等核心属性。...
简单html标签的基本用法
baidu_31796423的博客
03-21 243
基本格式： 简单标签： 标题是从 到 是换行，水平线标签 是字体的标签，包括size、color、face.例子：font test 是段落的标签，paragraph 图像标签， 超链标签，anchor 列表标签：（1）无序列表： html css （2）有序列表： html css （3）自定义列表：网页三剑客包含： 制作页面的软件：
html标签语言学习一（基本使用）
gogoboi_jin的博客
05-01 687
上个月忙着换工作，也没什么时间写点东西，今天5.1放假来公司瞎看看，把今天弄得学习总结一下。先说一下为啥想学html，其实从两方面考虑，第一呢还是围绕的测试工作的目的，一直想写一个mock的web页面可以动态的添加接口mock返回，这个也是我下半年接口测试框架添加的重点，思路基于flask做web，我关注了论坛别人写的多少都会用到html，毕竟也是经典的东西学学总是好的。第二呢python的req...
菜菜sklearn课程讲义.rar
03-05
适合正在学习机器学习sklearn库的使用教程，关注即可下载哦~
微信小程序样式开发入门
01-07
讲解微信小程序中样式的入门使用，如何使用传统的css知识点来开发wxss的样式；本节课主要讲解在微信小程序中创建样式的几种 写法，元素选择器的基础使用，id选择器和id派生选择器的使用，class类选择器的使用。
Java基础知识面试题（2020最新版）
ThinkWon的博客
02-19 72万+
文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性？原理是什么Java语言有哪些特点什么是字节码？采用字节码的最大好处是什么什么是Java程序的主类？应用程序和小程序的主类有何不同？Java应用程序与小程序之间有那些差别？Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...
企业员工角色权限管理平台（SpringBoot2.0+Mybatis+Shiro+Vue）
08-07
课程简介： 历经半个多月的时间，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也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中，前端到后端再到数据库，最后再到服务器的上线部署运行等流程，如下图所示：
Java学习指南（Java入门与进阶）
08-09
这是Java学习指南系列课程的第1篇，介绍Java语言的入门语法，引领希望学习Java语言编程的初学者进入Java大门。 本课程不需要其他语言作为基础，可以直接学习。 课程从Java开发平台的下载和安装开始，从浅到深、从易到难，循序渐进地进行语法讲解。 为了让学员更好的掌握Java语言，本课程配套在线的Java题库及答案解析。 相比于其他语言，Java语言更科学、更容易掌握，快来和大家一起学习Java吧。
微信小程序源码-合集5.rar
09-04
微信小程序源码，包含：豆瓣、微信、论坛、停车、房贷计算、股票、蜗牛生活、物品回收、学车预约、住房装修、斗鱼直播、水利、快拍、同城等源码。
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页