HTML一些简单常用的标签

最新推荐文章于 2023-05-05 16:34:10 发布

luo1904695600

最新推荐文章于 2023-05-05 16:34:10 发布

阅读量202

点赞数

分类专栏： HTML JavaWeb 笔记总结

本文链接：https://blog.csdn.net/luo1904695600/article/details/105208763

版权

笔记总结同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

JavaWeb

1 篇文章 0 订阅

订阅专栏

1、HTML文件结构

一个标准的HTML文件

<!DOCTYPE html>		<!-- 定义HTML文件的格式 -->

<html lang="en">	<!-- 指定文件的语言 -->
<head>				<!-- 头标签 -->

    <meta charset="UTF-8">	<!-- 元标签，描述一个HTML的信息，例如编码格式 -->
    <title>测试</title>		<!-- 标题标签，指定网页的标题 -->
</head>

<body>				<!-- 体标签 -->

	<!-- 内容标签，网页的内容写在体标签里 -->

</body>

</html>

2、常用标签

2.1、标题标签

<h1></h1>	<!-- 最大是h1 -->
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>	<!-- 最小是h6 -->

2.2、文本标签

超链接标签的 target中属性的值有：_self(自己)，在当前页面中打开；_blank（空白）在另外一个新的空白的tab中打开。

p段落标签用来表示一个段落，是一个非常特殊的标签，因为它是一个块级元素，内部只能有一个文本级元素。

<a href="http://wwww.baidu.com" target="_blank">百度</a>		<!-- 超链接标签 --> 

<p>可以在标签里写一段话</p>			<!-- 段落标签 -->	

<img src="./../QF.png">			<!-- 图片标签，./表示当前目录  ../表示上一级目录 -->

<b>粗体</b>		<!-- 粗体标签 -->
<i>斜体</i>		<!-- 斜体标签 -->
<u>下划线<u>		<!-- 下划线标签 -->

2.3、表格标签

（table标签只能放thead、tbody、tfont、tr下只能放th、td; td、th下可以放任何东西）
colspan: 列合并、rowspan, 行合并

<table>
	<thead>		<!-- 表的头标签 -->
		<tr>		<!-- 行标签 -->
			<th></th>		<!-- 表头列标签，会加粗 -->
		</tr>
	</thead>
	
	<tbody>		<!-- 表的身体标签 -->
		<tr>
			<td></td>	<!-- 列标签 -->
			<td colspan="2"></td>	<!-- cospan合并列 -->
			<td rowspan="2"></td>	<!-- rowspan合并列 -->
		</tr>
	</tbody>

	<tfont>		<!-- 表的脚标签，一般用来交互页面使用 -->
	</tfont>
</table>

2.4、列表标签（有序、无序）

ul和ol下只能放li标签，但是li下可以放发任何东西

<!--    无序列表-->
    <ul>
        <li>百度</li>
        <li>搜狗</li>
        <li>360</li>
    </ul>    

<!--    有序列表，列表的元素会有序号-->
    <ol>   
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

2.5、表单标签

<form action="" method="">	<!-- 表单要提交，需要用form标签包裹起来,分两种提交方式一种是get，一种是post-->
	<input type="text"/>		<!-- 普通文本框 -->
	<input type="password"/>	<!-- 密码框 -->
	<input type="file"/>		<!-- 文件上传框 -->
	<input type="radio"/>		<!-- 单选框 -->
	<input type="checkbox"/>	<!-- 复选框 -->
	<input type="submit"/>		<!-- 提交按钮 -->
	<input type="reset"/>		<!-- 重置按钮 -->
	
	<select>					<!-- 单选下拉框 -->
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>	

	<select multiple>			<!-- 多选下拉框，multiple 多选的意思 -->
		<option>4</option>
		<option>5</option>
		<option>6</option>
	</select>

	<textarea rows="10" cols="50"></textarea>	<!-- 文本域标签，rows是行，cols是列 -->
</form>

2.6、其他

<br/>	<!-- 换行 -->
&nsbp;	<!-- 空格 -->

3、标签分类

分类1：块级元素与行内元素

块级元素：独占一行。

常见块级元素：

<h1></h1>		<!--  标题标签 -->
<table></table>	<!-- 表格标签 -->
<li></li>		<!-- 列表中的标签 -->
<div></div>

行内元素：元素的宽度是根据内容来适配的

常见行级元素：

<a></a>		<!-- 超链接标签 -->
<img/>		<!-- 图片标签 -->
<b></b>		<!-- 粗体标签 -->
<i></i>		<!-- 斜体标签 -->
<u></u>		<!-- 下划线标签 -->
<span/>

luo1904695600

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML一些简单常用的标签

1、HTML文件结构一个标准的HTML文件<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8"> <!-- 元标签...
复制链接

扫一扫