H5基本开发2——(HTML文档基本结构)

news2024/10/6 14:29:06
现实生活中,任何一个文档都是具有一定的格式,不同的文档,基本格式不同,例如:请假条、调休单、剧本、年中总结、十九大报告、等等,而我们所编写等 html 文档也是具有一定的编写基本格式的 事实上 W3C 组织一直致力于规范的 Html 页面,但是事实上开发者基本不太理会严格规范。而 html5 事实 上是一种妥协式的规范, HTML5 规范十分宽松,甚至不再提供文档类型定义 dtd
 

html基本文档结构

<!DOCTYPE html> 声明为 HTML5 文档,声明有助于浏览器中正确显示网页
<!DOCTYPE html> 写在 html 文档的第一行是文档中唯一个非标签字符,起文档说明作用,用来告知浏览器,当前文档是一个支持 html5 标准的文档,不可省略
<!--
<!DOCTYPE html>是标准通用标记语言的文档类型声明,目的在于告知解析器用什么dtd来解析文档,
告知浏览器页面使用哪种html版本,html5不是基于SGML,因此不要引用dtd
<!DOCTYPE>是文档中唯一个非标签字符,指示浏览器按照哪种标记语言规则编写,不可省略,以确保浏
览器正确呈现,避免浏览器的怪异模式CompatMode
<!--和--> 注释不但可以方便用于对代码的理解,并且可以便于系统的后续维护。
-->
<!DOCTYPE html>
<!--
注释:1、描述当前代码功能,代码信息2、编写日期、作者3、维护日期、维护者
注意:html5不区分大小写字母,单个标记的标记结束符,相关属性是否添加引号
-->
<!--
标记是html页面中的基本元素,是html页面的重要组成部分,通过不同的标记可以在web网页中产
生各种指定的显示效果。
网页中所有的内容都写在一对html标签中,允许完全省略这个元素
-->
<html>
<!-- head标签中的内容做页面控制,用来描述HTML文档相关信息,不直接在页面显示 -->
<head>
<!-- 用来设置浏览器标签页主题 -->
<title>百度一下,你就知道</title>
<!-- 设置文档的中文编码解析,meta提供有关页面的元数据,即与文档相关联的名值对,
charset规定文档的字符编码 -->
<meta charset="utf-8">
</head>
<!-- 所有页面中看的到的内容都写在body标签中,html5新加入了20多个标签,废弃了
frameset、bgsound、center、marquee等14个标签 -->
<body>
HTML文档的主要部分,在此标记对之间可包含众多的标记和信息
</body>
</html>
针对 IE 浏览器 html5shiv 是比较好的解决方案。 html5shiv 主要解决 HTML5 提出的新的元素不被 IE6-8 识别,这些新元素不能作为父节点包裹子元素,并且不能应用 CSS 样式

文件头

  • <head> 元素包含了所有的头部标签元素,在 <head> 元素中可以插入脚本script,样式文件CSS各种meta信息
  • <meta charset="utf-8"> 定义网页编码格式为utf-8
  • 可以添加在头部区域的元素标签为titlestylemetalinkscriptbase标签
  • <title> 元素描述了文档的标题
  • <link> 标签通常用于链接到样式表。 <link rel="stylesheet" type="text/css" href="mystyle.css">
  • <style> 标签定义了HTML文档的样式文件引用地址,也可以直接添加样式来渲染HTML文档
  • <script> 标签用于加载脚本文件
<head></head>标记对构成HTML文档的开头部分
title标记:<title></title>
Base标记:<base href="URL">
base标记是一个基链接标记,是一个单标记
网页上的所有相对路径在链接时都将在前面加上基链接指向的地址
当使用时,BASE元素必须出现在文档的HEAD内,在任何对外部源的引用之前
此元素不会被渲染
此元素不需要关闭标签
Link标记:<Link rel="关系" href="URL">
<link>能完成最常用的链接外部样式表文件
<link rel="stylesheet" type="text/css" href= "all.css" />
Meta标记:<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
网页的描述,用于搜索引擎的收录
<meta name="Description" content="This is Yanjun's Home Page">
<meta name="Keywords" content="Chris, Web, Music, photo">
要浏览器重新载入该页,不要使用快取功能,
<meta http-equiv="Expires" content=“0">过期时间
<meta http-equiv="Pragma" content="no-cache">
预定秒数内自动转到指定网址。单位为秒
<meta http-equiv="refresh" content="10; url=http://www.c029.com">

