html标签：超文本标记语言

最新推荐文章于 2025-06-01 20:46:58 发布

hyty

最新推荐文章于 2025-06-01 20:46:58 发布

阅读量635

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html 标签

本文链接：https://blog.youkuaiyun.com/qq_38341596/article/details/78609464

html 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了HTML的基础知识，包括标签的作用、常用标签的使用方法、实体标签、超链接、图片、表格、表单等元素的使用技巧，以及如何添加多媒体内容。

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

html的标签作用：用于描述一个网页的结构的。

1.html基础

 
<!doctype html>	声明函数 
<head>头部标记 
<title>标题标记 
<body>主体标记 
<meta>元信息标记 
<meta http-wquiv="content-type" content="text/html";charset="utf-8">

设置页面关键字:<meta name="keywords" content="关键字">
设置页面说明:<meta name="description" content="页面说明">
设置作者信息:<meta name="author" content="姓名">
设置网页的定时跳转:<meta http-equiv="refresh" content="20;url=index.html">

2.html常用标签

<h1>~<h6> 	表示是一个标题
<p>   	段落标签
<hr/>  	水平线标签
<br/> 	换行标签
<sub>  	下标	水的化学式：H<sub>2</sub>O
<sup>  	上标	2的16次方：2<sup>16</sup>
<pre>  	原样标签： 原样标签会保留空格和换行符。
<span>  行内标签
<div>   块标签
<ol> <li> 	有序的列表标签、
<ul> <li> 	无序的列表标签。
<dl dt dd type="i/0/1/一">    项目列表标签
	1)有序列表的序号类型：type
		<ol type="1/a/A/i/I">
	2)有序列表的起始数值;<ol type="1/a/A/i/I" start="3">
	  逆向排序：<ol type="1/a/A/i/I" start="3" reversed>

3.html常用的实体标签

常用的实体字符: 
空格      &nbsp;
小于号    &lt;
大于号    &gt;
-----------------------------
人民币    &yen；	¥
版权      &copy;	©
商标      &reg;	®

4.超链接标签

1.a:link	未访问的链接
  a:vvisited	已访问
  a:hover	鼠标悬停时
  a:active	选择时

2.去掉网页下划线
	a{text-decoration:none}

3.链接的目标窗口
	<a href="xxx.html" target="打开方式">
	_self	当前页面
	_blank	空白窗口

4.锚点链接
	1)<a href="#id">
	  <id="">
	2)<a href="xxx.html#id"> 	//其他页面的锚点

5.链接到E-mail:
	使浏览者快速反馈自己的意见
	<a href="mailto:邮件地址">

6.链接到FTP:
	包含一些上传和下载文件的文件目录
	<a href="ftp=""ftp://地址">

7.链接到Telnet:
	一些远程登陆方式
	<a href="telnet://地址">

8.下载文件：
	<a href="文件地址">

5.图片标签

<img src="url">
	src	路径
	alt	不能显示时转换文本
	title	悬停时显示内容
	width	宽度
	height	高度
	border	边框
	vspace	垂直间距
	hspace	水平间距
	align	排列

6.表格标签

1.表格由行，列，单元格组成
	<table>:表格的开始与结束
	<caption>:表格标题，居中于表格之上
	<tr>:行的开始与结束
	<td>:单元格的开始与结束
	<th>:设置加粗部分
	格式:
	<table border="" width="">
	<tr height="" align="">
	<td width="" align="">

2.表格的基本属性：
	边框颜色：bordercolor
	内框宽度：cellspacing
	文字与边框间距：cellpadding
	背景颜色：bgcolor
	背景图像：background="url"
	水平跨度：colspan="列数"
	垂直跨度：rowspan="行数
	border-collapse 	collapse  设置是否把表格边框合并为单一的边框。
	border-spacing 	设置分隔单元格边框的距离。
	caption-side 	设置表格标题的位置。
	empty-cells 	设置是否显示表格中的空单元格。
	table-layout 	设置显示单元、行和列的算法。

