前端之HTML常见标签（一）

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量66 收藏
点赞数
分类专栏： 前端学习 文章标签： html web html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19831379/article/details/118427552
版权
  • HTML主体标签
<!--告诉浏览器，使用HTML5来解析网页-->
<!DOCTYPE html>
<html>
	<!--头部，网页的整体说明-->
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!--主体，网页的内容-->
	<body>
		<p>p标签表示段落，独占一行</p>
		<!--表示写入注解-->
	</body>
</html>
  •  标题标签
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<h1>论&nbsp;数学的重要性</h1>
		<i>2015.4.5</i>
		<hr>
		<p>aaaaaaaaaa</p>
		<p>bbbbbbbbbb</p>
		<p>故事告诉我：<br> <b>数学很重要</b></p>
	</body>
</html>
  • 列表标签 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新闻列表</title>
	</head>
	<body>
		<!--图片-->
		<h1>科技&nbsp;<img src="img/icon.png"></h1>
		<hr>
		<!--无序列表-->
		<ul>
			<!--超链接-->
			<li><a href="http://www.baidu.com">百度</a></li>
			<li>第二行</li>
			<li>第三行</li>
			<li>第四行</li>
		</ul>
		<!--有序列表-->
		<ol>
			<li><a href="http://www.baidu.com">百度</a></li>
			<li>第二行</li>
			<li>第三行</li>
			<li>第四行</li>
		</ol>
	</body>
</html>
  •  图像标签
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片处理</title>
	</head>
	<body>
		<!--图片是自动从左往右排布，如果一行排布不下就会折行，图片的对齐方式是底部对齐，同时我们可以设置宽高来使图片保持一致-->
		<img src="img/1.jpg" width="400px" height="400px"/>
		<img src="img/2.jpg" width="400px" height="400px"/>
		<img src="img/3.jpg" width="400px" height="400px" />
		<img src="img/4.jpg" width="400px" height="400px" />
		<img src="img/5.jpg" width="400px" height="400px" />
		<img src="img/6.jpg" width="400px" height="400px" />
	</body>
</html>
  • 超链接标签 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="http://www.baidu.com">
			<!--图片也可以点击链接-->
			<img src="./img/6.jpg"/>
			百度知道
		</a>
		<!--targer = _blank，新页面打开-->
		<a href="http://www.baidu.com" target="_blank">百度知道</a>
	</body>
</html>
  • 表格标签 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>table</title>
	</head>
	<body>
		<!--边距为0则没有边界，框距不为0，则框有距离-->
		<table border="1px" cellspacing="0px">
			<!--给一行的所有文字居中，但发现如果有col属性，则不生效-->
			<tr align="center">
				<!--只影响第一列-->
				<!-- <col width="100px" /> -->
				<!--框的宽度, 文字居中显示-->
				<td></td>
				<td width="200px" align="center">初级</td>
				<td>中级</td>
				<td>高级</td>
				<td>专家</td>
			</tr>
			<tr>
				<td>标准</td>
				<td>怼不赢</td>
				<td>不分上下</td>
				<td>怼赢了</td>
				<td>怼离职</td>
			</tr>
			<tr>
				<td>用户A</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>用户B</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>用户C</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<hr/>
		<table border="1px" cellspacing="0">
			<!--设置列宽, col列分组标签-->
			<col width="100px"/>
			<col width="100px"/>
			<col width="100px"/>
			<col width="100px"/>
			<col width="100px"/>
			<col width="100px"/>
			<col width="200px"/>
			<tr height="40px">
				<!--一行占几个单元格-->
				<td colspan="7">个人简历</td>
			</tr>
			<tr height="40px"  align="center">
				<td>姓名</td>
				<td></td>
				<td>性别</td>
				<td></td>
				<td>年龄</td>
				<td></td>
				<!--一列占几个单元格-->
				<td rowspan="4">照片</td>
			</tr>
			<tr height="40px" align="center">
				<td>学历</td>
				<td></td>
				<td>籍贯</td>
				<td colspan="3"></td>
			</tr>
			<tr height="40px" align="center">
				<td>政治面貌</td>
				<td></td>
				<td>电话</td>
				<td colspan="3"></td>
			</tr>
			<tr height="40px" align="center">
				<td>毕业院校</td>
				<td colspan="5"></td>
			</tr>
			<tr height="40px" align="center">
				<td>求职意向</td>
				<td colspan="6"></td>
			</tr>
		</table>
		</body>
</html>

