前端技术——HTML快速入门

最新推荐文章于 2022-12-03 10:41:04 发布
最新推荐文章于 2022-12-03 10:41:04 发布
阅读量320 收藏 1
点赞数 1
分类专栏： 前端技术 javaSE 文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45819587/article/details/120000329
版权

一、快速入门

  1. html文档的后缀名
    .html和.htm两种都可以，没有区别。
  2. 标签的分类
  • 围堵标签：有开始标签和结束标签，例如<html></html>
  • 自闭和标签：开始标签和结束标签都在一个标签中<br/>
  1. 标签可以嵌套但是嵌套的语法要正确
正确案例：<p><a></a><p>
错误案例：<p><a></p></a>
  1. 标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
例如：
<p id="p1" name="p1"></p>
  1. html标签不区分大小写，建议全部小写

二、HTML常用标签

HTML中的标签有很多，这里列举其中比较常用的标签。

1. 文本标签

1.1 标题标签

标题标签h1~h6:字体逐渐缩小
一般用在文章的标题上。

		<h1>1级标题</h1>
		<h2>2级标题</h2>
		<h3>3级标题</h3>
		<h4>4级标题</h4>
		<h5>5级标题</h5>
		<h6>6级标题</h6>

效果展示：
在这里插入图片描述

1.2 段落标签

段落标签<p></p>一般用在正文上。

		<h2>悯农</h2>
		<p>锄禾日当午，</p>
		<p>汗滴禾下土。</p>
		<p>谁知盘中餐，</p>
		<p>粒粒皆辛苦。</p>

效果展示：
在这里插入图片描述

1.3 换行标签

换行标签<br />：一般用在段落中强制换行。

		<h2>悯农</h2>
		<p>锄禾日当午，<br />汗滴禾下土。</p>
		<p>谁知盘中餐，<br />粒粒皆辛苦。</p>

效果展示：
在这里插入图片描述

1.4 水平线标签

水平线标签<hr />：一般用来分隔内容。

		<p>床前明月光</p>
		<hr />
		<p>疑是地上霜</p>

效果展示：
在这里插入图片描述

1.5 范围标签

范围标签<span></span>：一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。

<p>一般在大段内容中，为了<span style="color: red;">突出部分内容</span>的时候使用的标签</p>

效果展示：
在这里插入图片描述
ps：不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容的样子，才通过范围标签包裹，然后修改它 的样式。

2. 图片标签

2.1 基本属性

显示图片用标签：<img/>
常用属性：src:指定图片的路径
路径分类：

  1. 相对路径（推荐）：
    例如：<img src=img/img.jpg />
    表示与当前文件同级的img文件夹下的img.jpg图片
    ../表示上一级目录
    例如：<img src="../img/img.jpg" />
    表示当前文件上一级目录中的img文件夹下的img.jpg图片
  2. 绝对路径（不推荐）：
    一般都是以盘符开头，例如：C:\User\hyh\picture\image\img.jpg

title：
作用1：鼠标悬浮在图片上的时候显示的文字
作用2：当图片因为各种原因无法正常显示的时候，应该显示图片的位置显示title中的文字

alt:与title作用相同，但是有些浏览器不支持该属性，所以一般使用title属性

width和height：宽度和高度，设置之后图片可能会失真

举例：

<img src="img/img.png" title="Hello,我是呆萌熊" width="200px" height="230px" />

表示的是与当前文件同级的img文件夹下的img.jpg图片，当鼠标悬停在图片上的时候显示‘Hello，我是呆萌熊’文字，并设置宽度为200像素，高度为230像素。
效果展示：
Hello,我是呆萌熊

2.2 设置图片的热点区域

设置图片的热点区域：

<img src="img/bg1.png" usemap="#地图名称" />
<map name="自定义地图名称">
	<area shape="形状名称" （三种取值：circle-圆形，rect-矩形，poly-多边形）
	 coords="坐标" （多个值之间用逗号隔开）
	 href="circle.html" title="圆形" />
	 circle-圆形：有三个数字，分别是圆心的横坐标，纵坐标和圆半径
	 rect-矩形：有4个数字：分别是左上角的横纵坐标、右下角的横纵坐标
	 poly-多边形：取决于边数：按顺时针写好每个横纵坐标
	 href="点击该区域的时候跳转的URL.html"
	 title="鼠标悬浮在该区域的时候显示的文字" />
