注:图来自黑马
一、HTML(超文本标记语言)
HTML 是网页的 “骨架”,负责定义页面的结构和内容,通过标签(tag)描述文本、图片、链接等元素。
1. 基础结构
- 文档声明:
<!DOCTYPE html>
(告诉浏览器这是 HTML5 文档)。 - 根标签:
<html>
包裹整个文档,包含<head>
和<body>
。<head>
:存放文档元信息(不直接显示在页面),如<title>
(标题)、<meta>
(字符集、视口等)、<link>
(引入外部资源)、<style>
(内部 CSS)、<script>
(内部 JS)。<body>
:存放页面可见内容(文本、图片、按钮等)。
2. 核心标签
- 文本标签:
- 标题:
<h1>
-<h6>
(级别从高到低)。 - 段落:
<p>
。 - 行内文本:
<span>
(无默认样式,用于局部样式)、<strong>
(加粗,强调语义)、<em>
(斜体,强调语义)。
- 标题:
- 媒体标签:
- 图片:
<img src="路径" alt="替代文本" width="宽度" height="高度">
(alt
用于加载失败时显示,SEO 友好)。 - 视频:
<video src="路径" controls autoplay loop>
(controls
显示播放控件,autoplay
自动播放)。 - 音频:
<audio src="路径" controls>
。
- 图片:
- 链接与导航:
- 链接:
<a href="目标地址" target="_blank">文本</a>
(target="_blank"
新窗口打开)。 - 锚点:
<a href="#id名">跳转到指定位置</a>
+ 目标元素<div id="id名">
。
- 链接:
- 列表:
- 无序列表:
<ul><li>项1</li><li>项2</li></ul>
(默认圆点标记)。 - 有序列表:
<ol><li>项1</li><li>项2</li></ol>
(默认数字标记)。 - 定义列表:
<dl><dt>术语</dt><dd>解释</dd></dl>
。
- 无序列表:
- 表单(交互核心):
- 表单容器:
<form action="提交地址" method="get/post">
(method
规定提交方式)。 - 输入框:
<input type="text/number/email/password/checkbox/radio/file">
(type
决定输入类型)。 - 下拉框:
<select><option value="值">选项</option></select>
。 - 文本域:
<textarea rows="行数" cols="列数"></textarea>
(多行文本输入)。 - 按钮:
<button type="submit/reset/button">
(submit
提交表单,reset
重置,button
普通按钮)。
- 表单容器:
- 语义化标签(HTML5 新增):
增强代码可读性和 SEO,如<header>
(页头)、<nav>
(导航)、<main>
(主要内容)、<article>
(独立文章)、<section>
(区块)、<footer>
(页脚)、<aside>
(侧边栏)。
3. 其他重要概念
- 注释:
<!-- 注释内容 -->
(不执行,用于说明代码)。 - 属性:标签的附加信息(如
id
、class
、src
、href
),id
唯一,class
可复用(用于 CSS/JS 选择)。
例子:
<!DOCTYPE html>
<html lang="zh-CN">
<head><met