请简述企业网站的推广阶段及其特点,网络营销前景和现状分析,导航栏宽度wordpress,如何选择营销网站建设一、前言:什么是网页? 网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。 网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常… 一、前言:什么是网页? 网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。 网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以 .htm 或 .html 后缀结尾的文件,因此将其俗称为 HTML 文件。 二、什么是HTML? HTML 指的是超文本标记语言 (Hyper Text Markup Language) ,它是用来描述网页的一种语言。HTML 不是一种编程语言,而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)。 所谓超文本,有 2 层含义: 1. 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制 )。 2. 它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本 )。 三、浏览器内核 浏览器内核(渲染引擎): 负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。 四、Web 标准的构成 主要包括结构(Structure) 、表现(Presentation)和行为(Behavior)三个方面。 一、HTML 结构
1.1认识 HTML 标签
HTML 代码是由 "标签" 构成的。形如: HTMLbodyhello/body 标签名 (body) 放到 中大部分标签成对出现. body 为开始标签, /body 为结束标签.少数标签只有开始标签, 称为 "单标签".开始标签和结束标签之间, 写的是标签的内容. (hello)开始标签中可能会带有 "属性",id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)。HTMLbody id="myId"hello/body 1.2HTML 文件基本结构 HTML!DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title今日用例/title /head body Hello World! /body /html html 标签是整个 html 文件的根标签(最顶层标签)head 标签中写页面的属性.body 标签中写的是页面上显示的内容title 标签中写的是页面的标题1.3标签层次结构
父子关系兄弟关系HTML!DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title今日用例/title /head body Hello World! /body /html 其中:
head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)title 是 head 的子标签. head 是 title 的父标签.head 和 body 之间是兄弟关系.可以使用 chrome 的开发者工具查看页面的结构.
F12 或者右键审查元素, 开启开发者工具, 切换到 Elements 标签, 就可以看到页面结构细节. 标签之间的结构关系, 构成了一个 DOM 树
DOM 是 Document Object Mode (文档对象模型) 的缩写. 1.4快速生成代码框架
在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架. HTML!DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title今日用例/title /head body /body /html 细节解释:
!DOCTYPE html 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.html lang="en" 其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).meta charset="UTF-8" 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.meta name="viewport" content="width=device-width, initial-scale=1.0"name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).二、HTML 常见标签
2.1注释标签
注释不会显示在界面上. 目的是提高代码的可读性。 HTML!-- 我是注释 -- ctrl + / 快捷键可以快速进行注释/取消注释.
注释的原则
要和代码逻辑一致.尽量使用中文.不要传递负能量.2.2标题标签: h1-h6
有六个, 从 h1 - h6. 数字越大, 则字体越小。 HTMLh1hello/h1 h2hello/h2 h3hello/h3 h4hello/h4 h5hello/h5 h6hello/h6 2.3段落标签: p
把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落。 HTML css中的1px并不等于设备的1px 在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像 素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css 中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同 的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的 移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确 实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始, 苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着 同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是 这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五 花八门,安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不同,没有一个定论。 还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中 1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。关于 这点,在文章后面的部分还会讲到。 在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的 定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该 设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2, 也就是说1个css像素相当于2个物理像素。但是要注意的是,devicePixelRatio在不同的浏览器中还存在 些许的兼容性问题,所以我们现在还并不能完全信赖这个东西,具体的情况可以看下这篇文章。 2.3.1 p 标签表示一个段落
通过 p 标签改进上述代码, 每个段落放到 p 标签中: HTML!DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title今日用例/title /head body css中的1px并不等于设备的1pxp/p 在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像 素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css 中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同 的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在