HTML

最新推荐文章于 2025-08-09 00:03:02 发布

原创最新推荐文章于 2025-08-09 00:03:02 发布 · 650 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

网页专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML的基本元素及其用法，包括文档结构、标签如标题、段落、列表、表单等，以及如何创建链接和多媒体内容。

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

<html>标签
html文档元素的根元素标签，成对出现,表示一个html文档的开始和结束
<head>标签
包含主要元素：
这里写图片描述
<mate>用于定义页面元信息，也就是一些键值对，主要有三个属性
1. http-equiv 指定元信息的名称，该属性指定的名称具有特殊的意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确的处理网页内容
2. name 指定元信息名称，该名称值可以随意指定。
3. content 指定元信息的值

块级标签：

   显示为“块”状，浏览器会在其前后显示折行，常用块级标签元素包括：p,h1~h6,div,ul等
  1.   标题标签语法：
   <**h1**>一级标题<**/h1**>
   <**h2**>二级标题<**/h2**>
   <**h3**>三级标题<**/h3**>
   <**h4**>四级标题<**/h4**>
   <**h5**>五级标题<**/h5**>
   <**h6**>六级标题<**/h6**>

字体大小逐渐减小
2. 段落标签
<p>…….</p>
3. 水平线标签
<hr/> 创建水平线，分割内容
4. 有序列表标签

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

ol标签中可以有多个li标签，列表项可以是图片文字链接
5. 无序列表标签

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

实例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>网易云音乐</title>
    </head>
    <body>
     <h1>听歌排行</h1>
     <hr>
     <h2>歌曲目录</h2>
     <p>蚂蚁</p>
     <p>made in China</p>
     <hr>
     <h3>喜欢歌手排名</h3>
     <ol>
       <li>Higher Brothers</li>
       <li>Gai</li>
       <li>Bridge</li>
     </ol>
     <h3>喜欢歌曲排名</h3>
     <ul>
       <li>made in China</li>
       <li>火锅底料</li>
       <li>老大</li>
     </ul>
    </body>
</html>

这里写图片描述
6. 定义描述标签

<dl>
  <dt>标题</dt>    <!--定义列表中的项目-->
  <dd>描述1</dd>   <!--描述列表中的项目-->
</dl>

分区标签

<div>头部内容</div>
<div>导航内容</div>
<div>底部内容</div>

对网页做整体的分块布局，分模块，即当容器来使用
实例：

<body>
  <dl>
   <dt>Higher Brothers</dt>
    <dd>trap 组合</dd>
    <dd>CDC成都说唱会馆</dd>
    <dd>四个成员:马思唯、dz、psy p、melo</dd>
 </dl>
</body>

这里写图片描述

行级标签：

按行逐一显示，前后不会自动换行
1. 文本格式化元素
这里写图片描述
注：ltr left to right从左到右
实例：

<dt><strong>Higher Brothers<strong></dt>

定义下标上标文本

<p>H<sub>2</sub>O</p>
<p>O<sup>2</sup></p>

这里写图片描述
2. 超链接标签

<a href="链接地址" target="目标窗口">链接文本或图片</a>

href:
指定超链接所关联的另一个资源
target：
指定框架集中的哪个框架来装载另一个资源，该属性可以是_self,_bank,
_top,_parent四个值，分别代表使用自身，新窗口，顶层框架，父框架来装载新资源
3. 图像标签

<img src="图片地址" alt="提示文字" />

当图片显示不了时，会显示提示文字
4. <span>标签

<span>文本等行级内容</span>

<br/>标签
换行
常用特殊符号

空格，大于等都用后面的符号代替（分号不可丢）
实例：

     <div id="footer">
        <a href="https://www.baidu.com/" target="_self">百度一下，你就知道</a></br>
        &nbsp;&nbsp;&nbsp;&nbsp;版权所有
     </div>

这里写图片描述

frameset框架：

创建框架网页的步骤：
创建各个子窗口对应的html文件
创建整个框架文件，分别引用子窗口文件
创建框架页面的基本语法：

<frameset cols="25%,50%,*" rows="50%,*" border="5">
     <frame src="top.html">
     ......
</frameset>

cols是将页面分为几列，第一列占页面25%，第二列占页面50%，第三部分*就是占剩余的部分
rows是将页面分为几行，第一行占页面50%，第二行占剩余部分
border是框架的粗细
因此将页面分为几个框架，就有几个frame,src引用相应的html文件
<frameset></frameset>标签不能与<body></body>标签同时使用。除非你在<frameset>中使用<noframes>标签
实例：写一个简单的框架网页
这里写图片描述
先分为两行，第一行占30%，第二行占70%
第二行分为两列，第一列占20%，第二列占80%
可看到有三个框架，左边的链接在右边显示，可知要写6个html文件
主页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>top</title>
    </head>
    <frameset rows="30%,*">
        <frame src="top.html" name="topFrame"/> <!--第一行-->
        <frameset cols="20%,*"> <!--第二行分为两列-->
            <frame src="left.html" name="leftFrame" noresize="noresize"/>  <!--noresize使框架无法改变大小-->
            <frame src="page2.html" name="rightFrame" noresize="n-resize"/>
        </frameset>
    </frameset>
</html>

有一点注意的是我们在写超链接left.html时，点击超链接时会发现超链接内容会在leftframe显示，而不是在右边rightframe中显示，因此应该加一句target=”rightFrame”

<body>
      <p><a href="page2.html" target="rightFrame">成都说唱会馆</a><p/>   <!--target设置跳转到框架rightFrame-->
      <p><a href="page3.html" target="rightFrame">中国制造的HIGHER BROTHERS</a><p/>
      <p><a href="page1.html" target="rightFrame">马思唯</a><p/>
    </body>

