3-1 HTML基础标签

最新推荐文章于 2024-06-21 16:29:17 发布
最新推荐文章于 2024-06-21 16:29:17 发布
阅读量83 收藏
点赞数
文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/langkeyring/article/details/122457311
版权

分类

块级标签

特点
  1. 标签独占一行
  2. 可指定宽、高。
  3. margin和padding的上下左右均对其有效
  4. 多个块状元素标签写在一起，默认排列方式为从上至下
  5. 可以使用margin:0 auto居中对齐
  6. 可以自动换行
常见块级标签
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

行级标签（内联标签）

特点
  1. 与其他标签在一行内
  2. 无法设置宽高，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行。
  3. margin上下无效，只有左右有效果，padding都有效果，会撑大空间；
  4. 不会自动换行
常见行级标签
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联块状标签

特点
  1. 同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
  2. 能够设置宽高
  3. 默认排列方式为从左到右
  4. margin:0 auto无效，但可以使用text-align:center使内容相对于父盒子水平居中对齐
  5. 水平排列，但所有元素默认会有1个空格的间隙，因为元素之间在html中书写有回车换行，浏览器解析会将其解析成一个空格。
  6. 不会自动换行
常见内敛块状标签
<img>、<input>

标签类型转换

  1. display:inline;转换为行内元素
  2. display:linline-block;转换为行内块元素
  3. display:block;转换为块级元素

演示

<!DOCTYPE html>
<!-- 明确HTML版本为HTML5版本，简称H5；只有明确版本，浏览器才能正确显示HTML -->
<!--HTML页面的跟标签-->
<html>
	<!-- head标签包含HTML页面的元数据，head标签中的内容不会显示到浏览器上 -->
	<head>
		<!-- 网页编码格式 -->
		<meta charset="utf-8" />
		<!-- 标题标签 -->
		<title></title>
		<!-- 搜索引擎关键词 -->
		<meta name="keywords" content="前端"/>
		<!-- 网站描述,涉及到SEO(搜索引擎优化) -->
		<meta name="description" content="学习"/>
	</head>
	<body>
		<div id="tips">提示部分</div>
		<!-- 1.基本标签 -->
		<h1>h1标题标签</h1>
		<h6>h6标题标签</h6>
		<!-- 换行 -->
		-你好<br>哈喽
		<p>段落标签,单独占一行</p>哈喽
		<!-- 2.水平线标签 -->
		<hr >
		<!-- 2.文本格式标签;都是行级标签,不换行 -->
		<b>粗体</b>
		<i>斜体</i>
		<small>小字体</small>
		<strong>等价于粗体</strong>
		<del>删除线</del>
		<hr >
		<!-- 3.超链接标签 -->
		<!-- 
		href属性,指定超链接要跳转的地址
		target属性,指定新页面的打开方式
			_blank,在一个新页面打开
			_self(默认),在当前页面打开
		-->	
		<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
		<a href="https://www.baidu.com" target="_self">跳转到百度</a>
		<br>
		<a href="#tips">跳到提示部分</a>
		<!-- 4.图片 -->
		<br>
		<img src="img/1.jpg" title="光标消息显示" width="600px" height="300px">
		<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0818%252Fcf2865b0j00qy1ii8001bc000hs00mmg.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644564130&t=6b4787a7ba7a72b2433b6892f0050c9a" 
		width="300px" height="400px"
		>
		<!-- 5.列表 -->
		<!-- 有序表 -->
		<ul>
			<li>第一个</li>
			<li>第二个</li>
			<li>第三个</li>
		</ul>
		<!-- 无序表 -->
		<ol>
			<li>第一个</li>
			<li>第二个</li>
			<li>第三个</li>
		</ol>
		<!-- 6.表格 -->
		<!-- 
		border属性:表示表格外边框粗细,默认0.
		cellspacing属性:表格个单元格之间的空隙,参数值是数字,表示单元格间隙大小.
		 -->
		<table border="10" cellspacing="0" cellpadding="">
			<tr><!-- 行标签 -->
				<td rowspan="2">单元格1</td>
				<td colspan="2" align="center">单元格2</td>
			</tr>
			<tr><!-- 行标签 -->
				<td>单元格5</td>
				<td>单元格6</td>
			</tr>
			<tr><!-- 行标签 -->
				<td>单元格7</td>
				<td colspan="2">单元格8</td>
			</tr>
		</table>
		<!-- 7.表单 -->
		<br>
		<form action="" method="post">
			<input type="text" placeholder="明文文本框" value=""/>
			<br>
			<input type="password" placeholder="暗文密码" name="" id="" value="" />
			<br>
			<!-- 单选框 -->
			<input type="radio" name="gender" title="单选框" value="1" />男
			<input type="radio" name="gender" title="单选框" value="0" />女
			<br>
			<!-- 复选框 -->
			<input type="checkbox" name="cb1" id="" value="" />北京
			<input type="checkbox" name="cb1" id="" value="" />上海
			<br>
			<!-- 下拉框 -->
			<select name="">
				<option value="">计算机</option>
				<!-- 默认选中 -->
				<option value="" selected="selected">电科</option>
				<option value="">通信</option>
			</select>
			<br>
			<!-- 文本域 -->
			<textarea maxlength="5" rows="" cols=""></textarea>
			<br>
			<!-- 按钮 -->
			<input type="button" name="" id="" value="普通按钮" onclick="alert('123');"/>
			<input type="submit" name="" id="" value="提交按钮" />
			<input type="reset" name="" id="" value="重置按钮" />
			<!-- 隐藏框，不在浏览器显示，用于缓存临时数据 -->
			<input type="hidden" name="" id="" value="隐藏框" />
		</form>
	</body>