7.表单标签

1.<form action="url地址" method="提交方式" name="表单名称">

2.表单记录：autocomplete
	单表是否有自动完成功能，将输入内容纪录，形成列表
	on:有
	off:无

3.取消验证：novalidate="true"
	提交表单时对表单取消有效检查,可以关闭整个表单的验证

4.控件类型：
	<input name="控件名称" type="属性" value="文字字段的默认取值"
	size="控件，文本框的长度" maxlength="最长字符数">\

5.属性：
	单行文本框：text
	多行文本框：textarea
		<textarea name="文本域名称" cols="列数" rows="行数">
	密码框：password	
	单选按钮：<input name="名称" type="radio" value="取值">
	复选框：<input name="名称" type="checkbox" value="取值">
		<input name="s[]" type="checkbox" value="3" />3<br>
		<input name="s[]" type="checkbox" value="7" />7<br>
		$a=$_POST["s"];
		for($i=0;$i<count($a);$i++)
		{ echo "选项".$a[$i]."被选中<br />"; }
	普通按钮：button	长用于JS
	提交按钮：submit
	重置按钮：reset
	文件域：file

8.菜单和列表

1.下拉菜单
	<select name="名称">
	    	<option value="值" selected="selected">选项显示内容
		......
	</select>

2.列表项
	<select name="名称" size="显示的列表项数" multiple>
		<option value="值" selected>
		......
	<select>

9.添加多媒体

	<marquee direction="up/down/left/right" behavior="scroll/slide/alternate" 
		scrollamount="值" scrolldelay="值" loop="值" width,height bgcolor="值">
	滚动效果：<marquee>
	滚动方向：direction="up/down/left/right"
	滚动方式：behavior="scroll/slide/alternate"	循环/一次/交替
	滚动速度：scrollamount="值"
	滚动延迟：scrolldelay="值"
	滚动循环次数：loop="值"
	滚动范围：width,height
	滚动背景颜色：bgcolor="值"

10.video

<video autoplay>
	<source src="xxx.mp3" type="video/mp4">
	<source src="xxx.wav" type="video/mp4">
	<source src="xxx.ogg" type="video/mp4">
<video>
src:视频的url
poster:视频加载时显示的图像
preload:定义视频是否预加载	
preload="none/metadata/auto"	不载入视频/只载入元数据/载入整个视频
autoplay:是否自动播放
	autoplay="autoplay"
controls:显示控件，控制栏
	controls="controls"
	width和height链接不同的视频文件

这是HTML一个缩进的标签.<blockquote></blockquote>输入的文本会2端都缩进..你可以自己试试效果.主要是个排版的标签

框架标签

frameSet ： 一个frameSet可以把一个页面切割成多份。只能按照行或者列切割。
frame   不能被切割的。 frame是位于frameSet中。
iframe:  在一个网页中分隔一部分的位置显示另外一个网页的的信息。
    
注意： frameSet标签不能用于body标签体内容

框架例子

<html>
	<frameset  rows="20%,70%,*" >
    	<frame  src="top.html" />
        <frameset cols="20%,*">
        	<frame src="left.html" />
            <frame name="center" src="center.html"/>
        </frameset>
    	<frame src="foot.html"/>
    </frameset><noframes></noframes>
</html>

代码分析

<frameset  rows="20%,70%,*" >	把一个页面分成上中下3框架

<frame  src="top.html" />	上框架链接top.html

<frameset cols="20%,*">		中框架又分为左右两框架
	<frame src="left.html" />
		left.html:<a href="../2常用的标签.html" target="center" >
		即可在中框架左框架改变又框架内容，选择target="center"
	<frame name="center" src="center.html"/>
		原先是链接center.html，但是左标签改变其为2常用的标签.html
</frameset>

<frame src="foot.html"/>	下框架链接foot.html