HTML基础教程：从入门到精通-优快云博客

本文链接：https://blog.youkuaiyun.com/clisks/article/details/99352615

这篇博客详细介绍了HTML的基础知识，包括HTML的含义、文档结构和常用标记。讲解了如何创建HTML文件，标签的使用，如<head>、<body>、<meta>、<title>、<img>、<a>、<table>、<input>等，并涵盖了超链接、表格、表单、多媒体元素的使用，是学习HTML的良好入门资料。

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

JavaWEB之HTML

一.简介

HTML是英文 HyperText Markup Language 的缩写，它的意思是"超文本标记语言"，用它编写出文档的文件的扩展名是“.html”或“.htm”（微软的操作系统），他是可供浏览器解释浏览的文件格式。你可以使用记事本，写字板或者是专业的IDE如：Dreamweaver等等编辑工具来编写HTML文件。
简单的来说就是用来制作网页，他的语法就是由一堆标签组成

HTML标签由浏览器解析渲染
HTML语法松散，不会报错，但是效果可能出不来

二.使用简绍

如果没有编译软件的话可以使用记事本编译

(1).新建一个记事本将后缀名改为html

(2).开始编写

(3).用浏览器打开此网页

三.用法结构

1.文档结构

文档主要结构主要是有3部分组成的

(1)< html>< /html>

< html>标记用于html文件的最前面，用来表示html文件的开始。而< /html>的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。

(2)< head>和< /head>

< head>和< /head>构成html文件的头部部分，在此标记对之间可以使用< title> < /title>（定义主题）和< script> < /script>等等标记对，这些标记都是描述html文档相关信息的标记对，< head> < /head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。

(3)< body>和< /body>

< body>和< /body>是html文档的主体部分，在此标记可以包括“< p>”,“< /p>”,“< h1>”,“< br>”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。

3.一些常用的标记和关键字

（1）关键字

强制断行标记：<br></br>
强制分段标记：<p></p>
空格 ：&nbsp;
网页注释：<!--注释-->
置中标记：<center>内容</center>  <p  align="center">内容</p>
预编译标签（保持原始数）：<pre>内容<pre>
转义字符&lt;   <  &gt;    >   &amp;   &     &qout;

（2）标记

META标记

META标记是html语言的head部分的一个辅助性的标记的，他位于head和title标记之间，他提供给用户不可见的信息。可以用于来鉴别作者，设置页面格式，标注内容提要和一些关键字，还可以设置页面的自动刷新以及等级等等。

标题标记：

<h1>内容</h1>

设置字体标记：

<font  size=“2”  color=“red”  face=“黑体”>内容</font>

字体变化标记：

<b>加粗</b>  
<i>斜体</i>  
<u> 底线</u>         
<kbd>用粗体等宽字体显示文字</kbd>
<var>用较小的固定宽度显示字体</var>
<dfn>用于名词解释，斜体显示</dfn>	
<sup>上标  </sup>   
<sub>下标 </sub>  
<smap>用于字母序列等宽</smap>
<em> 强调</em>     
<address>模拟信封上的字体</address>
<strong>加强< /strong>  
<s>删除线</s> 或  <strike>删除线</strike>
<big>比默认字号大一号</big>
<small>比默认字号小一号</small>
<code>以等宽字体显示计算机程序代码</code>

背景标记

<body bgcolor="背景颜色" backgrounf="背景图片">

分割线标记

上一部分 <hr>下一部分

img标记（向网页中插入图片）

< img  src="boy.jpg"  height="56px" width="32px">

序列标记

无序列表< ul> < /ul>
每增加一列内容，就需要加一个< li>;

有序列表 < ol> < /ol>
每增加一列内容，就需要加一个< li>;

自定义列表 < dl> < dl>

列表演示

<ol type="">//有序列表
    <li>这是一个列表</li>
    <ul>//嵌套无序列表
        <li>这是一个列表</li>
    </ul>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
    <li>这是一个列表</li>

</ol>

<dl>
    <dt>自定义列表的标题</dt>
    <dd>自定义列表的描述</dd>
</dl>

（3）超链接

连接到其他文档

