HTML 基础
HTML 基础
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，通过各种标签来定义页面结构和内容。以下是 HTML 的核心组成部分：
一、基本标签
基本标签构成了 HTML 文档的骨架：（标签快捷键：名称+tab）
DOCTYPE html>
<html>
<head>
<title>页面标题title>
<meta charset="UTF-8">
<meta name="description" content="页面描述">
head>
<body>
<h1>标题1h1>
<p>这是一个段落。p>
<hr>
<br>
body>
html>
二、图像标签与超链接
图像和链接是网页的重要元素：
<img src="image.jpg" alt="图片描述" width="300" height="200">
<a href="https://example.com" target="_blank">访问外部网站a>
<a href="#section2">跳转到页面内锚点a>
<a href="page.html"><img src="link-image.jpg" alt="链接图片">a>
注： HTML 锚点超链接详解
1.基本语法
锚点链接由两部分组成：
- 目标位置：使用
id属性标记的元素 - 链接源：使用
href="#id值"指向目标位置
<h2 id="section2">第二章内容h2>
<a href="#section2">跳转到第二章a>
2.页面内锚点跳转
最常见的用法是在长页面中创建导航菜单，快速定位到页面的不同部分：
<nav>
<ul>
<li><a href="#home">首页a>li>
<li><a href="#about">关于我们a>li>
<li><a href="#services">服务a>li>
<li><a href="#contact">联系我们a>li>
ul>
nav>
<main>
<section id="home">
<h1>欢迎来到我们的网站h1>
section>
<section id="about">
<h2>关于我们h2>
<p>公司简介内容...p>
section>
<section id="services">
<h2>我们的服务h2>
<p>服务内容...p>
section>
<section id="contact">
<h2>联系我们h2>
<form>...form>
section>
main>
3.跳转到其他页面的特定位置
可以链接到其他页面的特定锚点，语法为href="页面URL#锚点ID"：
<a href="article.html#section3">阅读第三章内容a>
<h3 id="section3">第三章：高级技术h3>
4.特殊用法：返回顶部链接
在长页面底部添加返回顶部的链接：
<footer>
<a href="#">返回顶部a>
footer>
5.锚点与 JavaScript 交互
可以使用 JavaScript 增强锚点跳转的体验，例如平滑滚动效果：
<style>
html {
scroll-behavior: smooth; /* 平滑滚动效果 */
}
style>
<body>
<a href="#section2">平滑滚动到第二章a>
<section id="section2">
<h2>第二章内容h2>
section>
body>
6.使用 JavaScript 自定义锚点行为
可以完全通过 JavaScript 控制锚点跳转，实现更复杂的效果：
<a href="#" onclick="scrollToSection('section3'); return false;">跳转到第三章a>
<script>
function scrollToSection(sectionId) {
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
}
}
script>
三、块元素 vs 行内元素
HTML 元素分为块级元素和行内元素：
- 块级元素：独占一行，可设置宽度和高度（如
div,p,h1） - 行内元素：不换行，宽度高度由内容决定（如
span,a,img）
<div class="block">这是一个块级元素div>
<span class="inline">这是行内元素span>
<span class="inline">这是另一个行内元素span>
四、列表、表格与媒体标签
列表、表格和媒体用于结构化展示数据：
<ul>
<li>苹果li>
<li>香蕉li>
<li>橙子li>
ul>
<ol>
<li>第一步li>
<li>第二步li>
<li>第三步li>
ol>
<table border="1">
<tr>
<th>姓名th>
<th>年龄th>
tr>
<tr>
<td>张三td>
<td>25td>
tr>
table>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
video>
<audio autoplay controls>
<source src="audio.mp3" type="audio/mpeg">
audio>
五、页面结构与 iframe
现代网页通常有明确的结构划分：
<header>页面头部header>
<nav>导航菜单nav>
<main>
<section>主要内容区域section>
<aside>侧边栏aside>
main>
<footer>页脚footer>
<iframe src="https://example.com" width="100%" height="300">iframe>
六、表单与 HTTP 方法
表单用于用户输入，支持 GET 和 POST 两种提交方法：（主要是参数的显示方式不同）
<form action="process.php" method="get">
搜索: <input type="text" name="query">
<input type="submit" value="搜索">
form>
<form action="submit.php" method="post">
用户名: <input type="text" name="username"><br>
密码: <input type="password" name="password"><br>
<input type="submit" value="登录">
form>
七、表单元素详解
表单包含多种输入控件：
<form>
姓名: <input type="text" name="name" placeholder="请输入姓名"><br>
性别:
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女<br>
<button type="button">普通按钮button>
<input type="submit" value="提交">
<input type="reset" value="重置"><br>
爱好:
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="sports">运动
<input type="checkbox" name="hobby" value="music">音乐<br>
国家:
<select name="country">
<option value="cn">中国option>
<option value="us">美国option>
<option value="uk">英国option>
select><br>
留言: <textarea name="message" rows="3" cols="30">textarea><br>
上传文件: <input type="file" name="file"><br>
搜索: <input type="search" name="search"><br>
评分: <input type="range" name="rating" min="1" max="5" value="3"><br>
邮箱: <input type="email" name="email" required><br>
网址: <input type="url" name="url"><br>
数字: <input type="number" name="age" min="1" max="100"><br>
form>
八、表单初级验证
HTML5 提供了内置的表单验证功能：（required：必填项，pattern：正则表达式，placeholder:提示信息）
<form>
姓名: <input type="text" required minlength="2" maxlength="20"><br>
邮箱: <input type="email" required><br>
密码: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"><br>
年龄: <input type="number" min="18" max="100"><br>
<input type="submit" value="提交">
form>
正则表达式查看：https://www.jb51.net/tools/regexsc.htm