</map>

举例：

<img src="img/bg1.png" usemap="#myMap" />
<map name="myMap">
	<area shape="circle" coords="100,100,100" href="circle.html" title="圆形" />
	<area shape="rect" coords="400,100,600,200" href="rect.html" title="矩形" />
	<area shape="poly" coords="500,300,600,400,500,400" href="poly_triangle.html" title="三角形" />
	<area shape="poly" coords="300,240,400,300,360,400,240,400,200,300" href="poly.html" title="多边形" />
</map>

效果展示：
bg1.jpg
点击圆形，跳转到circle.html页面
circle.html页面

3. 列表标签

一般用在导航上

3.1 无序列表

ul–li：无序列表，li标签可以有多个；推荐ul中只有li标签，如果想嵌套，建议在li中

<ul>
	<!--无序列表-->
	<li>超市首页</li>
	<li>超值量贩</li>
	<li>品牌特卖</li>
	<li>企业采购</li>
</ul>

效果展示：
无序列表

3.2 有序列表

ol–li：有序列表，与无序列表功能一样，只是默认的样式不同；可以与无序列表相互替换。

<ol>
	<!--有序列表-->
	<li>超市首页</li>
	<li>超值量贩</li>
	<li>品牌特卖</li>
	<li>企业采购</li>
</ol>

效果展示：
有序列表

4. 定义描述标签

一般用在图文混编的场景中。

<dl>
	<dt>热销产品</dt>
	<dd>产品名称：小熊饼干 巧克力 澳大利亚进口</dd>
	<dd>价格：￥168.00</dd>
</dl>

展示效果：
在这里插入图片描述

5. 布局标签层div

div一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。

三、 超链接

超链接一般有两个作用：1、用来实现页面间的跳转；2、实现锚链接功能

1. 页面间的跳转

<a href="circle.html" target="_blank">点我试试</a>

a:超链接，作用：跳转到其他资源
属性：href=“目标资源路径” //路径推荐相对路径
target=“打开资源的位置”
默认值：_self(在当前页面打开)
常用值：_blank(在新页面打开资源)

2. 锚链接

当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一屏，右下角经常会出现返回顶部的按钮链接，这个就是锚链接实现的。这个定位可以实现本页面间的锚链接也可以实现不同页面的锚链接。

使用锚链接步骤：
1、目标位置定义锚点<a name="锚点名称"></a>
2、超链接的href属性使用锚点<a href="#锚点名称" target="_self">锚链接</a>

<!--锚链接-->
<!--
	步骤2：在href属性中引用刚刚定义的锚点，名称前带#
-->
<a href="#sport" target="_self">锚链接——点击跳转到【运动户外】</a>
<div style="height: 500px; background: lightblue;">
	<h1>品牌热卖----</h1>
</div>
<div style="height: 500px; background: antiquewhite;">
	<h1>品牌热卖----</h1>
</div>
<div style="height: 500px; background: lemonchiffon;">
	<h1>品牌热卖----</h1>
</div>
<!--
	步骤1：定义锚点
		该目标位置定义一个只有name属性的超链接即可
-->
<div style="height: 500px; background: lavender;">
	<a name="sport">户外运动</a>
</div>

四、表格标签

1. 规则表格

常用属性：
height：高度
width：宽度
border：边框
cellpadding：内容与单元格之间的距离
cellspacing：单元格和单元格之间的距离

<table border="1" cellpadding="0" cellspacing="0" width="90%" height="200px">
	tr:定义行
	常用属性：
		align:文本水平方向上的对齐方式
			有三个取值：left(默认左对齐)、center(居中对齐)、right(右对齐)
	<tr>
		th和td标签都用来定义单元格
		th:一般用来定义表头单元格，即做标题的那一行中的单元格
		td:一般用来定义非表头单元格，即除了标题正文内容的单元格
		但是没有严格的限制
		常用属性：valign：文本垂直方向上的对齐方式
			top:顶部对齐
			bottom：底部对齐
			middle：垂直居中
		<td align="center">序号</td><td>商品名称</td><td>价格</td>
	</tr>
	<tr>
		<td valign="top">①</td><td>饼干</td><td>￥88</td>
	</tr>
		<td valign="center">②</td><td>奶粉</td><td>￥128</td>
	</tr>
</table>

效果展示：
规则表格

2. 不规则表格

