HTML整理-力争一眼就记住

最新推荐文章于 2025-04-02 16:35:42 发布

0泡

最新推荐文章于 2025-04-02 16:35:42 发布

阅读量86

点赞数 1

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/cgaowei/article/details/129759985

版权

HTML标签整理，力争一眼就能知道用法

HTML按照形式分类:

双标签和单标签

-1.基本框架

<!DOCTYPE html>
<html>
    <head>
        <title> 这是我的标题 </title>
    </head>
    <body>
    这是我的页面内容部分
    </body>
</html>

0.标签基本格式

单标签 <标签名属性1=“属性值1” 属性2=“属性值2” …...>
双标签 <标签名属性1=“属性值1” 属性2=“属性值2” …...> 具体内容 </标签名>

1.注释



2.段落

<p>这是段落1</p>
<p>这是段落2</p>

3.标题

<h1>我是最大的标题</h1>
<h2>我是第二大的标题</h>
...
...
...
<h6>我是最后一个，我是最小的标题</h6>

4.换行、分割线

换行是单标签<br>
分割线也是单标签<hr>

5.文本格式化用到的：加粗、倾斜、删除线、下划线

加粗<strong> 内容 </strong>
倾斜<em> 内容 </em>
删除线<del>内容</del>
下划线<ins> 内容 </ins>

6. 分区

<div> 区域 </div>
例子

7.图片

<img 属性1=”属性值1“ 属性2=”属性值2“ ......>
例子

图片属性

8.超链接

<a href="跳转目标的url" target="窗口打开方式"> 文本或图片 </a>
其中target不写时默认在当前窗口打开，href必须要写

9.一些特殊字符

这些你直接打会出错滴，得要按照下面方式
空格符&nbsp
小于号lt
大于号gt
RMByen
&符号&amp
平方sup2
立方sup3
等等，出现自己查吧

10.表格

<!-- 表格基本结构 -->
<table  属性.... >
	<thead>
		<tr>
		   	<th  属性.... > 表头名字 </th>
	 	   	......
		</tr>
	</thead>
		<tr>
			<td> 具体内容 </td>
			......
		<tr>
	<tbody>
</table>

解释：thead定义表格的头部，tbody定义表格的主体,tr表示每一行,th表示表头,td表示单元格具体内容

例子

11.列表

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    ......
</ul>

例子

在这里插入图片描述

有序列表

<ol>
 <li>1.列表项.</li>
 <li>2.列表项.</li>
 ......
</ol>

例子
在这里插入图片描述

自定义列表

<dl>
    <dt>名字1</dt>
    <dd>名字1解释1</dd>
    <dd>名字1解释2</dd>
    ......

    <dt>名字2</dt>
    <dd>名字2解释</dd>
    ......

    ......
</dl>

例子
在这里插入图片描述

12.表单域

表单有很多种，比如：
单行文本框，多行文本框，密码框，单选项，多选项，下拉选项等等

<form  name=”表单名称”  action=”目标地址”  method=”数据提交方式” > 
这里其他的表单标签
还可以出现几乎所有其他各种标签（除了html，body，head等少数几个）
</form>

标签例子

<input type = "属性值">
type属性值详细描述：
在这里插入图片描述
<label> 表单元素 </label>
<select> <option> 选项1 </option> <option> 选项2 </option> ....... </select>
<textarea> 文本内容 </textarea>//用于输入多行文本