</html>
WayserKON
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 中的常用标签用法
罗舒淇的博客
08-22 874
该文章主要讲解了HTML中一些常见的标签
前端基础-html-换行标签
FR的博客
02-10 2634
<!-- 换行标签 场景： 让文字强制换行显示 代码： <br> 语义： 换行 特点： 单标签 让文字强制换行 --> <p>前端技术 <br> 一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开...
html基础-1-树形标签结构
Neptuneyut的博客
05-05 6161
文章目录html概述语法要素文档类型、字符编码和属性转义字符meta标签总体回顾参考 html概述 html的特征是基于标签识别渲染源码，更确切的说是标签树，都是从html这个根标签写起，其下常包括head和body两个处于同一级别的子标签，分别负责浏览器头部（可暂时理解为网址框）以及网页主体的设置。 <html> <!-- 注释 --> <head> ...
安全基础 --- html标签 + 编码（01）
热门推荐
weixin_62443409的博客
07-30 1万+
标签用来折叠内容，浏览器会折叠显示该标签的内容。
HTML基础之基础标签
qq_20179227的博客
08-15 3063
HTML的基础标签 HTML中有许多的标签，这一篇文章，就讲一下HTML的基础标签吧。 在做相关代码编写之前，我们要首先创建一个文件夹，该文件夹的符合正规的HTML页面开发的规格。 0815 //项目文件夹根目录 css //项目页面所引用的css样式 img //项目页面所引用的图片文件 index.html //项目页面 这些文件是比较基本的文件，需要的话，之后还会在...
web---HTML基础知识
Allure泽宇的博客
06-11 5424
HTML基础知识内容总结
头歌-HTML基础
somewon的博客
03-06 9594
四川师范大学 头歌 web应用开发
HTML常用基础标签详解
实泽有之，无泽虚之
03-09 2933
本文通过样例详解HTML常用的基础标签，包括以下标签：html、h1、h2、h3、h4、h5、h6、body、p、a、br、img。
HTML5常用基础标签
weixin_53414403的博客
05-11 3377
HTML5中的标签众多，有时新手刚入门前端很容易步入误区，即想要一把抓掌握所有的知识，其实全部掌握效果不尽人意，相反会让我们学习受挫，效率低下，因此“片面”的学习有助于我们提高学习效率等，对于一些不常用的标签或者知识即查即用。因此都是有哪些常用的基础HTML5标签呢？快来看看吧！ 1.首先是一些重要的文本标签，辟如<div>、<span>、<p>、<h1-h6>、<br>、<hr>、<pre>等等 以下是依据官方解释以及
HTML 基础【2】 -- 表格标签 / 表单标签
Create value with coding
01-16 1万+
请先学习往期内容：HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签 作业分析 上一篇《HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签》给大家留了一个作业： 实现代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <bo...
HTML入门-页面结构&基础标签
01-08
(面试题)三、三个版本和一个标准（面试题）四、html5的扩展五、html创建文件（重点）六、html格式（重点）七、html基本结构（重点）八、注释九、基础标签（重点）十、文本标签十一、布局标签十二、特殊符号 ...
html--2.基础标签
04-09
html--2.基础标签
HTML基础-标签的学习
12-05
本篇文章将详细介绍HTML的基础标签，特别是与列表、表格和表单相关的标签，以及字符实体和语义化标签。 首先，我们来看列表标签。列表在网页设计中广泛用于组织和呈现相关信息。主要有三种类型的列表： 1. **无序...
HTML5基础知识-HTML5多媒体标签.pptx
05-06
单元一 HTML5基础知识端基础前WebHTML5多媒体标签1常用多媒体格式2播放音频audio播放视频video34其他多媒体标签1常用多媒体格式音频格式1、WAV 微软和IBM共同开发的PC标准声音格式，文件后缀名.wav。2、MP3 MP3是一...
前端基础-HTML(meta标签)
01-08
1.编码 示意图 这种情况就是乱码，是因为我们输入的中文，往计算机中保存的时候，最终都要转成2进制的数据形式，也就是说有一个编码的过程，在保存文件的时候默认使用的是ANSI编码格式，浏览器显示文件中...
electron模板【lectron-react-boilerplate】多窗口配置【HtmlWebpackPlugin】多页面配置
weixin_42429220的博客
06-15 616
如果您正在使用进行快速的Electron应用程序开发，您可能会遇到想要在桌面应用程序中拥有多个原生窗口的情况。MacOS窗口图像由提供，来源。
html做一个分组散点图图的软件
最新发布
weixin_47634487的博客
06-21 428
在HTML中创建一个分组散点图，可以结合JavaScript库如D3.js或Plotly.js来实现。这些库提供了强大的数据可视化功能，易于集成和使用。下面是一个使用Plotly.js创建分组散点图的示例： 要添加文件上传功能，可以让用户上传包含数据的文件（例如CSV文件），然后使用JavaScript读取文件并生成散点图。下面是一个示例，展示了如何结合文件上传和用户输入生成分组散点图： 说明： HTML表单：用于用户手动输入每个组的X和Y值。 文件上传：提供了一个文件输入框和按钮，用于上传CSV文件。
html渲染的文字样式大小不统一解决方案
weixin_49720804的博客
06-21 116
用自己输入、粘贴、或者通过按钮插入的文字 在html页面上渲染出来的文字样式大小不统一解决办法
Html_Css问答集(3)
白话魔法师
06-14 893
html与css学习中的一些疑问，问答中轻松获取知识。
用HTML基础标签做网页
03-09
可以使用 HTML 基础标签来创建网页，例如使用 <html> 标签来定义 HTML 文档，使用 <head> 标签来定义文档的头部，使用 <title> 标签来定义文档的标题，使用 <body> 标签来定义文档的主体部分，使用 <h1> 到 <h6> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值