不规则表格可以跨行和跨列

<table border="1" cellpadding="0" cellspacing="0" width="90%" height="200px">
	不规则表格的常用属性：
		colspan:合并列
		rowspan:合并行
	<tr>
		<td colspan="3" align="center">个人信息</td>
		<!--
			colspan="3" 表示他要合并包括自身在内的本行三列单元格
		-->
	</tr>
	<tr>
		<td>姓名 </td><td>XXX</td><td rowspan="3" align="center"><img src="img/xiaoxin.jpg" width="160px" /></td>
		<!--
			rowspan="3" 表示它要合并包括自身在内的本列的三行单元格
		-->
	</tr>
		<td>出生 </td><td>2020.8.10</td>
	</tr>
	</tr>
		<td>电话 </td><td>13737645821</td>
	</tr>
</table>

效果展示：
不规则表格

3. 表格的高级标签

表格的高级标签：标题标签和逻辑分区标签

<!--
	表格的高级标签
-->
<table border="1" cellpadding="10" cellspacing="0" width="90%" >
	<!--
		caption:表格的标题
		thead、tbody、tfoot都是逻辑分区的标签，没有编写样式之前对整体的结构没有任何的影响
		ps:如果没有编写逻辑分区标签，浏览器默认把所有行放入tbody标签中，即table的子节点默认是tbody
	-->
	<caption>资产负债表</caption>
	<thead style="background: lavenderblush;">
		</tr>
			<td>月份 </td><td>负债</td><td>资产</td>
		</tr>
	</thead>
	<tbody style="background: ivory;">
		<tr>
			<td>1月</td><td>1000</td><td>1000</td>
		</tr>
		<tr>
			<td>2月 </td><td>2000</td><td >2000</td>
		</tr>
			<td>3月 </td><td>3000</td><td>3000</td>
		</tr>
	</tbody>
	<tfoot style="background: paleturquoise;">
		</tr>
			<td>总计 </td><td>6000</td><td>6000</td>
		</tr>
	</tfoot>
</table>

效果展示：
表格的高级标签