< a href=“特殊字符.html“ target=”_blank”>连接其他文件< /a> target=“_self”
在自身窗口打开
注意我用的是相对路径

绝对路径：是指从根目录到文件的完整路径。
相对路径：是指相对于当前文件的文件位置。

内部链接

<a  href="#c7">查看章节7</a>
<a name="c7">需要在章节7设置此代码才可跳转

外部链接

<a  href="http://www.baidu.com">链接的百度</a>

给图片设置热点链接演示：

<img src=“img/mainbg.jpg” width=“500px” height=“500px” align=“absmiddle” usemap=“#Map” />
注意使用 usemap
      <map name="Map" id="Map">			
      
      <area shape=“rect” coords=“47,67,187,140” href=“http://www.baidu.com”/> 
      几个数字 代表矩形的 xy 坐标 以及矩形的长宽
			
    <area shape=“circle” coords=“300,400,300” href=“http://www.baidu.com” target=“_blank”/> 
    几个数字代表 圆形的xy坐标 以及圆点半径
</map>

通过CSS去掉超链接的下划线演示：

<style>
a:link{	
	color:red;
	text-decoration:none;
}
a:visited{
color:yellow;
	text-decoration:none;
}
a:hover{
color:green;
	text-decoration:none;
}
a:active{
color:#33ff33;
	text-decoration:none;
}

（4）表格

表格的结构

< table>…< /table>是用来在html页面上创建表格的。
< th>代表列名一般放在第一行
< tr>代表格的一行。
< td>用来定义表格的一列。

在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。

（5）input标签

input标签的 type分为：

text -文本框
button -按钮
submit-提交
reset-重置
password -密码
checkbox-多选
radio-单选
file -上传文件
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

写法：< input type = “text” value=“”/>

输入框

邮箱输入框

<input type="email" name="user_email" />

数字输入框

<input type="number" name="points" min="1" max="10" />

数字范围输入框（进度条）

<input type="range" name="points" min="1" max="10" />

颜色选择框

<input  type="color" name="colortext"/><br>

（6）下拉列表及文本域

Select标签

<select>
        <option   value="qxz"  selected/>请选择
        <option   value=“A”/>苹果
        <option   value=“B”/>香蕉
        <option   value=“C”/>橘子
        <option   value=“D”/>西瓜
   </select>

TEXTAREA便签

<TEXTAREA  ROWS="5" COLS="30"  ></TEXTAREA >

（6）表单的用途

概述

表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有交互性了。

表单构成

     <form></form>
     标记是用来创建一个表单，在标记之间一切都属于表单里的内容。

< from>标记具有action，metnod,target属性。 action属性是处理处理程序的程序名称。method属性是用来定义处理程序的从表单中获取信息的方法，通常有两种分别是GET和POST两种。
target属性用来制定目标窗口的。

表单的工作原理

1.访问者填写表单，并提交给web服务器处理；
2.在web服务器上的后台处理程序对提交后的数据进行处理；
3.后台处理程序处理完成后，会重新生成一个新的html页面发给客户端。

（7）框架（frame）

混合框架

<html>
 <head>
 <title>框架页示例</title>
 </head>
<frameset rows="50%,50%">
	<frame src="http://www.baidu.com">
	<frameset cols="25%,75%">
		<frame src="http://www.sina.com.cn">
		<frame src="http://www.baidu.com">
	</frameset>
</frameset>
</html>

（8）多媒体标记音频

HTML4多媒体

<embed src="文件源" width="宽度"    autostart="true"  loop="true">

src 设置文件源
width 设置宽度
autostart 设置是否自动播放，如果是true就是自动播放，是flase不自动播放
loop 设置是否循环播放true就是循环播放，false就是不自动播放

HTML5多媒体

<audio src="G:\Media\霍比特人3：五军之战.mp4" controls="controls"></audio>

添加背景音乐

<bgsound src="明月几时有.mp3" loop=5>

（9）多媒体标记视频

视频标签

<video src="G:\Media\霍比特人3：五军之战.mp4" width="320" height="240" controls="controls">
</video>

control 属性供添加播放、暂停和音量控件。
Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。