HTML中你不得不知道的标签及属性

最新推荐文章于 2024-10-10 11:15:29 发布

Intellectual_Li

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量296

点赞数 1

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/Intellectual_Li/article/details/110939539

本文介绍了HTML的基础知识，包括HTML的定义、版本及其基本用途。通过本文，读者可以了解到如何使用不同的编辑器编写HTML代码，并在浏览器中预览效果。此外，还详细列举了多种常用的HTML标签及其属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的思维导图，不想看图的小伙伴可直接拉到下面
在这里插入图片描述

文字版

在了解标签之前，我们要先知道HTML是什么

一、HTML介绍

1、HTML全名：Hyper Text Markup Language
中文名：超文本标记语言
2、版本：HTML4——XHTML——HTML5，由3wc（又称万维网联盟）为其制定标准
3、作用：制作网页

二、如何使用

1、选择工具：notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等
2、使用步骤：以sublime3为例：①新建文件（ctrl+N），保存（ctrl+S）（PS：要经常使用这个组合否则…），修改扩展名为XXXX.html② 愉快地敲代码 ③再次保存，并右击，选择在浏览器中打开
3、浏览器选择：IE浏览器微软、chrome谷哥浏览器、fifirefox火狐、safari苹果

三、什么是标签

介绍
1、标签组成：<标签名属性名=“属性值”>内容</标签名>
2、标签分类：

双标签，即有关闭标签并成对出现。

<html></html>
<head></head>
<title></title>

单标签，即无关闭标签,单身。

<meta>
<br>
<h1>....<h6>

四、有哪些重要的标签及属性

一、body：定义文档的主体

属性①bgcolor(背景颜色)②background(图片作背景)

二、Hn：文字的标题

n取值1-6
取值越小，字体越大
字体加粗效果

三、form：表单

该标签一般不会单独使用会和input标签联合使用
属性：①action=”url url表示路径②target，如图：

- ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201209210256536.pn
四、input：用于搜集用户信息

使用方法：<input type=”” name=””>
Text ----文本框
Password ----密码框
Submit ----提交按钮
Radio ----单选框
Checkbox ----多选框
Reset 重置按钮
Button 普通的按钮
四、select ：选择
多选：属性——multiple

五、a标签：超链接

锚点：使网页的展示到达某一个定位的地点，如图使用

<a href=”#D1”></a>

<a name=”D1”></a>

六、img：页面上的图片

属性①Src：图片的路径②Alt：图像的代替文本③Width：宽度④Height：高度

七、map：映射，可点击图片中某一指定区域，配合img一起

必选属性：id
可选属性：name
如图

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

八、表格标签

Table——表格
Tr——表行
Th——表头
Td——表元
如图

<table>
  <tr>
     <td>
    </td>
  </tr>
</table>

九、列表标签

无序列表，前缀默认为小圆圈，如图

<Ul>
 <li></li>
<ul>

有序列表，前缀默认为1234~，如图

<ol>
<li></li>
</ol>

定义列表，如图

	<dl>
	  <dt>我</dt>
	  <dd>是人</dd>
	</dl>

十、vedio:视频 audio:音频

<video src="" controls="">
</video>
<audio src=""  controls="">
</audio>

以上十条即HTML中常用标签。