进击的小白hyh
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端技术HTML、CSS
中國颜值半壁江山的博客
01-07 630
1、html 20个标签 <!DOCTYPE html> <!-- 标准对应关系标头 --> <html lang="en"> <!-- 起始,类似html这种格式 ：<html>dadadfad</html>叫一个html标签 --> <!-- lang="en"叫标签内部的属性 --> ...
前端技术（html)
哈哈哈哈哈哈哈哈的博客
08-22 1078
目录 一、HTML 1. 概念 2. 快速入门 3. 开发工具 HBuilder 3.1 HBuilder介绍 3.2 HBuilder下载 3.3 HBuilder的安装与使用 3.4 使用HBuilder创建项目 4. HTML文档的基本结构 4.1 基本结构 4.2 HTML注释 5. HTML中常用标签 5.1.文本标签 5.2 图片标签 5.3列表标签 5.4 定义描述标签 5.5 布局标签 层 div 5.6 标签分类 6.超链接 6.1 页...
Web前端技术HTML
zssxcj的博客
10-03 428
标签之前，表明该文档是HTML5文档（HTML5是HTML的第五个版本）2、HTML标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个‘/’，开始标签和结束标签之间的就是标签的内容。eg：、4）HTML中有部分标签是可以嵌套的，如：段落，但不能交叉。2、称为根标签，所有的网页标签都在
前端网页技术HTML
qq_38361425的博客
08-10 621
前端技术： 学习方法 前端要怎么学？ 前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单，不亚于后端开发，甚至难度超越了后端开发。 但从整体来看（前端占软件开发总量的百分之十左右，地位可见一斑）；从技术的含金量来看（如：业务功能是核心
前端技术学习第一讲：HTML
跟着老高学Java
03-23 1575
HTML 一、什么是HTML HTML的英文全称是 Hyper Text Markup Language，为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 二、HTML有什么特点 简易性：HTML版本升级采用超集方式，从而更加灵活方便。 可扩展性：HTML的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
总的来说，这份【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是一份全面且实用的学习资料，它涵盖了前端开发的三大核心技术，并结合了个人实践和理解，对于希望入门前端开发的学习者来说是一...
Web前端开发技术——HTML、CSS、JavaScript
07-15
内容编排结构合理，由浅入深、循序渐进地引导读者快速入门，并能提高初级及以上读者的实际应用水平，让读者能够快速适应岗位的需求。 全书共分为15章。第1章Web前端开发技术综述； 第2章HTML基础； 第3章格式化文字...
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
html思维导图——培训总结
05-22
内容不是很臃肿，适合入门看，欢迎私信交流学习！！
前端学习（一）——H5学习笔记
08-09
HTML入门
web前端技术总结——HTML（包括html5）
weixin_44660087的博客
04-08 503
WEB前端技术总结——HTML（包括html5） 目录WEB前端技术总结——HTML（包括html5）一：HTML基础知识1：常用标签2：meta标签的作用3：内联框架4：表格重要属性二：canvas画布1: js定义画布画笔2: canvas绘制矩形3：canvas绘制路径4：canvas绘制三角形5：save和restore6：canvas画圆7：canvas中的变换8：canvas的...
HTML5 基础 第一节
菜鸟心声：学的不仅是技术，更是梦想！
11-08 232
HTML5 基础学习 HTML5 基础 1982 年。英国人蒂姆.伯纳斯.李为了方便世界各地的物理学家能够进行合作研究以及信息共享，创造了 HTML 语言，之后 HTML 发展成互联网上应用最为广泛的标记语言。HTML 是 HyperText Markup Language 的缩写。中文翻译为超文本标识语言。使用 HTML 元素编写的文档称为 HTML 文档。目前最新版本是HTML 5.0。 文档结构 为了能够更好地理解和认识 HTML5 网页，下面给出一个简单的、符合标准的 HTML5 文档结构代码。
前端之HTML
qq_774952435的博客
04-28 2181
html基础
前端技术分享之HTML&&HTML5
一剑飘雪的博客
10-08 951
前端技术分享之HTML&&HTML5 主要介绍了HTML的元素及其分类，HTML5新增的API及其用法
【教程】HTML快速学习
风舞雪凌月的博客
06-06 882
【教程】html快速学习备注 备注 2021/4/8 星期四 由于计算机专业大家都比较重视后端，导致我现在找不到理想的前端人员，我只能自己来学习一下前端技术了
web前端技术——一、HTML语言基础
qq_46007633的博客
03-18 529
一、HTML语言基础 1.1.Internet起源： 1989年，开发出简易的超文本浏览/编译器 1993年，第一个图形界面浏览器NCSA Mosaic开发成功 1995年，网景公司的Metscape Navigator,推出了IE浏览器 HTML:超文本标记语言 1.2.HTML结构：<标签>内容<标签> <!DOCTYPE…><!-- 放在所有文件之前进行声明--> <html> <head> <meta
前端开发-HTML基础
weixin_51059952的博客
05-09 862
#博学谷IT学习技术支持# 目录 1.HTML的概念 2.HTML骨架结构 3.HTML标签的结构 4.HTML标签的关系 5.HTML标签 (1).标题标签 (2).段落标签 (3).换行标签 (4).文本格式化标签 (5).图片标签 (6).音频标签 (7).视频标签 (8).链接标签 1.HTML的概念 HTML（Hyper Text Markup Language）中文译为：超文本标记语言 html是专门用于网页开发的语言，主要通过HTML标签对网页中的文本..
前端必备之HTML基础知识点
会思想的苇草i的博客
12-03 759
前端开发涉及使用HTML、CSS和JavaScript等技术创建网页。HTML（超文本标记语言）是构建网页结构的基础，通过标签描述页面内容。作为前端开发的基础，掌握HTML能够搭建页面框架、嵌入多媒体内容和实现超链接等功能。在前端开发中，HTML扮演着至关重要的角色，是构建网页的基础和起点。
html入门—前端开发必学基础
yunduanaoligei的博客
12-20 488
今天分享下”html入门—前端开发必学基础“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 1 HTML介绍 1.1 代码初体验，制作第一个网页 XML/HTML Code复制内容到剪贴板 制作我的第一个网页 Hello World 1.2 HTML和CSS的关系 学习培训web前端
Web前端开发技术——HTML,CSS,JavaScript 答案
最新发布
05-20
1. HTML（HyperText Markup Language）：用于创建网页结构和内容的标记语言。 2. CSS（Cascading Style Sheets）...同时，还有其他一些相关技术，如jQuery、Bootstrap、React等，可以进一步增强 Web 应用程序的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值