页面制作 Chapter 3--HTML

先说一些废话。大三上学期刚开学那会,有点闲,因为这一学期是在机房封闭式上课,前几周上三门课:管理信息系统,UML系统建模与分析设计,JAVA,后三周上JSP,MYSQL,软件测试LoadRunner。前几周的晚上没课,又没事干,然后就开始自学html,当时数学院的老乡给了我一摞ACCP6.0的书,有一本是《使用HTML语言和CSS开发商业站点》,然后我就开始了每天晚上边敲边看,因为所见即所得,当时就觉得挺有意思。那是也不知道有什么更好的IDE,就用的电脑里装的UltraEdit,也没用电脑里的Eclipse,觉得有点大材小用,哈哈,UE里敲html也没提示功能,然后慢慢的,我就能自己熟练的敲出来......现在想想,当时我真的是有点自虐吧,不过还是挺喜欢知识装进大脑里的感觉......后来这本书很快就被我消化完了,然后就开始下一本《使用JavaScript增加交互效果》,我喜欢动态的东西,就像大一我走火入魔的喜欢上做视频甚至想走上后期的道路~好了,说这么多,总之就是一句话,由于自己学了点HTML和CSS入门,这门网易的HTML课对于我而言,主要是温故而知新以及补充HTML5和CSS3的新知。



HTML文档包括文档声明、文档头部和文档主体。

  一、文档声明

          <!DOCTYPE>必须首行,定格,文档声明的作用就是告诉浏览器用什么标准来解析HTML文档。

-HTML4.01

·strict.dtd(严格类型)

·loose.dtd(松散类型,也称过渡类型Transitional)

·frameset.dtd (框架类型)

-HTML5

·<!DOCTYPE html>

  二、文档头部 

          1.<title>标签

              描述网页的标题,类似一篇文章的标题。

打开网页后,将在浏览器窗口的标题栏显示网页标题以及在搜索引擎的搜索结果中看到。

2.<meta>标签

使用该标签描述网页的具体摘要信息,包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。<meta>标签描述的内容并不显示,其目的是方便浏览器解析或利于搜索引擎搜索。

-charset属性

表示字符集编码,一般设置为uft-8(在第一次开发项目的过程中,字符乱码的问题真的是很头疼)

 注:字符声明要放在title的前面 

-keywords(关键字)

表示搜索关键字,方便搜索引擎的搜素。

-description(描述)

表示网站内容的具体描述,方便搜索引擎的搜素。

-viewport (视窗)

对移动端的浏览器才有效果。设定移动端浏览器视口的宽高和缩放等。后续讲解。

3.<link>标签

- 通过下面这个方式添加网站的图标

<link rel="shortcut icon" href="favicon.ico">

    默认情况下,不需要手动引入icon,因为浏览器会默认读取根目录下的图标进行展示,如果有些页面中的图标和整站的图标不同,则可以这样引入。

               - 引入css样式

<link rel="stylesheet" type="text/css" href="../css/style.css">

<style type="text/css">这里写内部样式</style>

btw:文档头部的内容,除了title和icon,其他的都不会作为内容呈现给用户。

            

                       

时间: 2024-10-09 20:38:37

页面制作 Chapter 3--HTML的相关文章

页面制作 Chapter 2--开发、调试工具

Sublime Text 2(Sublime Text官网  http://www.sublimetext.com/) 常用快捷键 1.Goto Anything   查找(Ctrl+P) 直接输入文件名,可进行模糊查找 :+行号,直接跳到指定的行号(查找某一行有一个快捷键 Ctrl+G,直接输入行号即可) @ +函数名,快速查找到制定的函数,@+CSS选择器名,快速查找样式(有一个直接的快捷键 Ctrl+R) # +关键字,就能匹配到关键字(有一个直接的快捷键 Ctrl+:) 2.命令面板(C

页面制作 Chapter 1--PhotoShop切图笔记

由于自己大二自己玩过PS,所以,这节课就相对容易点.但是,PS不经常用的后果就是快捷键容易忘...... 1.PS首选项的设置 编辑>首选项>单位与标尺,把标尺和文字单位改成像素 2.创建切图需要的工作区,关闭不需要的面板(窗口>工作区>新建工作区>保存工作区),右上角选择工作区 a.信息面板(F8) b.图层面板(F7) c.历史记录面板 d.工具栏 e.选项栏 3.切图常用的工具 a.移动工具(选择图层.移动图层) b.矩形选框工具(选择矩形框,查看信息面板,获取选中区域

易企秀 we+ Maka 兔展 四大H5页面制作工具

H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合通过手机的展示.分享.也因其灵活性高.开发成本低.制作周期短的特性使其成为当下企业营销的不二利器,常见于企业宣传.活动推广.产品介绍.会议邀请.公司招聘等. 面对四大在线H5互动展示制作工具,企业营销应该如何选择更适合的H5制作工具呢?今天小编就给大家带来四大在线HTML5互动展示工具的评测. MA

学习手机页面制作4

学习手机页面制作-制作固定-流式-固定的布局 制作左右固定宽度中间自适应的页面布局 具体的页面效果可以http://m.juhuasuan.com/m/index.htm 的头部导航 传统的布局方式 使用定位的方式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>固定比例固定</title&

学习手机页面制作3

手机页面制作3 利用上节说的box-sizing解决流式布局的一个问题 一个流式布局的代码 左右的width+border>100% 所以盒子会掉下去 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width:100%; h

利用循环栏目导航标签及自定义页面制作帝国CMS网站地图

网站地图,又称站点地图,它就是一个页面,上面放置了网站上所有页面的链接.也简洁地表现了网站栏目关系,一般就包含顶级栏目和二级栏目.搜索引擎蜘蛛非常喜欢网站地图.在帝国CMS中没有生成网站地图的功能,所以嗨分享今天就给大家介绍一种方法生成它的网站地图. 主要用到帝国CMS中的两个重要知识点: 一.循环栏目导航标签(listshowclass) 二.自定义页面 第一步:增加标签模板 帝国CMS网站后台--[模板]-左侧[标签模板]-[管理标签模板] 可以增加一个标签模板,也可以直接使用 ID为1,模

页面制作(PS/HTML/CSS)易错点总结

今天做了网易云课堂的页面制作试卷,虽然分数暂未公布,但是已经知道了自己这段时间以来的成效.下面总结几个易错点: 1.Photoshop切图: 图片保存格式: a.图片色彩较为丰富但无透明度要求时应保存为jpg格式: b.当图片色彩不太丰富时无论有无透明要求时保存为png8,且设置“杂边:无:扩散:无仿色”: c.当图片有半透明要求,不对图片进行压缩,保存为24. 注意:PNG8格式图片的颜色模式是索引颜色,在修改前要先更改颜色模式为RGB颜色. 常用快捷键: a.Alt+shift+Ctrl+s

【干货】微信场景之H5页面制作免费工具大集合

营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用户500万,访问量超1亿的神话. H5如此势头,不得不让营销人对H5页面的未来充满了期待,越来越多的人开始在营销中运用H5页面.其实在移动端各个领域,H5页面的叫法很多,也会称为翻翻看.手机微杂志.广告页.场景应用.海报\画报(动态海报.指尖海报.掌中海报.动画海报.微画报.微海报)等等,经常能见到的就是滑动

页面制作部分之PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选