页面设计的基本流程
设定文档类型
字符编码
css样式引入
内容布局div+css
js引入(在body最后引入)
填充内容
素材管理
1. 设定文档的内容:
告诉浏览器解析html的规范(主要是因为不同版本可能包含不同的标签,需要对应解析)
注意,<!DOCTYPE>没有结束标签,放在文档的最开始
<!DOCTYPE html>--html5
2. 字符编码
HTML文档尽早指定字符编码,可以让浏览器立刻开始执行脚本,浏览器必须知道使用何种字符集才能更快更准确的显示文档流中的内容。如果你不能对web服务器配置进行修改,又需要通过meta标签指定编码,要确保你用于指定编码的meta标签是文档中head标签的第一个子元 素。浏览器会在文档的前1024字节中寻找字符编码参数,因此为了避免性能损耗,编码参数在文档头部越早出现越好。始终指定文档类型:在浏览器开始检查字符编码设定前,它们必须先检测将被处理的文档是什么类型。如果没有在头信息或meta标签中指定文档类型(content-type),浏览器就会通过很复杂的算法去“嗅探”文档的类型。这个过程会造成额外的延迟,而且还会带来安全漏洞。(告诉浏览器是html,但是是何种规范解析该html是doctype要做的工作)<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
3. css样式的引入
<link href=“./global.css" rel="stylesheet" type="text/css" />
样式优先级由低到高
2. 素材的安排:素材通常在项目里使用相对路径,可以方便部署和修改,一改全改,其中当前目录使用./wenjian,上一级 目录下使用../wenjian,再网上一级../../wenjian
3.块级元素和内联元素的区别和联系:
块级元素:在浏览器中显示时,一般都会以新行开始,通常的块级元素有(div,p,h,ul,table),对应的css样式 是 display:block
内联元素:都是不会以新行开始,直到该行被排满为止,通常有span,td, a,img等,对应的css样式是display: inline
特别注意:内联元素占空间但是不会定义空间,就像是定义span的宽高是不会起作用的,但是可以通过别的内部内容撑开,内联元素里面不能使用div内联(inline)对象的宽度取决于其内部元素的宽度(width)与填充(padding)值之和,不可直接指定其宽度与高度,相邻的两个内联对象会排在同一行上,不会从新行开始
div可以成为块级元素,使用display:inline
另外,使用relative是相对于自己的文档流位置的相对偏移,absolute,脱离文档流,是以父元素容器作为参照进行偏移
的。
fixed是相对于浏览器的窗口的absolute,例如淘宝客服
5. 处理居中操作:
一个是margin:0 auto水平居中
一个是line-height:(想居中的容器同高),注意:如果先起作用,需要设置容器的height并且设置line-height相同。
相关推荐
### Java零基础-多态 #### 内容概要 本文旨在深入浅出地介绍Java中的多态(Polymorphism)这一核心概念及其具体应用。读者不仅能够理解多态的基本含义,还能掌握如何在实际编程中运用多态,提高代码的灵活性和可...
每个步骤都会提供实用的技巧和注意事项,确保网页的完整性和用户体验。 教程中的每个PPT文件都对应一个主题,例如CH10.PPT可能涵盖了更高级的主题,如JavaScript基础,它是一种能使网页具有交互性的编程语言。CH11....
### Java零基础-final关键字 #### 内容概要 本文主要介绍了Java中final关键字的概念及其在实际编程中的应用。读者将能够理解final关键字的基本定义、用途及作用范围,并且掌握如何在不同的编程场景中合理使用它。...
《Visual.Basic.2005基础与实例教程》是一本全面介绍Visual Basic 2005编程技术的书籍,旨在帮助不同水平的学习者从零开始掌握这一强大的编程工具。本书内容丰富,覆盖了从基本概念到高级应用的各个方面,旨在为读者...
### Java零基础 - HelloWorld程序详解 #### 一、引言 HelloWorld程序是学习任何编程语言时最常见的第一个程序。对于初学者来说,它不仅能够帮助理解编程语言的基本语法,还能激发学习兴趣。本文将详细介绍Java语言...
### Java零基础方法递归详解 #### 一、引言 在计算机科学中,递归是一种重要的编程思想,尤其在解决复杂问题时有着不可替代的作用。对于初学者来说,掌握递归不仅能提升编程能力,还能培养逻辑思维能力。本文将...
### Java零基础-DOS命令del #### 概要 本文档将向读者详细介绍如何在Java环境中利用`ProcessBuilder`类来执行DOS命令,重点介绍`del`命令的应用。通过本指南,您不仅能够了解如何在Java中调用外部命令行工具,还将...
### Java零基础-集成开发环境MyEclipse的使用 #### 知识点一:MyEclipse简介及安装 - **MyEclipse概述**: - MyEclipse是基于Eclipse平台的一款增强型集成开发环境(IDE),专为Java开发者设计,同时也支持Web...
### Java零基础(JDK13) - 常用DOS命令 - cd回到上级以及回到根 #### 概述 本文档将引导读者了解如何利用Java编程语言中的`ProcessBuilder`类来执行常见的DOS(Disk Operating System)命令。特别地,我们将关注于...
### Java零基础方法重载详解 #### 一、方法重载概述 在Java语言中,方法重载(Overloading)是一种允许在同一个类内定义多个同名方法的技术,但这些方法必须具有不同的参数列表(参数个数不同或参数类型不同)。...
### Java零基础 - 使用java命令运行Java程序 #### 编写示例源码 为了能够更好地理解如何使用`java`命令来运行Java程序,我们首先需要编写一段Java源代码。这里我们将创建一个非常简单的程序——“Hello, World!”...
### Java 零基础控制语句 - for 循环 #### 概述 在 Java 编程语言中,控制语句对于实现逻辑控制至关重要。控制语句允许开发者根据不同的条件来决定程序的流程走向,从而使得程序能够按照预期的方式运行。在众多...
### Java零基础-方法覆盖详解 #### 方法覆盖概述 在面向对象编程中,**方法覆盖**(Method Overriding)是子类重新定义父类方法的一种机制。这种方法允许子类继承父类的同时,根据需要修改或扩展特定的行为。方法...
#### 知识点四:网页设计中的注意事项 1. **用户体验**: - 页面加载速度:避免使用过大的图片文件,优化代码结构。 - 导航结构:确保用户能够轻松找到所需信息。 - 移动设备适配:随着移动互联网的发展,越来越...
网页模板是设计者为了方便非专业网页制作人员快速构建...通过阅读README.md文件,了解模板的使用方法和注意事项,然后根据自身的品牌特点进行个性化调整,就能实现一个功能齐全、视觉效果出众的家庭俱乐部在线平台。
4. **注意事项** - **性能优化**:尽管正则表达式强大,但处理大型文本时可能效率较低。对于复杂的HTML解析,可能需要使用专门的HTML解析库,如Python的BeautifulSoup。 - **正则表达式陷阱**:避免过度复杂和贪婪...
Linux实用培训学习教程,版本在不断...本书讲述了linux知识,linux安装注意事项,学前补习,shell命令, linux编程基础,Fedora Core,linux培训,Bbuntu,Wine, 搭建个人网页等等内容,还有海量的linux技术文章链接。
"网页模板"则表示这些源码是预先设计好的布局和样式,可以作为基础快速构建网页,减少从零开始设计的工作量。 【压缩包子文件的文件名称列表】仅提到"TM-0054",这可能是该模板的内部目录结构或主要文件名。在实际...
考试注意事项还包括严格遵守考场纪律,禁止代考和交流,违反规定将被认定为作弊,成绩计零。每个班级的考试时间表已经详细列出,学生需要根据安排准时参加,不可随意更改场次。 总体来说,这是一次全面检验2010级...
1. 使用须知.txt:这个文件通常包含对压缩包内资源的使用说明和注意事项,指导开发者如何正确理解和使用源码。 2. 132689043387212408:这是一个未知文件名,可能是数据库文件、配置文件或代码文件。在实际的ASP...