当前位置： 首页 > news >正文

自己创网站百度识图扫一扫

news 2025/7/4 12:47:28
自己创网站,百度识图扫一扫,金华在线制作网站,关于网站设计的书籍HTML 是超文本标记语言（HyperText Markup Language）的缩写，它是一种用于创建网页的标准标记语言。HTML 使用标记标签（tag）来描述网页的结构和内容，告诉浏览器如何显示网页元素。 1. HTML 前言：无…

HTML 是超文本标记语言（HyperText Markup Language）的缩写，它是一种用于创建网页的标准标记语言。HTML 使用标记标签（tag）来描述网页的结构和内容，告诉浏览器如何显示网页元素。

1. HTML

前言：无css和js板块

  1. 最简单的html
<html><head>  <title>My First HTML Page</title><mate charest="utf-8">  </mate></head><body><h1>Welcome to my test page</h1></body>
</html>

语法规则 本质上由各种标签组成

  • 即是一对 “html /html" 有始有终 它是一个html 标签（根元素）表示 HTML 文档的根，所有其他标签都必须嵌套在 html 内。
  • head 标签是文档的头部，用于存储 元数据（Metadata） 和 页面配置信息。它不会直接显示在浏览器中，但包含了控制页面行为和展示方式的关键设置
    (title 表示为顶端名称 mate charset 为编码信息)
  • body 为页面主题内容 (h1 为标题)
  1. 加入资源描述
<html><head><meta charset="UTF-8"><title>Test Page</title></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标签_1</span><span>span标签_2</span><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 代表是一个超链接

  1. 表格加表单
<html>  <head>  <title>Table Lists </title>  </head>  <body> <h4>一列:</h4><table border="1"><tr><td>100</td></tr></table><h4>一行三列:</h4><table border="1"><tr><td>100</td><td>200</td><td>300</td></tr></table><h4>两行三列:</h4><table border="1"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table><h4>编号列表：</h4><ol><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></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布局

关键技术点

  1. 外层容器设置

    display: flex;
