前端技术——HTML快速入门

最新推荐文章于 2023-01-15 19:14:40 发布
最新推荐文章于 2023-01-15 19:14:40 发布
阅读量323 收藏 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
hewenqing
03-02 608
前端基础 学习目标 理解 HTML的概念 HTML标签的分类 HTML标签的关系 HTML标签的语义化 应用 HTML骨架格式 sublime基本使用 一. HTML 初识 HTML 指的是超文本标记语言 (HyperTextMarkupLanguage)是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言 (...
前端基础开篇
lxw的博客
10-10 462
前端基础开篇一、html/css/JavaScript的关系二、相关标签三、图像显示四、表单1. 选择框：2. 下拉框：3、label五、表格 一、html/css/JavaScript的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。 JavaScript是用来实现网页上的特效效果。 二、相关标...
html标题电脑快速输入,HTML代码快速输入
weixin_35587255的博客
06-17 860
广告云服务器1核心2G诞生的第一年，有许多流行的云产品可以满足您的云需求它使用CSS选择器的语法生成代码，从而大大提高了htmlcss代码的编写速度，例如以下示例: 去年年底，该插件已重命名为emmet. 但是emmet不仅更改了名称，还带来了一些新功能. 本文将直观地向您展示. 1.快速编写HTML代码1.初始化HTML文档时需要包含一些固定标签，例如等等，现在您只需要1秒钟即可输入这些标签....
html标签的快捷录入方式（简单掌握，提高效率）
FairyKunKun的博客
03-30 2222
一 <ul> <li><a href=""></a></li> </ul> 如果要写上面的标签，我们可以一个字符一个字符地敲 你还可以尝试这个方法 输入以下内容： ul>li>a 然后按Tap键盘，就可以快速构建 二 <ul> <li><a href=""></a></li> <li><a hr
HTML开头写法
qq_50991473的博客
10-30 4516
HTML5标签 doctype标签 doctype是Document Type(文档类型)的简写，用于说明使用的HTML使用的是什么版本。 放在文档最顶部<!doctype html> html标签 1.最先出现的HTML标签是,表示该以超文本标记语言（html）编写`. 文件的内容 ## head标签 1.标签是一个表示网页头部的标签 meta标签 title标签 title标签的内容出现在浏览器窗口 body标签 最后附上一张图 ...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
总的来说，这份【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是一份全面且实用的学习资料，它涵盖了前端开发的三大核心技术，并结合了个人实践和理解，对于希望入门前端开发的学习者来说是一...
web前端基础——CSS入门
01-20
本文将详细介绍CSS入门的基础知识，包括CSS的引入方式、选择器、字体样式、外观属性以及标签显示模式。 1. CSS的引入方式： - 内部样式：直接在HTML的`<head>`标签内的`<style>`标签中编写CSS代码，这样样式只应用...
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
内容不是很臃肿，适合入门看，欢迎私信交流学习！！
快速编写HTML代码常用的方法
qq_42448606的博客
10-14 4446
在前端开发的过程中，一个最繁琐的工作就是写 HTML、CSS 代码。数量繁多的标签、属性、尖括号、标签闭合等，让前端们甚是苦恼。于是，我向大家推荐 Emmet，它提供了一套非常简单的语法规则，书写起来非常爽快，然后只需要敲一个快捷键就立刻生成对应的 HTML 或 CSS 代码，极大提高了代码书写效率。 Emmet 的前身是大名鼎鼎的 Zen coding，它是一个编辑器插件，需要基于指定的编辑器使用，官方网站提供多编辑器支持，目前它支持的编辑器如下： Sublime Text Eclipse/Aptana
前端必备之HTML基础知识点
会思想的苇草i的博客
12-03 804
前端开发涉及使用HTML、CSS和JavaScript等技术创建网页。HTML（超文本标记语言）是构建网页结构的基础，通过标签描述页面内容。作为前端开发的基础，掌握HTML能够搭建页面框架、嵌入多媒体内容和实现超链接等功能。在前端开发中，HTML扮演着至关重要的角色，是构建网页的基础和起点。
HTML-基础开篇
最新发布
bukine的博客
01-15 1536
通常为双标签,都是成对出现的,一个开始标签一个结束标签,结束标签会比开始标签多一个"/". 单标签,特殊的标签(极少情况),例如
前端 html+css+javascript (三剑客) 未完待续~~~
m0_57642521的博客
11-20 438
网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。 （1）HTML HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。 （2）CSS CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。 内部样式 <style></style>..
前端技术（html)
哈哈哈哈哈哈哈哈的博客
08-22 1083
目录 一、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语言基础
qq_46007633的博客
03-18 537
一、HTML语言基础 1.1.Internet起源： 1989年，开发出简易的超文本浏览/编译器 1993年，第一个图形界面浏览器NCSA Mosaic开发成功 1995年，网景公司的Metscape Navigator,推出了IE浏览器 HTML:超文本标记语言 1.2.HTML结构：<标签>内容<标签> <!DOCTYPE…><!-- 放在所有文件之前进行声明--> <html> <head> <meta
HTML5 基础 第一节
菜鸟心声：学的不仅是技术，更是梦想！
11-08 234
HTML5 基础学习 HTML5 基础 1982 年。英国人蒂姆.伯纳斯.李为了方便世界各地的物理学家能够进行合作研究以及信息共享，创造了 HTML 语言，之后 HTML 发展成互联网上应用最为广泛的标记语言。HTML 是 HyperText Markup Language 的缩写。中文翻译为超文本标识语言。使用 HTML 元素编写的文档称为 HTML 文档。目前最新版本是HTML 5.0。 文档结构 为了能够更好地理解和认识 HTML5 网页，下面给出一个简单的、符合标准的 HTML5 文档结构代码。
html开头格式内容详解,HTML的元素、文档格式标签、HTML链接示例详解
weixin_32673065的博客
06-09 728
本次主要给大家介绍下HTML的元素、文档格式标签、HTML链接的用法，用一种相对通俗一点的语言，容易懂的文字让大家快速掌握html。尽量不用或少用专业术语。以下所写的内容希望能帮助到大家，供大家在学习HTML中进行参考：HTML标记一、HTML的元素1、HTML元素有始有终HTML元素也就是说有开始，也要有结束，如：今朝有酒今朝醉，但要注意，有些标签是自己开始自己结束的，如：。2、HTML可以嵌套...
java: 源发行版 14 与 --enable-preview 一起使用时无效（解决方案）
热门推荐
跌跌撞撞的小白
08-26 1万+
问题描述： 最近新装的IDEA在运行时出现问题：java: 源发行版 14 与 --enable-preview 一起使用时无效 （仅发行版 16 支持预览语言功能） 原因： IDEA当前项目环境JDK与电脑系统JDK版本不一致造成 电脑JDK版本：JDK11 IDEA项目JDK版本：JDK16 IDEA版本：2020.2 解决方法： 1.先查看本机的JDK版本 按住【win+r】输入cmd,打开cmd命令窗口， 输入: java -varsion 可以看到本机电脑为JDK11，再去看IDEA项目

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值