web前端学习(十一)——HTML5中脚本、URL及XHTML的简单学习

简介: web前端学习(十一)——HTML5中脚本、URL及XHTML的简单学习

1.HTML脚本


JavaScript使 HTML 页面具有更强的动态和交互性。 


1.1 <script> 标签

<script> 标签用于定义客户端脚本,比如 JavaScript。


<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。


JavaScript 最常用于图片操作、表单验证以及内容动态更新。


下面的脚本会向浏览器输出"Hello World!":


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <script>
      document.write("Hello World!!!")
    </script>
  </body>
</html>


1.2 <noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。


<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。


只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <script>
      document.write("Hello World!!!")
    </script>
    <noscript>抱歉,您的浏览器不支持JavaScript!!!</noscript>
    <p>
      不支持 JavaScript 的浏览器会使用&nbsp;&lt;noscript&gt;&nbsp;元素中定义的内容(文本)来替代。
    </p>
  </body>
</html>


2.HTML中的URL


URL:统一资源定位器(Uniform Resource Locators) 。


Web浏览器通过URL从Web服务器请求页面。


当您点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。


一个统一资源定位器(URL) 用于定位万维网上的文档。


scheme://host.domain:port/path/filename

说明:


  • scheme - 定义因特网服务的类型。最常见的类型是 http
  • host - 定义域主机(http 的默认主机是 www)
  • domain - 定义因特网域名,比如 baidu.com
  • port - 定义主机上的端口号(http 的默认端口号是 80)
  • path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
  • filename - 定义文档/资源的名称

2.1 常见的 URL Scheme  


image.png


2.2 URL字符编码


URL 只能使用 ASCII 字符集.

来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。


URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。


URL 不能包含空格。URL 编码通常使用 + 来替换空格。


3.XHTML简介


XHTML 是以 XML 格式编写的 HTML。


3.1 什么是XHTML?


  • XHTML 指的是可扩展超文本标记语言
  • XHTML 与 HTML 4.01 几乎是相同的
  • XHTML 是更严格更纯净的 HTML 版本
  • XHTML 是以 XML 应用的方式定义的 HTML
  • XHTML 是 2001 年 1 月发布的 W3C 推荐标准
  • XHTML 得到所有主流浏览器的支持


3.2 与 HTML 相比最重要的区别

文档结构


  • XHTML DOCTYPE 是强制性的
  • <html> 中的 XML namespace 属性是强制性的
  • <html>、<head>、<title> 以及 <body> 也是强制性的

元素语法


  • XHTML 元素必须正确嵌套
  • XHTML 元素必须始终关闭
  • XHTML 元素必须小写
  • XHTML 文档必须有一个根元素

属性语法


  • XHTML 属性必须使用小写
  • XHTML 属性值必须用引号包围
  • XHTML 属性最小化也是禁止的


3.3 <!DOCTYPE ....>是强制性的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8"/>
    <title>文档标题</title>
  </head>
  <body>
    文档内容
  </body>
</html>


3.4 XHTML 元素必须合理嵌套

在 XHTML 中,所有的元素都必须互相合理地嵌套,像这样:

<b><i>粗体和斜体文本</i></b>


3.5 XHTML 元素必须有关闭标签

<p>这是一个段落</p>
<p>这是另外一个段落</p>

3.6 空元素必须包含关闭标签

分行:<br />
水平线: <hr />
图片: <img src="happy.gif" alt="Happy face" />

3.7 XHTML 元素必须是小写

<body>
<p>这是一个段落</p>
</body>

3.8 属性名称必须是小写、加上引号(不允许属性简写)

<table width="100%">
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
相关文章
|
2月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
332 108
|
2月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
310 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
4月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
51 2
|
4月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
113 1
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
205 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
11月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
216 6
|
11月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
297 0
|
开发框架 前端开发 .NET
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
182 0
|
Java
JAVA 获取 URL 指定参数的值
JAVA 获取 URL 指定参数的值
166 0

热门文章

最新文章