使用HTML语言和CSS开发商业站点

时间:2021-11-10 12:28:24

第一章

预习笔记

单词:

head:前进

title:标题

meta:超过

body:身体.尸体

W3C:全球最大的中文Web技术教程

strong:强烈的

target:目标,对象

href:水平参考

一:

1:什么是HTML:用来描述网页的一种语言,它是一种超文本标记语言,也就是说,HTML不仅是一种语言,仅是一种                 标记语言,由一套标记标签组成,在制作网页时,HTML使用标记标签来描述网页;

2:W3C标准包括结构化标准语言(HTML,XML,).表现标准语言(CCS,).行为标准(DOM,ECMAScript),

3:网页的基本标签:

1>标题标签:表示一段文字的标题或者主题

2>段落标签:<p>...</p>表示一段文字

3>换行标签:<br/>表示强制换行显示

4>水平线标签:<hr/>表示一条水平线,该标签与<br/>标签一样,比较特殊,没有结束标签.

****//5>:字体样式标签:<strong>标签可以是字体变粗.<em>可以使字体倾斜.

二:

注释和特殊符号

语法:

<!--注释内容-->

特殊符号:

空格:&nbsp   大于号(>):&gt    小于号(<):&It      引号(""):&quot     版权符号:&copy

图像标签:

1>JPG格式:有损压缩,会造成图像的失真,压缩后的体积很小,比较清晰

2>GIF格式:支持透明色,支持动画

3>BMP格式:与其他的Microsoft windows兼容,不支持文件压缩,与不适用于Web网页

4>PNG格式:兼容GIF格式和JPG格式,同时具备GIF格式不具备的特征

三:

图像标签的基本语法:

<img src="图片地址"alt ="图像的代替文字"width ="图片宽度"height ="图片高度"/>

超链接标签:

语法

<a href ="链接地址"target ="目标窗口位置">链接文本或者图像</a>

超链接的应用场合:

1>页面间链接:从一个页面链接到另一个页面;

2>锚链接 :常用于目标页内容很多,需定位到目标页内容中的某个具体位置;

语法:<a name="markwr">目标位置乙<a/>

<a href ="#marker">当前位置甲</a>

3>功能性连接:当单击该链接时不是打开某个网页,而是启动本机自带的某个应用程序;

DoctYpe声明

<!DCTYPE html>必须放在第一行。

<title>
 <title> 搜狐</title>

<meta>
 <meta charset="UTF-8"/>

<h1></h1>------<h6></h6>
 提供了六级标签,所有标题字体加粗。<h1>最大<h6>最小

<p></p>
 表示一段文字或者内容。<p>我爱你我爱你</p>

单标签
 <br/>
  表示强制换行表示,该符比较特殊,没有结束标签,直接使用。
 <hr/>
  表示一条水平线,该符和<br/>一样,没有结束标签,直接使用。

字体样式标签
 <strong></strong> 让字体加粗
 <em></em> 让文字倾斜。

常见的图像格式:JPG Gif BMP PNG

图像标签的基本
语法:
<img src="图片地址" alt="图像的代替文字" title="鼠标悬停时显示的文字" width="图片宽度"
 hight="图片高度"/>

超链接的标签
语法:
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
 href:表示链接地址的路径
 target:链接在哪个窗口打开,常用的取值有——self(自身窗口)、——blank(新建窗口)
超链接可以是文本超链接,也可以是图像超链接。

行内元素和块元素
 块元素的特征:无论内容多少,该元素独占一行。
 行元素的特征:内容撑开宽度,左右都是行内元素的可以排在一行。

总结

1:HTML5文件的基本结构包括网页声明,网页基本信息,页面头部和页面主体;

2:编写HTML文档时遵守W3C标准,W3C是制定和维护统一的国际化Web开发标准的组织

3:网页基本标签包括:

1>:标题标签:<h1> ~<h6>

2>:段落标签:<p>

3>:水平线标签:<hr/>

4>:换行标签:<br/>

4:插入图像时标签<img/>.要求src和alt 属性比选

5:超链接<a>标签用于建立页面间的的导航链接.

链接可分为:

1>:页面键连接

2>:锚链接

3>:功能性链接