郑州上街区网站建设公司,怎么找到合适的网站建设商,网站建设虚线代码,想自己开发一款软件HTML 是超文本标记语言#xff08;HyperText Markup Language#xff09;的缩写#xff0c;它是一种用于创建网页的标准标记语言。HTML 使用标记标签#xff08;tag#xff09;来描述网页的结构和内容#xff0c;告诉浏览器如何显示网页元素。 1. HTML 前言#xff1a;无…
HTML 是超文本标记语言HyperText Markup Language的缩写它是一种用于创建网页的标准标记语言。HTML 使用标记标签tag来描述网页的结构和内容告诉浏览器如何显示网页元素。 1. HTML 前言无css和js板块 最简单的html
htmlhead titleMy First HTML Page/titlemate charestutf-8 /mate/headbodyh1Welcome to my test page/h1/body
/html语法规则 本质上由各种标签组成 即是一对 “html /html 有始有终 它是一个html 标签根元素表示 HTML 文档的根所有其他标签都必须嵌套在 html 内。head 标签是文档的头部用于存储 元数据Metadata 和 页面配置信息。它不会直接显示在浏览器中但包含了控制页面行为和展示方式的关键设置 (title 表示为顶端名称 mate charset 为编码信息)body 为页面主题内容 (h1 为标题) 加入资源描述
htmlheadmeta charsetUTF-8titleTest Page/title/headbodypThis is a paragraph./ppThis is another paragraph./p第一行br /第二行br /第三行br /divdiv标签独占一行/divdivdiv标签独占一行/divspanspan标签_1/spanspanspan标签_2/spanbr/img srcimage.png title提示文本img srcimage1.png alt替换文本a hrefURL链接文本/a/body
/html 这个p 代表一个段落 注意html不会自动换行 所有由段落 br 强制换行 这个div 涉及到 块级元素
特性 独占一行默认会在前后创建换行多个 会垂直排列。 宽度默认占满父容器除非设置了宽度。适合布局用于划分页面区域如头部、导航、内容区、页脚 在 HTML 和 CSS 中父容器Parent Container是一个重要的结构概念指的是 包含其他元素的 HTML 元素。简单来说一个元素 “包裹” 了另一个元素那么前者就是后者的父容器。 span标签内联元素
特性 不换行多个 会在同一行内排列。宽度由内容决定不会自动扩展。 适合文本片段用于标记或样式化部分文本。
p这是一段文本span stylecolor: red;这段变红/spanspan stylefont-weight: bold;这段加粗/span。
/pimg 是这个图片资源 src代表一个路径 title 点在图片上面显示的内容 alt 是加载失败 用文字代替的 a 代表是一个超链接 表格加表单
html head titleTable Lists /title /head body h4一列:/h4table border1trtd100/td/tr/tableh4一行三列:/h4table border1trtd100/tdtd200/tdtd300/td/tr/tableh4两行三列:/h4table border1trtd100/tdtd200/tdtd300/td/trtrtd400/tdtd500/tdtd600/td/tr/tableh4编号列表/h4olliApples/liliBananas/liliLemons/liliOranges/li/ol/body
/html表格 :table是定义 表格 tr定义一行 td是元素 列表: li是有序列表 默认从1开始 4. 布局
div idcontainer stylewidth:500px; display:flex; flex-direction:column;div idheader stylebackground-color:#FFA500;h1 stylemargin-bottom:0;主要的网页标题/h1/divdiv styledisplay:flex;div idmenu stylebackground-color:#FFD700;width:100px;b菜单/bbrHTMLbrCSSbrJavaScript/divdiv idcontent stylebackground-color:#EEEEEE;flex:1;内容在这里/div/divdiv idfooter stylebackground-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 charsetutf-8
title菜鸟教程(runoob.com)/title
/head
bodyh2表单/h2form action/ methodpost!-- 文本输入框 --label forname用户名:/labelinput typetext idname namename requiredbr!-- 密码输入框 --label forpassword密码:/labelinput typepassword idpassword namepassword requiredbr!-- 单选按钮 --label性别:/labelinput typeradio idmale namegender valuemale checkedlabel formale男/labelinput typeradio idfemale namegender valuefemalelabel forfemale女/labelbr!-- 复选框 --input typecheckbox idsubscribe namesubscribe checkedlabel forsubscribe订阅推送信息/labelbr!-- 下拉列表 --label forcountry国家:/labelselect idcountry namecountryoption valuecnCN/optionoption valueusaUSA/optionoption valueukUK/option/selectbr!-- 提交按钮 --input typesubmit value提交/form/body
/htmlform action 属性详解 作用指定表单数据提交的目标 URL服务器地址。 示例中的 /表示根路径如 https://example.com/。 method 属性详解 作用定义表单数据的传输方式主要有两种 method“get”默认值不写时自动使用)
label 和 input label 提高可访问性 屏幕阅读器会将标签文本读给视力障碍用户帮助他们理解控件用途。 点击标签时对应的表单控件如输入框会自动获取焦点扩大了可点击区域。 增强用户体验 用户可以点击标签文字来激活控件而不仅限于点击控件本身。 标签与控件的视觉关联更清晰减少误操作。 for 联系控件 input也是一种控件 type 标签的type属性用于指定输入控件的类型和行为。name 数据标识当用户提交表单时name属性会与输入值配对形成namevalue的键值对发送给服务器。 例如用户在nameusername的输入框中填写 “用户名”提交后数据为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.02000年试图将HTML与XML结合要求严格的标签闭合和语法规范但因过于复杂未被开发者广泛接受。XHTML 2.0草案因脱离实际需求如废除表格布局在2009年被W3C废弃促使HTML5的独立发展。
二、技术驱动HTML5诞生的核心需求 多媒体与交互性的爆发 2000年后视频、音频、游戏等富媒体内容需求激增但HTML 4.01依赖Flash等插件存在性能差、兼容性低、安全漏洞等问题。移动设备如iPhone兴起要求网页在低功耗设备上流畅运行插件模式难以适配。 Web应用化的趋势 谷歌Gmail、地图等Web应用推动“网页即应用”的需求HTML 4.01缺乏本地存储、离线访问等能力无法满足复杂应用场景。 浏览器竞争与标准统一 2004年苹果、 Mozilla等浏览器厂商成立WHATWGWeb超文本应用技术工作组推动HTML5草案制定试图解决W3C标准滞后问题。2007年W3C加入HTML5开发两大组织最终合并标准于2014年发布HTML5正式推荐版本。
三、HTML5的核心目标解决旧标准的痛点 简化开发与增强语义化 引入语义化标签如header, nav, article替代无序的div布局提升代码可读性和SEO优化。简化语法如自闭合标签input无需/input兼容旧版本HTML。 原生支持多媒体与图形 video和audio标签直接嵌入媒体无需插件如YouTube视频可直接在网页播放。canvas和svg支持动态图形渲染推动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加入loadinglazy懒加载属性优化图片性能。如今Web标准通过W3C和WHATWG的持续合作不断吸纳新特性如WebAssembly、WebGPU延续HTML5“让网页更强大”的初衷。
2.2 实战
video标签
video controls width640 height360 postervideo-poster.jpg preloadmetadata autoplay muted loop playsinline crossoriginanonymousdisablepictureinpicturedisableRemotePlayback
!-- 多格式支持按优先级排列 --source srcvideo.mp4 typevideo/mp4source srcvideo.webm typevideo/webmsource srcvideo.ogv typevideo/ogg!-- 备用内容当浏览器不支持video标签时显示 --p您的浏览器不支持HTML5视频播放。请下载视频a hrefvideo.mp4下载MP4格式/a/p
/videocontrols显示默认播放控件播放 / 暂停、进度条、音量等。 width/height设置视频播放器尺寸。 poster视频加载前显示的封面图片需替换为实际图片路径。 preload提前加载视频元数据如时长、分辨率。 autoplay视频就绪后自动播放需配合 muted 使用避免浏览器限制。 muted默认静音播放解决自动播放限制。 loop视频播放结束后自动循环。 playsinlineiOS Safari 中内联播放不自动全屏。 crossorigin允许跨域加载视频需服务器配置 CORS。 disablepictureinpicture禁用画中画模式部分浏览器支持。 disableRemotePlayback禁用远程播放如 AirPlay、Cast 等。 source src 路径 type 音频格式 2.音频
audio controls preloadmetadata autoplay muted loop crossoriginanonymousdisableRemotePlayback
!-- 多格式支持按优先级排列 --source srcaudio.mp3 typeaudio/mpegsource srcaudio.ogg typeaudio/oggsource srcaudio.wav typeaudio/wav!-- 备用内容当浏览器不支持audio标签时显示 --p您的浏览器不支持HTML5音频播放。请下载音频a hrefaudio.mp3下载MP3格式/a/p
/audio当网页从 https://a.com 加载视频文件时如果视频文件的 URL 指向另一个域名如 https://b.com/video.mp4浏览器会默认阻止这种请求因为它违反了 同源策略Same-Origin Policy。 同源策略是浏览器的安全机制限制网页只能访问同源相同协议、域名、端口的资源以防止跨站脚本攻击XSS和数据泄露。 字幕
!DOCTYPE html
html
headtitleHTML5 字幕示例/title
/head
bodyh3带字幕的视频播放/h3div stylemax-width: 640px; margin: 0 auto;video idvideoPlayer controls width100%source srcvideo.mp4 typevideo/mp4!-- 多语言字幕轨道 --track kindsubtitles srcsubtitles/zh.vtt srclangzh label中文 defaulttrack kindsubtitles srcsubtitles/en.vtt srclangen label英文!-- 音频描述轨道为视障用户 --track kinddescriptions srcsubtitles/description.vtt srclangzh label画面描述/video!-- 字幕样式控制 --div stylemargin-top: 10px;button idchangeSubtitleStyle更改字幕样式/button/div/divscript// 字幕样式自定义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浏览器会根据用户语言偏好自动选择或显示字幕菜单让用户手动选择