html注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。不是必须的
<!DOCTYPE html>
<!-- 这里是一个当前html文件的说明 -->
<html lang="zh-CN">

html元素

<html> 元素定义了整个 HTML 文档,是 html 文档的根元素。不是必须的内容
这个元素拥有一个开始标签 <html> 以及一个结束标签 </html>

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称 / 值对的形式出现,比如: name="value"
属性总是在 HTML 元素的 开始标签 中规定。

body元素

<body> 元素定义了 HTML 文档的主体,包含了可见的页面内容
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>
不是必须的内容
可以给 body 上添加一些属性进行整体的显示效果配置,例如 bgcolor ,但是不建议使用,建议使用 css 行设置

Body标记中的属性

建议使用css进行显示效果控制

<style type="text/css">
body{
background-color:yellow;
}
</style>
<body bgcolor="red">
</body>

 可视化的HTML页面结构

 Html5新元素的页面分栏设计

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
header,aside,article,footer{
border: 1px solid #666;
padding: 5px;
}
header{
width: 500px;
}
aside{
float:left;
width: 60px;
height: 100px;
}
article{
float: left;
width: 428px;
height: 100px;
}
footer{
clear: both;
width: 500px;
}
</style>
</head>
<body>
<header>导航部分</header>
<aside>菜单部分</aside>
<article>内容部分</article>
<footer>底部说明部分</footer>
</body>
</html>

这里的html新增标记包括语义,和html中原来的 <div id="header"> 从显示效果上没有什么明确变 化。但是新增的语义标签,除了能通过css添加显示效果外,还包含对应的语义。例如header明确是页头,nav表示构建页面的导航,article构建页面内容部分,footer表示页面已经到了页脚。这些标签html规范建议使用以提高开发效率

HTML文档中使用特殊字符

有些字符在 HTML5 中是保留字。比如不能在文本中使用大于,小于标记或者尖括号,因为浏览器可能会误认为它们是标记。
  • 实体是浏览器用来替换特殊字符的一种代码。
  • 常见的字符实体有
……200&gt;189…… >号
……20&lt;189…… <号
……&quot;风驰电掣&quot…… “号
……x&gty;&amp;x=120…… &与符号
……&copy;CopyRight 版权所有…… ©版权符号
……&reg;QingHuaIT…… ® 注册商标
&nbsp; 空格

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/11716.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[附源码]java毕业设计教学辅助系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

TwoModalBERT进行角色分类

你是否遇到过数据集中有多个文本特性的情况?例如&#xff0c;根据消息的上下文正确地对消息进行分类&#xff0c;即理解前面的消息。比如说我们有下面的数据集&#xff0c;需要对其进行分类。 当只考虑message时&#xff0c;你可以看到它的情绪是积极的&#xff0c;因为“incr…

关于电影的HTML网页设计—— 电影小黄人6页 HTML+CSS+JavaScript

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 精彩专栏推荐&#x1f4…

【Pytorch with fastai】第 10 章 :NLP 深入探讨 RNN

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

【JavaScript高级程序设计】重点-第五章笔记:Date、RegExp、原始值包装类、单例内置对象

文章目录基本引用类型1.Date1.1 继承的方法1.2 日期格式化方法1.3 日期/时间组件方法2.RegExp正则表达式2.1 RegExp 实例属性2.2 RegExp 实例方法2.3 RegExp 构造函数属性3.原始值包装类型3.1 Boolean3.2 Number3.3 String3.3.1 JavaScript 字符3.3.2 normalize()方法3.3.3 字符…

AI 实战篇 |十分钟学会【动物识别】,快去寻找身边的小动物试试看吧【送书】

&#x1f3ac; 博客主页&#xff1a;https://xiaoy.blog.csdn.net &#x1f3a5; 本文由 呆呆敲代码的小Y 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f384; 学习专栏推荐&#xff1a;Unity系统学习专栏 &#x1f332; 游戏制作专栏推荐&#xff1a;游戏制作 &…

计算机毕业设计node.js+vue在线日程管理系统

项目介绍 我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,在线日程管理系统被用户普遍使用,为方便用户能够可以随时进行在线管理自己的日程的数据信息,特开发了基于在线日程管理…

【Pytorch with fastai】第 11 章 :使用 fastai 的中级 API 进行数据处理

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

第2关:子节点创建、列出、删除