flex-direction: column;
    • 激活Flex布局并设置主轴方向为垂直
    • 子元素(header、内容区、footer)会垂直排列

  2. 中间内容区的水平布局

    display: flex;
    • 激活水平方向的Flex布局
    • 子元素(#menu和#content)会水平排列

  3. 弹性空间分配

    flex: 1;
    • 内容区会自动填充剩余空间
    • 侧边栏固定宽度100px，内容区占据剩余的400px

  4. 表单

<!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">CN</option><option value="usa">USA</option><option value="uk">UK</option></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的迭代

  1. HTML的早期发展（1993-2000年）

    • 1993年，HTML 1.0 作为简单的标记语言诞生，仅支持基础文本和链接。
    • 1995年，HTML 2.0 加入表单、表格等交互元素，但标准松散，浏览器兼容性问题频发。
    • 1999年，HTML 4.01 成为W3C（万维网联盟）推荐标准，引入CSS样式分离，但仍依赖插件（如Flash、Silverlight）实现多媒体功能。

  2. XHTML的尝试与局限（2000-2006年）

    • XHTML 1.0（2000年）试图将HTML与XML结合，要求严格的标签闭合和语法规范，但因过于复杂，未被开发者广泛接受。
    • XHTML 2.0（草案）因脱离实际需求（如废除表格布局）在2009年被W3C废弃，促使HTML5的独立发展。

二、技术驱动：HTML5诞生的核心需求

  1. 多媒体与交互性的爆发

    • 2000年后，视频、音频、游戏等富媒体内容需求激增，但HTML 4.01依赖Flash等插件，存在性能差、兼容性低、安全漏洞等问题。
    • 移动设备（如iPhone）兴起，要求网页在低功耗设备上流畅运行，插件模式难以适配。

  2. Web应用化的趋势

    • 谷歌Gmail、地图等Web应用推动“网页即应用”的需求，HTML 4.01缺乏本地存储、离线访问等能力，无法满足复杂应用场景。

  3. 浏览器竞争与标准统一

    • 2004年，苹果、 Mozilla等浏览器厂商成立WHATWG（Web超文本应用技术工作组），推动HTML5草案制定，试图解决W3C标准滞后问题。
    • 2007年，W3C加入HTML5开发，两大组织最终合并标准，于2014年发布HTML5正式推荐版本。

三、HTML5的核心目标：解决旧标准的痛点

  1. 简化开发与增强语义化

    • 引入语义化标签（如<header>, <nav>, <article>），替代无序的<div>布局，提升代码可读性和SEO优化。
    • 简化语法（如自闭合标签<input>无需</input>），兼容旧版本HTML。

  2. 原生支持多媒体与图形

    • <video>和<audio>标签直接嵌入媒体，无需插件（如YouTube视频可直接在网页播放）。
    • <canvas>和<svg>支持动态图形渲染，推动Web游戏（如《愤怒的小鸟》网页版）和数据可视化发展。

  3. 增强Web应用能力

    • 本地存储：localStorage（永久存储）和sessionStorage（会话存储）替代Cookie，容量更大（5-10MB）。
    • 离线应用：Application Cache允许网页离线访问，提升用户体验（如地铁中的新闻App）。
    • 地理定位：Geolocation API获取用户位置，支持地图导航、附近服务推荐等场景。

  4. 跨设备与兼容性优化

    • 响应式设计基础：通过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 实战

  1. video标签
<video controls width="640" height="360" poster="video-poster.jpg" preload="metadata" autoplay muted loop playsinline crossorigin="anonymous"disablepictureinpicturedisableRemotePlayback
><!-- 多格式支持（按优先级排列） --><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"><source src="video.ogv" type="video/ogg"><!-- 备用内容（当浏览器不支持video标签时显示） --><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"><!-- 备用内容（当浏览器不支持audio标签时显示） --><p>您的浏览器不支持HTML5音频播放。请下载音频：<a href="audio.mp3">下载MP3格式</a></p>
</audio>

当网页从 https://a.com 加载视频文件时，如果视频文件的 URL 指向另一个域名（如 https://b.com/video.mp4），浏览器会默认阻止这种请求，因为它违反了 同源策略（Same-Origin Policy）。
同源策略是浏览器的安全机制，限制网页只能访问同源（相同协议、域名、端口）的资源，以防止跨站脚本攻击（XSS）和数据泄露。

  1. 字幕
<!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，浏览器会根据用户语言偏好自动选择，或显示字幕菜单让用户手动选择

http://www.hengruixuexiao.com/news/18418.html

相关文章：

  • 郴州网站建设公司深圳关键词自动排名
  • 一个专门做各种恐怖片的电影网站百度实时热点排行榜
  • 用css做商务网站的代码常州seo外包
  • 瓯北网站制作桂林seo排名
  • 做网站下面会有小广告线上宣传渠道和宣传方式
  • 云梦网站建设百度竞价渠道户
  • 郑州做网站排名公司舆情服务公司
  • 手机网站建设报价多少营销策划与运营方案
  • 做网站的图片要求大小百度推广助手客户端
  • wordpress 原生相册seo排名技术软件
  • 营销渠道策略怎么写上海seo优化培训机构
  • wordpress 暂无评论扬州seo推广
  • wordpress 部署广州seo网站多少钱
  • 一个网站拿到手里想做优化第一步怎么做游戏推广员是做什么的
  • 湛江网站建设如何营销推广自己的产品
  • 两学一做知识问答网站搜索引擎营销的方法有哪些
  • 毕设做网站的系统概述怎么写成都seo公司
  • 在linux系统上用什么做网站百度口碑官网
  • 阿里巴巴网站推广怎么做株洲seo优化公司
  • 如何做网站对话框凡科建站app
  • 做网站客户会问什么问题网络营销企业案例
  • 2019做网站图片用什么格式提升排名
  • 岳阳政府网站是哪个单位建设郑州免费做网站
  • 做动漫的游戏 迅雷下载网站直销的八大课程
  • 那个网站平台可以做兼职优化关键词排名
  • 新建网站做优化网络营销swot分析
  • 做国外搞笑网站有哪些互联网营销师培训教程
  • 网站在线咨询代码搜索引擎营销的案例
  • 石岩网站建设网络营销五个主要手段
  • 网站开发女生适合吗上海公司排名