网页设计基础——01
认识网站
- 网站有网页构成,网页有静态和动态之分。
- 所谓静态网页是指用户无论何时何地访问,网页都会显示固定的信息 ,除非网页源代码被重新修改上传。静态网页更新不方便 ,但是,访问速度快。
- 而动态网页显示的内容则会随着用户操作和时间的不同而变化 ,这是因为动态网页可以和服务器数据库进行实时的数据交换 。
名词解释
- Internet 所谓Internet 就是通常所说的因特网,是由一些使用公用语言互相通信的计算机连接而成的网络 。Internet 实现了全球信息资源的共享。
- WWW(英文World Wide Web的缩写)中文译为“万维网”,它只是Internet提供的一种服务─网页浏览服务。
- URL(英文Uniform Resource Locator的缩写)中文译为“统一资源定位符”,其实就是Web地址,俗称“网址”。
- DNS(英文Domain Name System的缩写)是域名解析系统。
- HTTP(英文Hypertext Transfer Protocol的缩写)中文译为超文本传输协议,它是一种详细规定了浏览器和万维网服务器之间互相通信的规则 。是非常可靠的协议 它具有强大的自检能力。
- Web 对于普通用户来说,Web仅仅只是一种环境 ─互联网的使用环境、氛围、内容等。而对于网页设计、制作者来说,Web是一系列技术的复合总称(包括网站的前台布局、后台程序、 美工、数据库开发等),通常称其为网页。
- W3C(英文World Wide Web Consortium的缩写)中文译为“万维网联盟”,是国际最著名的标准化组织 。W3C 最重要的工作是d发展Web规范 。
Web标准
- Web标准并不是某一个标准,而是一系列标准的集合, 主要包括结构、表现和行为三方面。
- 结构标准:结构用于对网页元素进行整理和分类 ,主要包括XML和XHTML两部分。使内容更清晰 有逻辑性 。
- 表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。用于修饰内容的样式。
- 行为标准:行为是指网页模型的定义及交互的编写,主要包括 DOM和ECMAScript两部分。内容的交互及操作效果。
HTML和CSS
- HTML和CSS是网页制作的标准语言。
HTML
- HTML,主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述 。HTML提供了许多标记,如段落标记、标题标记、超链接标记、图片标记等。
- HTML的发展史:
①HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。
③HTML 3.2:1997年1月14日,W3C推荐标准。
④HTML 4.0:1997年12月18日,W3C推荐标准。
⑤HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。
⑥HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。
CSS
- CSS,主要用于设置HTML页面中的文本内容 (字体、大小、对齐方式等),图片的外形(宽高、边框模式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能。
- CSS非常灵活,既可以嵌入到HTML文档,也可以是一个单独的外部文件,如果是独立的文件,则必须以.css为扩展名。
- CSS的发展史:
1996年12月,W3C发布了第一个有关样式的标准CSS1,又在 1998年5月发布了CSS2.目前,最新的版本是CSS3,但是各个浏览器对它的支持不统一,所以流行的版本仍然是CSS2。
HTML文档基本格式
HTML文档基本格式主要包含<!doctype>文档类型声明、根标记、头部标记和主体标记
- < DOCTYPE>标记
< DOCTYPE>标记位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML或XHTMIA标准规范。网页必须在开头处使用< DOCTYPE>标记为所有的HTML文档指定HTML版本和类型,只有这样浏览器才能将该网页作为有效的HTML文档,并按指定的文档类型进行解析。< DOCTYPI>标记和浏览器的兼容性相关,删除<! DOCTYPE>标记会把展示HTML页面的权利交给浏览器。这时有多少种浏览器,页面便会有多少种显示效果,这在实际开发中是不被允许的。 - < html >标记
< html >标记位于< DOCTYPE>标记之后,也称根标记。根标记主要用于告知浏览器其自身是一个HTML文档。< html >标记标志着HTML文档的开始,< /html >标记则标志着HTML文档的结束,在它们之间是文档的头部和主体内容。 - < head >标记
< head >标记用于定义HTML文档的头部信息,也称头部标记,紧跟在< htmb >标记后。头部标记主要用来封装其他位于文档头部的标记,例如< tite >、< meta >、< link >及< style >等,用来描述文档的标题、作者以及与其他文档的关系。需要注意的是,一个HTML文档只能含有一对< head >标记,绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。 - < body >标记
< body >标记用于定义HTML文档所要显示的内容,也称主体标记。浏览器中显示所有文本、图像、音频和视频等信息都必须位于< body >标记内。< body >标记中的信息能最终展示给用户看。一个HTML文档只能含有一对< body >标记,且< body >标记必须在< html >标记内,创 头部标记之后,与< head >标记是并列关系。
HTML标记
单标记
(1).<标记名称>单一型,无属性值。如:< br />在xhtml中,规定,所有HTML标记,都要小写,所有的标记都要有关闭。
(2).<标记名称 属性=“属性值”>单一型,有属性值。
如:< hr width=“80%”/>
双标记
(3).<标记名称>…</标记名称>没有属性值。如:< title >…</ title>
(4).<标记名称 属性=”属性值“>…</标记名称>有属性。如:< font color=“pink”>…</ font>
说明:标记与属性,属性之间以空格分隔。
属性不区分先后顺序;且属性不是必要的。
注释标记
语法格式:< !-- 注释的内容 – >
注意:
html 注释标签不支持任何的标准属性和事件!
注释标记中不能嵌套注释标记。
HTML文档头部的相关标记
设置页面标题标记< title >
定义网页标题,显示在浏览器的标题栏中。
语法格式:< title >网页标题名称< /title >
定义页面元信息标记< meta />
< meat name="" content="">
1.keywords:网页的关键字
2.description:网页的描述
3.robots:(meta name=“robots” content=“all”),允许搜索引擎收录,
4.author:作者
5.copyright:版权
< meat htttp-equiv="" content="">
1.Content-Type:字符集(< meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”>)
2.Refresh:页面自动刷新与跳转(< meta http-equiv=“refresh” content=“3000;url=http://www.baidu.com”>)
引用外部文件标记< link >
一个页面往往需要多个外部文件的配合,在< head >中使用< link >标记可引用外部文件,一个页面允许使用多个< link >标记引用多个外部文件。
<link rel="stylesheet" type="text/css" href="mystyle.css">
//表示引用当前HTML页面所在文件夹中,文件名为style.css的CSS样式表文件
内嵌样式标记< style >
用于为HTML文档定义样式信息
<head>
<title></title>
<style type="text/css">
h2{color:red;}
p{color:blue;}
</style>
</head>
<body>
<h2>二级标题</h2>
<p>段落</p>
</body>
HTML文本控制标记
标题标记
<hn align="对齐方式">标题文本</hn>
该语法中n的取值为1~6
align属性为可选属性:
①left 设置标题文字左对齐(默认值)
②center 设置标题文字居中对齐
③right 设置标题文字右对齐
注意: 一个页面中只能使用一个< h1 >标记
段落标记
<p align="对齐方式">段落文本</p>
水平线标记
<hr 属性="属性值" />
属于单标记,在网页中输入< hr />,就添加了一条默认样式的水平线
属性名 | 含义与属性值 |
---|---|
align | 设置水平线的对齐方式 可选择left.right.center三种值,默认为center,居中对齐 |
size | 设置水平线的粗细 以像素为单位,默认为2像素 |
color | 设置水平线的颜色可是颜色名称.十六进制#RGB ,rgb(r,g,b) |
width | 设置水平线的宽度可以是确定的像素值,也可以是浏览器窗口的百分比,默认为100% |
换行标记
<p>这是<br/>一个<br/>段落</P>
文本样式标记
<font 属性="属性值">文本内容</font>
属性名 | 属性值 |
---|---|
face | 设置文字的字体,例如微软雅黑、黑体、宋体等 |
size | 设置文字的大小,可以取1~7的整数值 |
color | 设置文字的颜色 |
文本格式化标记
标记 | 显示效果 |
---|---|
< b></ b>和< strong></ strong> | 文字以粗体方式显示(b定义文本粗体.strong定义强调文本) |
< i></ i>和< em></ em> | 文字以斜体方式显示(i定义斜体字,em定义强调文本) |
< s></ s>和< del></ del> | 文字以加删除线方式显示(HTML5不赞成使用s) |
< u></ u>和< ins></ ins> | 文字以加下划线方式显示(HTML5不赞成使用u) |
特殊字符标记
特殊字符 | 描述 | 字符的代码 |
---|---|---|
空格 |  ; | |
< | 小于号 | <; |
> | 大于号 | >; |
& | 和号 | &; |
¥ | 人民币 | ¥; |
© | 版权 | ©; |
® | 注册商标 | ®; |
° | 摄氏度 | °; |
± | 正负号 | ±; |
x | 乘号 | ×; |
÷ | 除号 | ÷; |
² | 上标2 | ²; |
³ | 上标3 | ³; |
网页设计基础——01相关推荐
- HTML网页设计基础期末作业——绿色化妆品网页(HTML+CSS)
HTML网页设计基础期末作业--绿色化妆品网页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板 ...
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章 网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...
- HTML网页设计基础期末作业——仿Coco线上订奶茶饮料网站设计与实现6个页面(HTML+CSS+JavaScript)...
HTML网页设计基础期末作业--仿Coco线上订奶茶饮料网站设计与实现 6个页面(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
- HTML网页设计基础——图文混排
HTML网页设计基础--图文混排 案例: 分析:该题的属性有图片,加粗,斜体,下划线,还有水平线,还有空格的使用 代码:
- Dreamweaver Flash Photoshop网页设计基础与实例教程(职业白金版)
Dreamweaver & Flash & Photoshop网页设计基础与实例教程(职业白金版) 基本信息 作者: 龙飞 丛书名: 培训专家 出版社:电子工业出版社 ISBN:978 ...
- HTML网页设计基础笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...
- 《网页设计基础——HTML注释与CSS注释》
网页设计基础--HTML注释与CSS注释 一.HTML注释: 格式: <!-- 在此处书写注释 --> 例如: <html><head><title>H ...
- 《网页设计基础——表格与表单》
网页设计基础--表格与表单 一.表格的基础框架: 规则: table:表示整个表格. caption:定义表格的标题 tr:表示表格的一行. td:表示行中的一个列,需要嵌套在 <tr> ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
最新文章
- 台积电2nm与3nm制程
- 春季学期第十一周作业
- 《深入理解Java虚拟机》(二)Java虚拟机运行时数据区
- canopen和1939区别_CAN 和 CANopen的区别和联系
- 赠书 | 什么是 Knative?
- windows 批处理设置环境变量
- matlab主要数据预处理函数,Matlab 神经网数据预处理的函数
- 一对电话线传输100M带宽不再是问题
- 091118 T 数组的继承
- hdu1865 1sting
- ValueError: This model has not yet been built. Build the model first by calling `build()` or calling
- CWND和HWND之间的关系和转换 和获取方法
- 模拟器链接appium
- Vivo手机安装谷歌Play商店,安装服务框架谷歌Google,支持X90,X80,X70,X60,s系列,IQOO
- 解决ppt的页码不显示的问题
- 餐饮外卖平台小程序源码,附带详细教程
- 指令集架构、微架构、处理器架构、CPU架构
- [乐意黎原创]PHP抛PHP Startup:Unable to load dynamic library bcmath,Libmcrypt,mhash,mcrypt等警告及模块动态安装详解
- cas66-71-7|1,10-菲啰啉有机配体/ 1,10-Phen/邻菲啰啉/邻二氮杂菲
- LinuxC实现文件夹及其文件的拷贝
热门文章
- Flume配置-Failover
- TIA博途V17中ProDiag功能的使用方法示例(一)PLC数据类型的监控
- 用python写一个商城网页服务器并且实现数据库和网页交互
- 足球赛事实时大小球数据worldliveball软件搭建
- midaspay能删除吗_(完整版)midas快捷键
- 华为升级鸿蒙主题,华为开发者大会主题确定:鸿蒙系统、H..MS及EMUI11三大升级...
- 焊接机器人厂家教你如何实施自动化焊缝跟踪定位
- html 实现二维效果图,25个很酷CSS3效果欣赏
- 深度学习 TensorFlow入门
- 1.1.14 Electron 监听网络状态