iframe内嵌框架：

iframe相较frameset更好，frameset要管理多个html文件
<iframe>标签中的常用属性：
这里写图片描述
实例：

    <body>
        <iframe name="topFrame" width="100%" height="400px" src="http://www.baidu.com"
        frameborder="1" scrolling="auto"></iframe>
        <p>
        <a href="http://www.sina.com.cn" target="topFrame">新浪</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href=="http://www.baidu.com" target="topFrame">百度</a>
        </p>
    </body>

表格标签：

这里写图片描述

HTML表单：

一. form标签
提交给服务器时，必须用表单提交

<form action="表单提交地址" method="提交方法">
   ...文本框，按钮等表单元素
</form>

form标签常用属性：
action：指定表单提交后由服务器上的哪个处理程序进行处理
enctype：用于指定表单数据的编码方式
    1.application/x-www-form-urlencoded:默认的编码方式，将表单控件中的值处理成URL编码方式
    2. mutipart/form-data:以二进制流的方式来处理表单数据
    3.text/plain:当表单的action属性值为mailto:URL的形式时使用
method:指定向服务器提交的方式一般为get和post两种方式
     get方式的请求会将请求参数的名和值转换为字符串，并附加在原url之后，因此可以在地址栏中看到的请求参数的名和值。且get请求传输的数据量比较小，一般不能大于2KB
    post方式的请求传送的数据量比较大，通常认为可以不受限制，往往取决于服务器的限制。post方式的请求参数是放在html的header中传输，用户在地址栏中看不到请求参数，安全性相对较高
一般注册表单，登陆都用post请求
二. 常见表单元素
    1.input元素
这里写图片描述

input元素常用的几个属性：
这里写图片描述
实例：

<body>
  <form name="regform" method="post" action="http://www.iotek.com.cn">
    单行文本框<input type="text" name="username" id="username" maxlength="10"/></br>      <!--maxlength="10"最多输入10个字-->
    密码框<input type="password" name="password" id="password"/></br>
    隐藏域<input type="hidden" name="hidden" id="hidden"/></br>
    单选按钮<input type="radio" name="sex" id="male" checked="checked"/>男  
    <!--name可以重复，但id是唯一的  checked="checked"默认选择男-->
      <input type="radio" name="sex" id="female"/>女</br>
    复选框<input type="checkbox" name="hobby" value="1" id="football"/>足球
         <input type="checkbox" name="hobby" value="2" id="baskeball"/>篮球
     <input type="checkbox" name="hobby" value="3" id="badminton"/>羽毛球</br>
<!--value:提交时，并不会提交篮球还是足球，而是提交1或者2-->
    图像域<input type="image" src="3.jpg" width="100px" height="20px" name="pic" id="pic"/></br>
    文件上传域<input type="file" name="file"/></br>
    提交按钮<input type="submit" name="submit" value="提交"/>
    重置按钮<input type="reset" name="reset" value="重置"/>
    普通按钮<input type="submit" name="submit" value="普通"/>
   </form>
 </body>

这里写图片描述
2. button标签

<button type="按钮类型">
   普通文本，格式化文本，图像
</button>

button标签常用属性
这里写图片描述

button按钮比input按钮有更为强大的功能

提交按钮<button type="submit"><b>提交</b></button>
<b></b>将按钮上字体加粗

3. label标签

<label fot="password">密码框<label><input type="password" name="password" id="password"/></br>

当点击密码框这三个字时，后面的框会有反应
4. 列表框和下拉菜单

<select name="指定列表名称" size="行数">
   <option value="选项值" selected="selected">...</option>
</select>

这里写图片描述
列表框：

<select id="city" multiple="multiple" size="3">
   <option>南京</option>
   <option>上海</option>
   <option>北京</option>
   <option>天津</option>
</select>

multiple=”multiple” 表示可以多选
size=”3” 可见有三个选项
这里写图片描述
下拉列表：

<select id="city" >
    <option>南京</option>
    <option>上海</option>
    <option>北京</option>
    <option>天津</option>
</select>

在<select…/>元素里，只能包含如下两种子元素
    1. <option>:用于定义列表框选项或菜单项，常用属性如下：
        disable:指定禁用该选项，该属性值只能是disabled或省略
        selected:指定该列表初始状态是否处于被选中状态
        value:指定该选项对应的请求参数值，上传给服务器为value指定的值
    2. <optgroup>:用于定义列表项或菜单项组，常用属性：
        label:指定该选项组的标签，这个属性必填
        disable:指定禁用该选项，该属性值只能是disabled或省略
    5. 多行文本框

<textarea name="..." cols="列宽" rows="行宽">
    文本内容
</textarea>

常用属性：
cols:指定文本框的宽度，该属性必填
row:指定文本框的高度，该属性必填
readonly:指定该文本框只读，该属性只能是readonly或省略

HTML多媒体：

1. 音频和视频标签
<embed>播放音频

<embed src="音频的源" width="" height="" autostart(是否自动播放)="true" loop(是否循环)="true">
</embed>

<embed>播放视频：

<embed src="视频的源" width="" height="" loop="true" quality(播放质量)="high" PLUGINSPAGE(设置flash插件位置，浏览器没有时，会自动下载)="">
</embed>

<object>标签
可以使用<object>标签来给浏览器加载插件，通过加载的插件来播放音频和视频
为了能实现浏览器更好的兼容性，一般使用object标签内嵌套embed标签，用IE浏览器打开时，解析object标签。用chrome等浏览器时，解析embed标签
在html5中提供了audio和video标签来进行音频和视频的播放，使用比较简单，功能更强大