html入门知识
HTML 是超文本标记语言（HyperText Markup Language）的缩写，它是一种用于创建网页的标准标记语言。HTML 使用标记标签（tag）来描述网页的结构和内容，告诉浏览器如何显示网页元素。
1. HTML
前言：无css和js板块
- 最简单的html
<html>
<head>
<title>My First HTML Pagetitle>
<mate charest="utf-8"> mate>
head>
<body>
<h1>Welcome to my test pageh1>
body>
html>
语法规则 本质上由各种标签组成
- 即是一对 “html /html" 有始有终 它是一个html 标签（根元素）表示 HTML 文档的根，所有其他标签都必须嵌套在 html 内。
- head 标签是文档的头部，用于存储 元数据（Metadata） 和 页面配置信息。它不会直接显示在浏览器中，但包含了控制页面行为和展示方式的关键设置
(title 表示为顶端名称 mate charset 为编码信息)- body 为页面主题内容 (h1 为标题)
- 加入资源描述
<html>
<head>
<meta charset="UTF-8">
<title>Test Pagetitle>
head>
<body>
<p>This is a paragraph.p>
<p>This is another paragraph.p>
第一行<br />
第二行<br />
第三行<br />
<div>div标签独占一行div>
<div>div标签独占一行div>
<span>span标签_1span>
<span>span标签_2span>
<br/>
<img src="image.png" title="提示文本">
<img src="image1.png" alt="替换文本">
<a href="URL">链接文本a>
body>
html>
这个p 代表一个段落 注意html不会自动换行 所有由段落
br 强制换行
这个div 涉及到 （块级元素）
- 特性：
- 独占一行：默认会在前后创建换行，多个
会垂直排列。
- 宽度默认占满父容器：除非设置了宽度。
- 适合布局：用于划分页面区域（如头部、导航、内容区、页脚）
- 独占一行：默认会在前后创建换行，多个
在 HTML 和 CSS 中，父容器（Parent Container）是一个重要的结构概念，指的是 包含其他元素的 HTML 元素。简单来说，一个元素 “包裹” 了另一个元素，那么前者就是后者的父容器。
span>标签（内联元素）
- 特性：
- 不换行：多个 会在同一行内排列。
- 宽度由内容决定：不会自动扩展。
适合文本片段：用于标记或样式化部分文本。
<p>
这是一段文本，<span style="color: red;">这段变红span>，
<span style="font-weight: bold;">这段加粗span>。
p>
img 是这个图片资源 src代表一个路径 title 点在图片上面显示的内容 alt 是加载失败 用文字代替的
a 代表是一个超链接
- 表格加表单
<html>
<head>
<title>Table Lists title>
head>
<body>
<h4>一列:h4>
<table border="1">
<tr>
<td>100td>
tr>
table>
<h4>一行三列:h4>
<table border="1">
<tr>
<td>100td>
<td>200td>
<td>300td>
tr>
table>
<h4>两行三列:h4>
<table border="1">
<tr>
<td>100td>
<td>200td>
<td>300td>
tr>
<tr>
<td>400td>
<td>500td>
<td>600td>
tr>
table>
<h4>编号列表：h4>
<ol>
<li>Applesli>
<li>Bananasli>
<li>Lemonsli>
<li>Orangesli>
ol>
body>
html>
表格 :table是定义 表格 tr定义一行 td是元素
列表: li是有序列表 默认从1开始
4. 布局
<div id="container" style="width:500px; display:flex; flex-direction:column;">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题h1>
div>
<div style="display:flex;">
<div id="menu" style="background-color:#FFD700;width:100px;">
<b>菜单b><br>HTML<br>CSS<br>JavaScript
div>
<div id="content" style="background-color:#EEEEEE;flex:1;">
内容在这里
div>
div>
<div id="footer" style="background-color:#FFA500;text-align:center;">
layout
div>
div>
整体布局结构
这个布局使用了嵌套的Flex容器：
- 最外层容器
#container使用垂直方向的Flex布局 - 中间内容区使用水平方向的Flex布局
关键技术点
-
外层容器设置
display: flex; flex-direction: column;- 激活Flex布局并设置主轴方向为垂直
- 子元素(header、内容区、footer)会垂直排列
-
中间内容区的水平布局
display: flex;- 激活水平方向的Flex布局
- 子元素(#menu和#content)会水平排列
-
弹性空间分配
flex: 1;- 内容区会自动填充剩余空间
- 侧边栏固定宽度100px，内容区占据剩余的400px
-
表单
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>
<h2>表单h2>
<form action="/" method="post">
<label for="name">用户名:label>
<input type="text" id="name" name="name" required>
<br>
<label for="password">密码:label>
<input type="password" id="password" name="password" required>
<br>
<label>性别:label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女label>
<br>
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息label>
<br>
<label for="country">国家:label>
<select id="country" name="country">
<option value="cn">CNoption>
<option value="usa">USAoption>
<option value="uk">UKoption>
select>
<br>
<input type="submit" value="提交">
form>
body>
html>
form
-
action 属性详解
作用：指定表单数据提交的目标 URL（服务器地址）。
示例中的 /：表示根路径（如 https://example.com/）。 -
method 属性详解
作用：定义表单数据的传输方式，主要有两种：
method=“get”（默认值，不写时自动使用)
label 和 input
label：
提高可访问性：
屏幕阅读器会将标签文本读给视力障碍用户，帮助他们理解控件用途。
点击标签时，对应的表单控件（如输入框）会自动获取焦点，扩大了可点击区域。
增强用户体验：
用户可以点击标签文字来激活控件，而不仅限于点击控件本身。
标签与控件的视觉关联更清晰，减少误操作。
for 联系控件
input也是一种控件
- type
标签的type属性用于指定输入控件的类型和行为。- name
- 数据标识：当用户提交表单时，name属性会与输入值配对，形成name=value的键值对，发送给服务器。
例如：用户在name="username"的输入框中填写 “用户名”，提交后数据为username=用户名。- 后端处理依据：服务器通过name属性识别不同字段，确保数据正确解析（如区分用户名和密码）。
- 表单重置 / 验证：JavaScript 可通过name获取表单元素，实现数据验证或重置操作（如document.forms[0].elements[‘username’]）。
- id :用户js交互
2 HTML5
2.1 HTML5 的背景：从演进到革新的Web标准
HTML5 是超文本标记语言（HTML）的第五次重大版本更新，其诞生背景与技术需求的变革紧密相关。以下从发展历程、技术驱动、核心目标三个维度解析其背景：
一、HTML的演进脉络：从HTML到HTML5的迭代
-
HTML的早期发展（1993-2000年）
- 1993年，HTML 1.0 作为简单的标记语言诞生，仅支持基础文本和链接。
- 1995年，HTML 2.0 加入表单、表格等交互元素，但标准松散，浏览器兼容性问题频发。
- 1999年，HTML 4.01 成为W3C（万维网联盟）推荐标准，引入CSS样式分离，但仍依赖插件（如Flash、Silverlight）实现多媒体功能。
-
XHTML的尝试与局限（2000-2006年）
- XHTML 1.0（2000年）试图将HTML与XML结合，要求严格的标签闭合和语法规范，但因过于复杂，未被开发者广泛接受。
- XHTML 2.0（草案）因脱离实际需求（如废除表格布局）在2009年被W3C废弃，促使HTML5的独立发展。
二、技术驱动：HTML5诞生的核心需求
-
多媒体与交互性的爆发
- 2000年后，视频、音频、游戏等富媒体内容需求激增，但HTML 4.01依赖Flash等插件，存在性能差、兼容性低、安全漏洞等问题。
- 移动设备（如iPhone）兴起，要求网页在低功耗设备上流畅运行，插件模式难以适配。
-
Web应用化的趋势
- 谷歌Gmail、地图等Web应用推动“网页即应用”的需求，HTML 4.01缺乏本地存储、离线访问等能力，无法满足复杂应用场景。
-
浏览器竞争与标准统一
- 2004年，苹果、 Mozilla等浏览器厂商成立WHATWG（Web超文本应用技术工作组），推动HTML5草案制定，试图解决W3C标准滞后问题。
- 2007年，W3C加入HTML5开发，两大组织最终合并标准，于2014年发布HTML5正式推荐版本。
三、HTML5的核心目标：解决旧标准的痛点
-
简化开发与增强语义化
- 引入语义化标签（如
,），替代无序的布局，提升代码可读性和SEO优化。- 简化语法（如自闭合标签
无需），兼容旧版本HTML。原生支持多媒体与图形
和标签直接嵌入媒体，无需插件（如YouTube视频可直接在网页播放）。和支持动态图形渲染，推动Web游戏（如《愤怒的小鸟》网页版）和数据可视化发展。
增强Web应用能力
- 本地存储：
localStorage（永久存储）和sessionStorage（会话存储）替代Cookie，容量更大（5-10MB）。 - 离线应用：
Application Cache允许网页离线访问，提升用户体验（如地铁中的新闻App）。 - 地理定位：
Geolocation API获取用户位置，支持地图导航、附近服务推荐等场景。
跨设备与兼容性优化
- 响应式设计基础：通过
meta viewport标签适配移动端屏幕，推动“一次开发，多端运行”。 - 浏览器兼容性：HTML5标准对旧浏览器提供polyfill（如Shiv.js）兼容方案，降低迁移成本。
四、HTML5的历史意义与影响
- 终结插件时代：Flash因HTML5普及逐渐被淘汰（Adobe于2020年停止支持）。
- 推动Web生态统一：让网页具备原生应用的能力，减少对桌面软件和移动端App的依赖。
- 技术栈革新：催生React、Vue等前端框架，与HTML5特性深度结合（如虚拟DOM、组件化）。
五、HTML5后的演进：仍在持续的Web标准
HTML5并非终点，其后续通过微更新（如HTML5.1、HTML5.2）持续完善：- 2017年，HTML5.2加入
loading="lazy"懒加载属性，优化图片性能。 - 如今，Web标准通过W3C和WHATWG的持续合作，不断吸纳新特性（如WebAssembly、WebGPU），延续HTML5“让网页更强大”的初衷。
2.2 实战
- video标签
<video controls width="640" height="360" poster="video-poster.jpg" preload="metadata" autoplay muted loop playsinline crossorigin="anonymous" disablepictureinpicture disableRemotePlayback > <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> <p>您的浏览器不支持HTML5视频播放。请下载视频： <a href="video.mp4">下载MP4格式a> p> video>controls：显示默认播放控件（播放 / 暂停、进度条、音量等）。
width/height：设置视频播放器尺寸。
poster：视频加载前显示的封面图片（需替换为实际图片路径）。
preload：提前加载视频元数据（如时长、分辨率）。
autoplay：视频就绪后自动播放（需配合 muted 使用，避免浏览器限制）。
muted：默认静音播放（解决自动播放限制）。
loop：视频播放结束后自动循环。
playsinline：iOS Safari 中内联播放（不自动全屏）。
crossorigin：允许跨域加载视频（需服务器配置 CORS）。
disablepictureinpicture：禁用画中画模式（部分浏览器支持）。
disableRemotePlayback：禁用远程播放（如 AirPlay、Cast 等）。source src 路径 type 音频格式
2.音频
<audio controls preload="metadata" autoplay muted loop crossorigin="anonymous" disableRemotePlayback > <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <source src="audio.wav" type="audio/wav"> <p>您的浏览器不支持HTML5音频播放。请下载音频： <a href="audio.mp3">下载MP3格式a> p> audio>当网页从 https://a.com 加载视频文件时，如果视频文件的 URL 指向另一个域名（如 https://b.com/video.mp4），浏览器会默认阻止这种请求，因为它违反了 同源策略（Same-Origin Policy）。
同源策略是浏览器的安全机制，限制网页只能访问同源（相同协议、域名、端口）的资源，以防止跨站脚本攻击（XSS）和数据泄露。- 字幕
DOCTYPE html> <html> <head> <title>HTML5 字幕示例title> head> <body> <h3>带字幕的视频播放h3> <div style="max-width: 640px; margin: 0 auto;"> <video id="videoPlayer" controls width="100%"> <source src="video.mp4" type="video/mp4"> <track kind="subtitles" src="subtitles/zh.vtt" srclang="zh" label="中文" default> <track kind="subtitles" src="subtitles/en.vtt" srclang="en" label="英文"> <track kind="descriptions" src="subtitles/description.vtt" srclang="zh" label="画面描述"> video> <div style="margin-top: 10px;"> <button id="changeSubtitleStyle">更改字幕样式button> div> div> <script> // 字幕样式自定义 const videoPlayer = document.getElementById('videoPlayer'); const changeSubtitleStyle = document.getElementById('changeSubtitleStyle'); changeSubtitleStyle.addEventListener('click', () => { // 通过CSS变量修改字幕样式 videoPlayer.style.setProperty('--video-caption-color', 'yellow'); videoPlayer.style.setProperty('--video-caption-font-size', '24px'); videoPlayer.style.setProperty('--video-caption-background', 'rgba(0,0,0,0.7)'); videoPlayer.style.setProperty('--video-caption-padding', '10px'); }); script> body> html>抛开 一切 style 和script ，这两个分别是css和js
kind=“subtitles” 明确轨道类型为字幕，用于显示对话内容。通常针对原语言非观众母语的情况（如外语电影的翻译字幕）。
src=“subtitles/zh.vtt” 指定字幕文件路径（zh.vtt），该文件需遵循WebVTT 格式（如：00:00:05.000
–> 00:00:08.500\n这是一段测试视频的字幕。）。 srclang=“zh” 声明字幕语言为中文（ISO 639-1 语言代码），帮助浏览器过滤或推荐语言。 label=“中文” 在视频控件的字幕菜单中显示的标签文本，供用户选择。 default
设置为默认字幕，视频加载时自动显示。若未指定default，浏览器会根据用户语言偏好自动选择，或显示字幕菜单让用户手动选择 - 简化语法（如自闭合标签
- 引入语义化标签（如