子节点创建、列出 首先&#xff0c;需要启动服务器&#xff0c;并使用zkCli.sh连接服务器&#xff0c;进入客户端命令行界面&#xff08;如第一关所述&#xff09;。 创建子节点类似于创建新的节点&#xff0c;子节点也具有四种类型的节点。唯一的区别是&#xff1a;子节点的…

redis学习4-list

基本的数据类型&#xff0c;列表,redis命令是不区分大小写的 在redis中&#xff0c;我们可以把list玩成&#xff0c;线&#xff0c;队列&#xff0c;阻塞队列&#xff01; 所有的list命令都是用l开头的 [rootcentos7964 bin]# redis-cli -p 6379 127.0.0.1:6379> LPUSH li…

Oracle Primavera Unifier计划管理器(Planning Manager)

目录 一、前言 二、介绍 一、前言 在计划管理器中&#xff0c;Oracle Primavera Unifier 用户可以计划新项目/外壳和提案&#xff0c;并为已在 Unifier 中运行的项目/外壳创建预测。他们不能像在 Unifier 中管理真实项目/外壳那样管理计划的项目/外壳;但是&#xff0c;他们可…

Observer

一些比较方便的 DOM 监测的 API。 一个 Observer 实例具备的实例方法&#xff1a; observe。向监听的目标集合添加一个元素。unobserve。停止对一个元素的观察。disconnect。终止对所有目标元素的观察。… 一、IntersectionObserver 提供了一种异步检测目标元素与祖先元素或…

图解LeetCode——792. 匹配子序列的单词数(难度:中等)

一、题目 给定字符串 s 和字符串数组 words, 返回 words[i] 中是s的子序列的单词个数 。 字符串的 子序列 是从原始字符串中生成的新字符串&#xff0c;可以从中删去一些字符(可以是none)&#xff0c;而不改变其余字符的相对顺序。 例如&#xff0c; “ace” 是 “abcde” 的…

css3对页面打印设置的一些特殊属性,如@page,target-counter等

公司内部应业务需求&#xff0c;需要将html生成pdf并能打印&#xff0c;前后台都各有方式&#xff0c;这里综合比较选择用java去生成&#xff0c;避免了前端生成带来的诸多问题&#xff0c;后台用的框架是 iTextPdf 但是在做的同时发现用iText实现的pdf生成和公司的业务需要生成…

Spring学习第6篇: 基于注解使用IOC

大家家好&#xff0c;我是一名网络怪咖&#xff0c;北漂五年。相信大家和我一样&#xff0c;都有一个大厂梦&#xff0c;作为一名资深Java选手&#xff0c;深知Spring重要性&#xff0c;现在普遍都使用SpringBoot来开发&#xff0c;面试的时候SpringBoot原理也是经常会问到&…

【数据链路层】封装成帧和透明传输和差错控制

注&#xff1a;最后有面试挑战&#xff0c;看看自己掌握了吗 文章目录前言链路层功能功能封装成帧和透明传输组帧的四种方法透明传输差错控制检错编码差错链路层的差错控制检错编码纠错编码链路层代码实现&#x1f343;博主昵称&#xff1a;一拳必胜客 &#x1f338;博主寄语&a…

27.gateway的限流实战(springcloud)

1 什么是限流 通俗的说&#xff0c;限流就是限制一段时间内&#xff0c;用户访问资源的次数&#xff0c;减轻服务器压力&#xff0c;限流大致分为两种&#xff1a; 1. IP 限流&#xff08;5s 内同一个 ip 访问超过 3 次&#xff0c;则限制不让访问&#xff0c;过一段时间才可继…

E-Prime心理学实验设计软件丨产品简介

拖放设计 通过将对象拖放到时间轴上来构建文本、图像、声音和视频的实验。利用我们的实验库中的免费模板和预建实验。 计时精度 E-Prime 3.0 将计时精度报告到毫秒精度级别。请务必使用我们的测试工具来确认您的计算机硬件能够进行关键计时。将Chronos添加到您的研究设置中&a…

Kubernetes 系统化学习之 资源清单篇(三)

Kubernetes 是一个可移植的、可扩展的开源平台&#xff0c;用于管理容器化的工作负载和服务&#xff0c;可促进声明式配置和自动化。Kubernetes 拥有一个庞大且快速增长的生态系统。 根据不同的级别&#xff0c;可以将 Kubernetes 中的资源进行多种分类。以下列举的内容都是 K…

轻松学习jQuery控制DOM

✅作者简介&#xff1a;热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏&#xff1a;前端开发者…