HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。它是构建和设计网页及网上应用的基础技术之一,与CSS(层叠样式表)和JavaScript一起,构成了万维网的三大核心技术。
1. HTML的基本结构
一个基本的HTML文档包含以下部分:
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
页面内容
</body>
</html>
<!DOCTYPE html>
:文档类型声明,指明了文档遵循的HTML规范。<html>
:根元素,包含了整个HTML文档。<head>
:包含了文档的元数据(metadata),如标题、字符集声明、引用的CSS和JavaScript文件等。<title>
:定义了页面的标题,显示在浏览器的标题栏或标签页上。<body>
:包含了页面的可见内容。
2. 常用HTML标签
- 标题标签:
<h1>
到<h6>
,定义了六级标题。 - 段落标签:
<p>
,用于包裹段落文本。 - 链接标签:
<a>
,用于创建超链接。 - 列表标签:
<ul>
(无序列表)、<ol>
(有序列表)、<li>
(列表项)。 - 表格标签:
<table>
、<tr>
(行)、<th>
(表头单元格)、<td>
(表格单元格)。 - 表单标签:
<form>
、<input>
、<textarea>
、<button>
等,用于创建用户输入和数据收集的表单。 - 图像标签:
<img>
,用于在页面上显示图片。 - 媒体标签:
<audio>
、<video>
,用于嵌入音频和视频内容。
3. HTML的属性
HTML标签可以包含属性,属性提供了额外的信息,用于定义标签的行为或外观。例如:
<a href="https://www.example.com" target="_blank">访问示例网站</a>
在这个例子中,<a>
标签有两个属性:href
指定了链接的目标URL,target="_blank"
指定了链接在新窗口中打开。
4. HTML的表单元素
表单是HTML中用于收集用户输入的重要部分。表单元素包括:
<input>
:用于创建不同类型的输入字段,如文本输入(type="text"
)、密码输入(type="password"
)、提交按钮(type="submit"
)等。<textarea>
:用于创建多行文本输入控件。<select>
:用于创建下拉选择菜单。<option>
:用于定义下拉菜单中的选项。<button>
:用于创建按钮,可以提交表单或执行其他操作。
5. HTML5的新特性
HTML5是HTML的最新版本,引入了许多新特性和改进:
- 语义化标签:如
<article>
、<section>
、<nav>
、<aside>
等,提供了更清晰的文档结构。 - 多媒体支持:
<audio>
和<video>
标签简化了音频和视频内容的嵌入。 - 表单控件:新增了多种表单输入类型,如日期、时间、范围、搜索等。
- 画布(Canvas):
<canvas>
标签允许在网页上绘制图形。 - 离线应用:通过缓存清单(manifest文件)支持离线应用。
- 地理定位:
navigator.geolocation
API 允许获取用户的地理位置信息。
6. HTML的全局属性
HTML5引入了一些全局属性,这些属性可以应用于任何HTML元素:
id
:给元素一个唯一的标识。class
:为元素指定一个或多个类名。style
:允许直接在元素上设置内联样式。title
:为元素提供额外的信息,通常以工具提示的形式显示。data-*
:允许我们存储自定义数据。
7. HTML的注释
在HTML中,注释用于添加不会显示在浏览器中的说明性文本。
<!-- 这是一个HTML注释 -->
8. HTML的字符实体
HTML中的特殊字符可以通过字符实体来表示:
<
:小于号(<)>
:大于号(>)&
:和号(&)"
:双引号(")'
:单引号(')
结语
HTML是构建网页的基础,通过使用各种标签和属性,可以创建出结构化和样式化的网页内容。随着HTML5的推出,HTML的功能得到了极大的扩展,使得开发者能够创建更加丰富和动态的网页应用。掌握HTML是成为前端开发者的第一步,也是构建现代Web应用的重要技能。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action: 表单提交的位置,可以是网站,也可以是请求处理地址
method: post,get提交方式
get方式提交:我们可以在url中可以看到我们提交到的信息,不安全,高效
post:比较安全,传输大文件
-->
<form action="1.我的第一个网页.html" method="get">
<!-- 文本输入框: input type="text"
value:默认初始值
maxlength:最长能写几个字符
size:文本框的长度
placeholder: 提示信息
required: 非空判断
pattern: 正则表达式
-->
<p>名字: <input type="text" name="username" placeholder="请输入姓名" maxlength="8" size="30" required> </p>
<!-- 密码框: input type="password" -->
<p>密码: <input type="password" name="pwd" value="23344"></p>
<!-- 单选框标签
input type:"radio"
value: 单选框的值
name: 表示组
-->
<p>性别:
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex" disabled/>女
</p>
<!-- 多选框-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby" checked>打游戏
<input type="checkbox" value="sports" name="hobby">运动
</p>
<!-- 按钮
input type="button":普通按钮
input type="image": 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
-->
<p>按钮:
<input type="button" name="btn1" value="点击边长">
<input type="image" src="../resource/image/12.jpg" size="3">
</p>
<!-- 下拉框,列表框-->
<p>国家
<select name="列表名称" id="">
<option value="选项的值">中国</option>
<option value="选项的值" selected>American</option>
<option value="选项的值">Engaged</option>
<option value="选项的值">Japan</option>
<option value="选项的值">Australian</option>
</select>
</p>
<!-- 文本域-->
<p>反馈:
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域
input type="file" name="files"
input type="button" value="上传" name="upload"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!-- 邮件验证-->
<p>邮箱:
<input type="email" name="email">
</p>
<!-- URL验证-->
<p>URL:
<input type="url" name="url">
</p>
<!-- 数字验证-->
<p>数字:
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!-- 滑块-->
<p>滑块:
<input type="range" name="voice" step="2" min="0" max="100">
</p>
<!--搜索框-->
<p>搜索框:
<input type="search">
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<!--自定义邮箱-->
<p>自定义邮箱:
<input type="text" name="diymail" pattern="" >
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>