冥极醉醉冥极
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端】HTML的常用标签
qq_43464809的博客
07-29 237
目录 Html的常用标签： Html的标准结构:(html5结构) 2.dtd约束: html>的文本标签分类:(有开始有结束) 换行标签 超链接作用: 常见协议: 图像标签:img 表格标签:title 事件编程三要素: 前端三个基础点: Html（载体）,CSS（修饰）,js（网页中的部分特效） Html：建筑的主体结构 CSS ：给主体结构修饰(网页的样式...
前端—HTML中常见标签的使用
元宝的博客
12-20 497
HTML 1.常见标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习</title> <link rel="stylesheet" href="../css/pra.css"><!--用来写css文件地址的,rel表明文档的样式表--> </head> <body>
前端基础—html常见标签
xyue_的博客
04-13 2303
HTML常见标签 一、块标签 1、内容 （1）div 标签（无语意） （2）h1~h6 标题标签 1、h1 ~ h3 都具备seo功能 2、SEO: 网络引擎搜索优化 3、h1大标题一个页面最多出现1次 （3）p 段落标签 （4）ul 无序列表：unorder list （5）ol 有序列表： order list （6）li 列表项: list-item 下面展示一些 代码 。 <body> <ol> <li>锄禾日当午</li>
前端——HTML中的常用标签详解
xh1605004242的博客
05-06 7066
HTML中的常用标签
HTML中的常见标签
m0_63191002的博客
10-17 2588
HTML代码通常使用标签的形式来展示内容．1、标签是以键值对的形式组织数据，例如< p>hello< /p>，此处hello是值，值可以随意更改成任何值都可以，两边的标签是键。1、标签名会放在中，大部分标签成对出现，例如< a>标签,< a>为开始标签,< /a>为结束标签.结束标签一般在标签名前含有 /。2、少数标签只有开始标签，没有结束标签。例如< br>标签，这样的标签称为 单标签。
HTML的常见标签.docx
08-03
本文将详细介绍HTML的常见标签，按照它们的功能分为七个部分：基础部分、表单部分、图像部分、音频部分、链接部分、列表部分和表格部分。这些标签对于HTML初学者来说极其重要，也适合作为参考文档快速查询使用。 ##...
前端学习day01-HTML标签01
06-21
列表是HTML中常见的元素，有序列表`<ol>`和无序列表`<ul>`以及它们的子标签`<li>`用于创建列表项。例如： ```html 项目1 项目2 项目3 ``` 表格`<table>`、行`<tr>`、列`<th>`和数据单元格`<td>`是组织数据的...
三种标签云前端效果自选.zip
08-25
在这个场景中，我们关注的是一个名为“三种标签云前端效果自选.zip”的压缩包，其中包含了一些使用HTML实现的标签云效果。标签云通常用于网站上，以一种视觉上吸引人的方式显示关键字或主题，帮助用户快速浏览和点击...
Web前端基础：HTML5超链接标签.pptx
05-06
HTML5 是Web前端开发的基础，其中超链接标签`<a>`是构建网页交互性的重要元素。超链接允许用户从一个页面跳转到另一个页面，无论是同一网站内的不同页面，还是互联网上的其他任何位置。本篇将详细介绍HTML5中的...
前端html入门学习资源
02-24
本资源包提供了丰富的学习材料，帮助初学者入门HTML，了解并掌握其基本语法和常见标签的用法。 1. **表格.html**：HTML中的`<table>`标签用于创建表格，是展示数据的一种常见方式。`<tr>`表示行，`<th>`定义表头，`...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1157
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 1019
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 407
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 250
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。
uu0216的博客
07-09 776
行内样式：使用 HTML 标签的 style 属性定义 CSS 样式； 内嵌样式：使用 style 标签在 HTML 文档头部（ 通常在 head 之间）定义 CSS 样式； 链接式：使用 link 标签引入外部 CSS 样式表文件。 导入式：使用 @import 命令导入外部 CSS 样式表文件。
html&css基础
antyuki的博客
07-09 740
/
HTML(29)——立体呈现
m0_74386799的博客
07-09 470
作用：设置元素的子元素是位于3D空间中还是平面中。将两个盒子分开，添加一个旋转的效果使其更明显。属性名：transform-style。为了更好的视觉效果我又添加了视距。原则给它们定位，最后。
HTML 标签简写及全称:表格内容将通过JavaScript动态生成
lulei5153的博客
07-09 241
【代码】HTML 标签简写及全称:表格内容将通过JavaScript动态生成。
初识HTML
Dxito_的博客
07-09 863
⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等。在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签，p表示一个段落。• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗)," "表⽰没边框.
《Html》前端学习笔记
04-12
在前端开发中，HTML是不可或缺的一部分，它是超文本标记语言，主要用于结构化网页的内容。一个网页通常由HTML、CSS和JavaScript三部分组成。 HTML负责网页的结构，决定了网页将显示什么内容。它使用不同的标签来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值