您的位置：首页 > Web前端 > CSS

网页设计与制作（HTML+CSS）（一）

2017-05-22 11:50 453 查看
初识html

1) 名词解释：

① Internet：即因特网

② www(World Wide Web)：即万维网

③ URL(Uniform Reource Locator)：统一资源定位符

④ DNS(Domain Name System)：域名解析协议

⑤ HTTP(Hypertext Transfer Protoclo)：超文本传输协议

⑥ WEB：即网页

⑦ W3C组织(World Wide Web Consortium)：万维网联盟

2) Web标准

Web标准主要包括：结构标准、表现标准和行为标准。

① 结构标准：用于对网页元素进行整理和分类，主要包括XML和XHTML两部分。

② 表现标准：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是css。Css(Cascading Style Sheet)：层叠样式表。

③ 行为标准：指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两部分。DOM(Document Object Model)是文档对象模型。ECMASpript是ECMA(European Computer Manufacturers Association)以javaScript为基础制定的标准脚本语言。

3) 网页制作入门

① Html(Hyper Text Markup Language)：主要是通过html标记对网页中的文本、图片、声音等内容进行描述。

② Css(Cascading Style Sheet)：通常称为css样式或样式表。

二、HTML入门

1) Html文档的基本格式

① 
<!DOCTYPE>
标记

位于文档最前面。必须在开头出使用
<!DOCTYPE>
标记为所有的XHTML文档指定版本和类型。

② 
<html>
标记

<html>
标记位于
<!DOCTYPE>
标记之后，也称为根标记，用于告知浏览器其自身是一个html文档。
<html>
标记标志着html文档的开始，
</html>
标记标志着html文档的结束，在它们之间是文档的头部和主体内容。

③ 
<head>
标记

<head>
标记用于定义html文档头部信息，也称为头部标记，紧跟在
<html>
标记之后，只要用来封装其他位于文档头部的标记。一个html文档只能含有一对
<html>
标记。

④ 
<body>
标记

<body>
标记用于定义html文档所要显示的内容，也称为主体标记。

注：一个html文档只能含有一对
<body>
标记，且
<body>
标记必须在
<html>
标记内，位于
<head>
头部标记之后，与
<head>
标记是并列关系。

2) Html标记简介

① 单标记和双标记

单标记（空标记）：单个出现的标签，例如：
<hr/>
、
<br/>
等。

<标记名/>

双标记：必须成对出现的标记，例如：
<h1></h1>
、
<p></p>
等。

<标签名>内容

<!—注释语句-->


注：注释标记中不能嵌套注释标记。

3) Html文档头部相关标记

① 设置页面标题标记
<title>


<title>
网页标题名称
</title>




② 定义页面元信息标记
<meta/>


<meta name=”名称” content=”值” />


在
<meta>
标记中使用name、content属性可以为搜索引擎提供信息，其中那么属性提供搜索内容名称，content属性提供对应的搜索内容值。

<meta http-equiv=”名称” content=”值” />


http-equiv/ content属性可以设置服务器发送给浏览器的http头部信息，为浏览器显示页面提供相关参数。

<meta http-equiv=”refresh” content=”10”;url=http://www.itcast.cn />


用于指定在特定时间后跳转至目标页面，改时间默认以秒为单位。

③ 引用外部文件标记
<link>


<link 属性=”属性值” />


例如：
<link rel=”stylesheet” type=”text/css” href=”style.css” />


属性名常用属性值描述
hrefURL指定引用外部文件的地址
relstylesheet指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表
typetext/css或txt/javascript引用外部文档的类型为css样式表或javaScript脚本
④ 内嵌样式标记
<style>


<style>
标记用于为html文档定义样式信息，位于
<head>
头部标记中。

<style 属性=”属性值”>样式内容< /style>
（在html中使用style标记时常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的css样式）。

4) html文本控制标记

① 标题和段落标记

a) 标题标记：html提供6个等级的标题：
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>


align属性用于设置其对齐方式，取值有：left、center、right

b) 段落标记：
<p></p>


align属性用于设置其对齐方式，取值有：left、center、right

c) 水平线标记：
<hr/>


<hr 属性=”属性值” />


常用属性如下表所示：

属性名含义属性值
align设置水平线的对齐方式可选left、right、center三种，默认center，居中对齐
size设置水平线的粗细以像素为单位，默认为2像素
color设置水平线颜色可用颜色名称，十六进制#RGB、rgb(r,g,b)
width设置水平线的宽度可以是确定的像素，也可以是浏览器窗口的百分比，默认为100%
d) 换行标记
<br/>


② 文本样式标记

<font 属性=”属性值”>文本内容</font>


font标签常用属性：

属性名含义
face设置文字的字体，例如微软雅黑。黑体、宋体等
size设置文字的大小、可以取1~7之间的整数值
color设置文字的颜色
③ 文本格式化标记

常用文本格式化标记：

<b></b>和<strong></strong>文字以粗体方式显示（XHTML推荐使用strong）


<i></i>和<em></em>   文字以斜体方式显示（XHTML推荐使用em）


<s></s>和<del></del> 文字以加删除线方式显示（XHTML推荐使用del）


<u></u>和<ins></ins> 文字以加下划线方式显示（XHTML不赞成使用u）


④ 特殊字符标

常用特殊字符代码:



5) html图像标记

网页上常用的图像格式主要有：GIF、JPG和PNG三种。

图像标记 
<img src=”图像” />




图像的title属性效果如下：



6) 相对路径和绝对路径

绝对路径：一般是指带有盘符的路径。

相对路径：不带盘符，通常是以html网页文件为起点，通过层级关系描述目标图像的位置。

“/”用于指定下一集文件夹

“../”用于指定上一级文件夹
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航