第一章网页制作的基础知识1

旧林843

已于 2024-09-12 10:09:27 修改

阅读量980

点赞数 20

文章标签： html5

于 2024-09-11 17:48:50 首次发布

本文链接：https://blog.csdn.net/2403_87194226/article/details/142143750

版权

1.1 认识网页网站

1.1.1 网页、网站

网页和网站的区别：

1.网站是多个网页的集合，只要有独立域名和空间，哪怕只有一个页面也可以称为网站

2.网址是指因特网上网页的地址，网站是根据一定规则构成的，而网页是网站的基本元素。

常用术语：

URL：指定通信协议和地址

FTP:文本传输协议

发布：即上传网站

超链接：在浏览网页时单击超链接就能跳转与之相应的页面，可以是图片，文件等等

1.1.2 静态网页和动态网页

动态网页技术包括 HTML CSS JavaScript

静态网页技术包括 HTML CSS

1.2 网页的基本构成元素

1.2.1.文本

文本体积小、网络传输速度快，是网页最主要的基本元素和信息载体

1.2.2.图片和动画

图片比文本更生动和直观，图片格式主要包括GIF、JPE、GPNG

1.2.3.超链接：

1.2.4.音频视频：

音频压缩速率高，视频具有文件小，加载速度快特点

1.2.5.交互表单

通常接收用户在浏览器端的输入，可以是文本文件、网页和电子邮件也可以是服务器端的应用程序

1.2.6.其他常见元素

运用特效点缀网页

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

1）网页安全色

2）网页中色彩的表达

3）常见色彩搭配

1.4 Web前端技术简介

1.4.1 初识WEB前端

Web前端即指平常上网浏览的网页

1.4.2 WEB前端开发的三大核心技术

1.HTML：控制页面结构，是制作网页的标准语言

2.CSS：控制页面样式、静态修饰网页，还可以配合脚本语言动态地对网页元素格式化，并拥有对网页对象和模型样式进行编辑的能力

3.JavaScript：是一种属于网络的脚本语言，常用来为网页添加动态功能，属于浏览器的一部分由浏览器边解释边执行，通常Javascript脚本通过嵌入HTML中的方式来实现自身功能

1.4.3 前端开发工具
浏览器：谷歌浏览器、IE浏览器、GoogleChrome

网页编辑器：HBuilderX

切图工具：PS

1.5 HTML语法基础
1.5.1 HTML概述
1.语言

2.超文本

3.标记

1）单标签：指只存在一个标签的写法如<meta><input>等

2)双标签：指存在一对标签如<head></head><body></body>等，注意第一个为起始标签，第二个为结束标签，“/”在结束标签里作为关闭符

1.5.2HTML基本结构

1.5.2.1 HTML文档标签<html>...</html>

1.5.2.2 HTML文档头标签<head>...</head>

1.5.2.3 文档编码

文档编码格式为<meta charset="utf-8"/> 文档声明的编码应该与实际编码一致，否则会成乱码

1.5.2.4 HTML文档主体标签<body>...</body>

它定义网页上显示的主要内容与显示格式，网页中要显示的内容都包含在主体中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		我的第一个网页
		
	</body>
</html>

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签

用于标示文档标题
1.7.2 <meta>标签

1.7.2.1 keywords

用来告诉搜索引擎网页使用的关键字

1.7.2.2 description

用来告诉搜索引擎网站主要的内容

1.7.3 <link>标签

用于连接外部资源和当前HTML文档，如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一个<link>标签

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

1.8.2 特殊符号


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="Keywords" content=""/>
		<meta name="description" content=""/><!--检索-->
		<link real="stylesheet"href="/css/index.css"type="text/css"/><!--怎么引入css文件-->
		<script type="text/javascript"src="/js/index.js"></script><!--怎么引入js文件-->
		
		<title>网页</title><!--标题-->
	</head>
	<body>
		<p>我的第一个网页</p>
		<p>软件1</p><!--p标签换行-->
		<a href="http://www.baidu.com">百度一下</a><!--超链接-->
		<!--
		多行注释第一行
		多行注释第二行
		-->
	</body>
</html>

<html>
   <head>
      <meta name="keywords" content=“宋词，苏轼”charset="utf-8”/>
      <meta name="description" content=“本网站收录精选宋词”/>
      <title>宋词精选</title>
      <style type="text/css">
          p{
             text-align:center;
             font-size :larger;
		  }
		  
		  
      </style>
  </head>
  <body bgcolor="antiquewhite" text="#333333” >
       <h2 align="center">临江仙·送钱穆父</h2>
       <p>宋 苏轼</p >
       <!--使用<br/>的效果-->
       <p>一别都门三改火，天涯踏尽红尘。<br/>
              依然一笑作春温。<br/>
          无波真古井，有节是秋筠。<br/>
          惆怅孤帆连夜发，送行淡月微云。<br/>
          尊前不用翠眉颦。<br/>
          <font color="brown"face="微软雅黑">人生如逆旅，我亦是行人。</font></p >
		<img src="img/h2.jpg">
        <!--水平线-->
        <hr size="2" color="black"width=" 100%”/>
        <p align="center">网页制作教程Copyright&copy;广东南方职业学院</p >
    </body> 
</html>